【CSS】sassの便利機能

CSS CSS
スポンサーリンク

変数

css自体でもカスタムプロパティを使用して変数に近い設定ができますが、scssはもっと直感的に変数を扱うことができます。

また、変数ファイルを作成してスタイルと分けて管理することもできます。
これで変数ファイルを入れ替えるだけで全体のスタイルを変更することも可能です。

 

コメントアウト

地味に便利なのがコメントアウトです。

cssの場合

としますがscssだと

とできます。

また、cssへコンパイルする時にコメントを入れるかを選択したりもできます。

ネスト(入れ子構造)

これはscssの特徴ともいえると思います。

cssだとその都度記述が必要なものがネストで一括で挿入できたりします。

style.scss

style.css

 

親セレクタの継承

親セレクタを変数として扱うことができます。

scss

css

インポート

cssでもインポートできますが、cssの場合はページを読み込んでからインポートしたcssを生成する処理になり多少表示スピードが遅くなります。

scssの場合はコンパイルをしておけば1つのcssにまとめるということができますので遅延が発生しません。

style.scss

コンパイルするとstyle.cssに上記のscss内容が反映されます。

@extend(スタイルの継承)と%~(プレースホルダ)

@extend セレクタ;

で指定したセレクタのスタイル全部を継承できます。

また、読み込み元として%~でプレースフォルダにしておけば余計なスタイルの書き出しを避けることができます。

基本的なスタイルをパターン化しておき横並び修正を楽にすることができます。

scss

css

@mixinと@eachを使ってプレフィックスを簡単に作る

@mixin(引数が指定できる変数)と@each(繰り返し)を使って厄介なプレフィックスを作ることができます。

アニメーションに関してのソースですが、ついでにアニメーションの解説も入れときます。

ここでは@eachを使用していますが@ifや@for等の条件やループ処理もできます。

 

 

コメント

タイトルとURLをコピーしました