Sass の @extend はどこがすごいのか
この記事では Less & Sass Advent calendar 2011 の 16 日目として、Sass の @extend 機能について書いてみます。が、諸事情により締め切りを過ぎてからあわてて書いており、かなりとっ散らかったものになるであろうことをあらかじめお断りしておきます。 さて、まずは @extend の基本的な機能についてざっとおさらい。@extend される側として一連のスタイルを定義したセレクタがあり、そのセレクタを @extend で継承しつつプロパティを追加したりして、新しいセレクタを作ります: // SCSS // 継承元のセレクタ .button { display: inline-block; border: 1px solid gray; background-color: silver; &:hover { border-color: black; }
LESSにextendを実装してみた - hokaccha memo
Less & Sass Advent calendar 2011の14日目です。LESSにextendを実装したので紹介。 LESSはSassに比べて機能が少ないです。その中でもよくLESSにはextendがないのが困るというのを聞くので実装してみました。 SassのextendについてはAdvent Calendarでも後ほど誰かが紹介してくれると思いますが、こんな感じです。 Sassの@extendでCSSとHTMLをシンプルに - あと味 LESS版はこんな感じで書けます。 .foo { width: 100px; } .bar { +.foo; /* この + ってのがSassでいうところの @extend */ } これをコンパイルするとこうなります。 .foo, .bar { width: 100px; } いいですね。よく使いそうなのがclearfix的なやつだと思います。
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
