- 2009-05-22 (金) 4:28
- Diary | Programming
a[href$='.mid'] display: inline-block padding-left: 20px line-height: 18px background: transparent url(/images/music.png) center left no-repeat
これは失敗するんだけど、（コンパイルエラーになってしまうようだ）
a[href$=".mid"] display: inline-block padding-left: 20px line-height: 18px background: transparent url(/images/music.png) center left no-repeat
は成功するという話。haml/sass では文字列は "" で括るのが吉ですね。というか、"" で括れ。（ドキュメントにもそう書いてある！）
あと、 dsplay: inline-block; とついつい「;」を書いてしまうのだけど、そうすると解釈が通らない。ここも、個人的にはよくハマる。
そのほか、最初は & （親要素の参照）の使い方も最初はよく分からなかった。けれど、sass では display: inline-block （CSSな感じ） と書いても、 :display inline-block （ruby/rails な？感じ） と書いてもいいらしい。なので、a :visited などの場合は「:」の意味が曖昧になるのだなーと考えると、合点がいった（ちなみに、両記法はどちらか一方に制限することもできる）。具体的には、
a
:color red
&:visited
:color blue
とかけば、a { color: red; } と a :visited { color: blue; } に展開できる。（&がないと、文法解釈にだいぶ困る！）
まぁ、ほんとはそういう意味ではないのかもしれないけれど、個人的にはそうやってこじつけて納得している（ｗ
とにかく、 a:visited, a:hover … などとズラズラ書くより、ネスとして書いたほうが把握しやすい。そんな記述ができるのが sass のいいところ。だけど、そのためだけにわざわざ新しい文法を覚えるの？ といわれれば微妙。やはり、mix-in や !変数 を使いこなせれなければ、真価を発揮したとはいえないんだろうな。
—
3時になっても眠れないので、今日はスタイルシートでリンクへファイル拡張子別にアイコンをつけてみる方法を少し考えてみました…ってことで。
ほとんどこのページを参照しましたけどね。
How to add file type Icons to Links with CSS | Psyked | Psyked
関連エントリー
