【CSS】sassの便利機能

スポンサーリンク
CSS CSS
スポンサーリンク
スポンサーリンク

変数

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の特徴ともいえると思います。

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の場合はコンパイルをしておけば1つの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等の条件やループ処理もできます。

 

 

コメント

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