Sass
Sassの「&」を利用して親クラスを便利に参照する（3）
#{&}のように記述することで、親クラス名を引っ張ってきて小クラス名をつけることもできます。 .scss ファイル .sample { #{&}Child { background:red; } } ↓ …Sassの「&」を利用して親クラスを便利に参照する（2）
前回はSassファイルで「&」を利用して、親クラスと&以下に記述したクラスを繋ぐ方法をご紹介しました。 今回は、囲っているクラスの上位に新しいクラスを指定して記述する方法をご紹介します。 .scss ファ…Sassの「&」を利用して親クラスを便利に参照する（1）
Sassのファイルで利用する「&」はこれまで主に下記のように親クラスと繋ぐ役割として利用してきたのですが、親クラスの代わりとして実はもっと様々なことに利用できるようです。 今回は代表的なセレクタの連結として利用す…
Sassで＆を使ってCSSの記述をコンパクトにする
input[type=”text”]{ border-color: #eee; background: #eee; &:focus{ background: #fff; } } input[type=”text”…Sassの @extendを利用してコンパクトに記述する
@extendを利用するには、利用したいスタイルがどこかのclassにまとめて記述されているという前提条件があります。 引用元class .ex_class { margin: 5px 0; padding: 5px; …
Compassの落とし穴：グラデーションにsvg出力を行わせない
CompassでCSSグラデーションを描く際は下記のように記述します。 @include background-image(linear-gradient(#fff, #ccc)); これをコンパイルするとCSSには下記…Gruntの基礎おさらい
WebStormをベースに、Gruntを用いてSassを利用していますが、どのようにしてSassまで行き着いているのか改めて仕組みをおさらいします。 GruntでSassを動かすために、プロジェクトフォルダごとに下記3点…