変数
css自体でもカスタムプロパティを使用して変数に近い設定ができますが、scssはもっと直感的に変数を扱うことができます。
また、変数ファイルを作成してスタイルと分けて管理することもできます。
これで変数ファイルを入れ替えるだけで全体のスタイルを変更することも可能です。
//style.scss
//変数
$font_min:0.7em;//小さいフォント
$font_main:1em;//通常フォント
$font_max:1.5em;//大きいフォント
$body_width:100%;//bodyタグのワイド
$main_width:100%;//コンテンツワイド
$in_max_width:980px;//コンテンツインナーの最大サイズ
.wrap{
max-width:$in_max_width;
padding:$nomal_padding;
}
コメントアウト
地味に便利なのがコメントアウトです。
cssの場合
/*コメント*/
としますがscssだと
//コメント
とできます。
行頭にスラッシュを２つ入れるだけなので編集が楽です。
また、cssへコンパイルする時にコメントを入れるかを選択したりもできます。
ネスト（入れ子構造）
これはscssの特徴ともいえるとものでネストで記述できれば、後からclass名が変わる時など便利です。
cssだとその都度記述が必要なものがネストで一括で挿入できたりします。
style.scss
.main{
color:#333;
.sub{
.in{
color:#fff;
}
}
}↓
style.css
.main {
color: #333;
}
.main .sub .in {
color: #fff;
}
親セレクタの継承
親セレクタを変数として扱うことができます。
scss
.main{
color:#333;
&__inner{
color:#444;
}
&:hover{
color:#555;
}
&:after{
display:block;
}
}↓
css
.main {
color: #333;
}
.main__inner {
color: #444;
}
.main:hover {
color: #555;
}
.main:after {
display: block;
}インポート
cssでもインポートができますが、cssの場合はページを読み込んでからインポートしたcssを生成する処理になり多少表示スピードが遅くなります。
scssの場合はコンパイルをしておけば１つのcssにまとめるということができますので遅延が発生しません。
style.scss
@import "variables";//「_variables.scss」先頭にアンダーバーがあるscssを読み込む @import url("main.scss"); @import url("style_1.scss");
コンパイルするとstyle.cssに上記のscss内容が反映されます。
@extend(スタイルの継承)と％～（プレースホルダ）
@extend セレクタ;
で指定したセレクタのスタイル全部を継承できます。
また、読み込み元として％～でプレースフォルダにしておけば余計なスタイルの書き出しを避けることができます。
基本的なスタイルをパターン化しておき横並び修正を楽にすることができます。
scss
.a{
background:#fff;
color:#000;
}
%p1{
padding:10px;
}
.b{
@extend .a;
width:100%;
}
.c{
@extend .b;
@extend %p1;
}↓
css
.a, .b, .c {
background: #fff;
color: #000;
}
.c {
padding: 10px;
}
.b, .c {
width: 100%;
}@mixinと@eachを使ってプレフィックスを簡単に作る
@mixin（引数が指定できる変数）と@each（繰り返し）を使って長くなるようなプレフィックスを作ることができます。
アニメーションに関してのソースですが、ついでにアニメーションの解説も入れときます。
$PREFIX_TYPES_ANIME: -webkit-, -moz-, -ms-, -o-, '';
@mixin custom_animation_all( $name: none , $duration: 1s , $timing_function: ease-in-out , $delay: 0s , $iteration_count: 1 , $direction: normal , $fill_mode: both , $play_state: running) {
@each $prefix in $PREFIX_TYPES_ANIME {
#{$prefix}animation: $name $duration $timing_function $delay $iteration_count $direction $fill_mode $play_state;
}
}
/*
①アニメーションの名前 $name
②アニメーションの時間（?s）$duration
③アニメーションの進行ペース $timing_function
ease ⇒ (開始から終了まで滑らかに)
linear ⇒ (開始とから終了まで一定)
ease-in ⇒ (開始部分だけゆっくり)
ease-out ⇒ (終了部分だけゆっくり)
ease-in-out ⇒ (開始と終了がゆっくり)
cubic-bezier ⇒ 関数で数値指定cubic-bezier(開始のX,開始のY,終了のX,終了のY)
④アニメーションの開始タイミング $delay
⑤アニメーションの繰り返し回数 $iteration_count
infinite ⇒ 無限
⑥アニメーションの繰り返しの向き $direction
normal ⇒ 0%から100%に向けて一直線
reverse ⇒ 100%から0%に向けて一直線
alternate ⇒ 0%から100%に向けていき、100%で折り返し
alternate-reverse ⇒ 100%から0%に向けていき、0%で折り返し
⑦アニメーションの開始前・終了後のstyle指定 $fill_mode
none ⇒ アニメーション開始前・終了後は元々指定していたstyleが適用
backwards ⇒ アニメーション前は0%の状態のstyleが適用。アニメーション後はデフォルトの状態のstyleが適用
forwards ⇒ アニメーション前はデフォルトの状態のstyleが適用。アニメーション後は100%の状態のstyleが適用
both ⇒ アニメーション前は0%の状態のstyleが適用。アニメーション後は100%の状態のstyleが適用
⑧アニメーションの実行状況 $play_state
running ⇒ 初期値。アニメーションを実行・再生中
paused ⇒ アニメーションを一時停止に状態にする。値をrunningに変えた場合は中断地点から再開
*/
@keyframes opacity_show{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
.display_block{
display:block;
@include custom_animation_all( opacity_show , 0.5s);
}ここでは@eachを使用していますが@ifや@for等の条件やループ処理もできます。
他にも色々な機能があり、なれるとcssの直書きより楽になります。
コメント