sassの使い方を勉強してみた

はじめに

仕事でsassを使用しているとのことなので学習してみました。sass特有の表記などありますが、特に関数、@mixinと@extendの棲み分け等は気を付けておかなければならないと思います。sassには２種類の記法があり、.sassと.scssがあるようです。現在は.scssが主流です。

入れ子

sassでは入れ子構造にすることが可能です。#main p {}と書く必要はなく、#mainの中に直接pを入れ子にしています。

test.scss

#main {
 font-size: 16px;
 p {
   color: red;
 }
}

変数

変数を$○○の形で定義することにより、scss内で使用することができます。変数は文字列のみならず、数値、真偽、色など設定可能です。

test.scss

$fontBase: 16px;
#main {
 font-size: $fontBase;
}

色に変化をつける

色も変数として使用可能です。さらにlightenとdarkenを使うことで指定した割合分暗くしたり、明るくしたりすることができます。

test.scss

$baseColor: red;
#main {
 color: $baseColor;  ・・・red
}
#light {
 color: lighten($baseColor, 30%)  ・・・redより30%明るくなる
}
#dark {
 color: darken($baseColor, 30%)  ・・・redより30%暗くなる。
} 

If文

真偽値によって条件分岐をすることも可能です。

test.scss

$test: true;
#main {
 @if $test == true {
  color: red;    ・・・値はtrueなので赤になる
 } @else {
  color: yellow;
 }
} 

for文、while文

for文やwhile分も使えます。下のように記述すると下記cssと同様になります。

test.scss

@for $i from 10 through 14 {
  .fs#{$i} {
    font-size: #{$i}px;
  }
}
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
$i: 10;
@while $i <= 14 {
  .fs#{$i} { font-size: #{$i}px; }
  $i: $i + 1;
}

test.css

.fs10 {
  font-size: 10px;
}
.fs11 {
  font-size: 11px;
}
.fs12 {
  font-size: 12px;
}
.fs13 {
  font-size: 13px;
}
.fs14 {
  font-size: 14px;
}
--------------------------------------------------
.fs10 {
  font-size: 10px;
}
.fs11 {
  font-size: 11px;
}
.fs12 {
  font-size: 12px;
}
.fs13 {
  font-size: 13px;
}
.fs14 {
  font-size: 14px;
}

リスト

この辺りはrubyの繰り返し処理と似ています。複数要素を順番に取り出すことができます。

test.scss

$subjects: Japanese, English, Math;
@each $subject in $subjects {
 .#{$subject}-icon { background: url("#{$subject}.png");}
}

test.css

.Japanese-icon {
  background: url("Japanese.png");
}
.English-icon {
  background: url("English.png");
}
.Math-icon {
  background: url("Math.png");
}

関数

@function 関数名で関数を定義し、呼び出すことが可能です。下の関数は並べた要素の幅を自動計算する関数です。

test.scss

$totalWidth: 940px;
$columnCount: 10; 
@function getColumnWidth($width, $count) {
  $padding: 10px;
  $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
  @return $columnWidth;
}
.grid {
  float: left;
  width: getColumnWidth($totalWidth, $columnCount);
}

test.css

.grid {
  float: left;
  width: 85px;
}

ファイルの分離

上記関数を次のように分離することができます。その時@importを表記することが必要です。

_settings.scss

$totalWidth: 940px;
$columnCount: 10; 

_functions.scss

@function getColumnWidth($width, $count) {
  $padding: 10px;
  $columnWidth: floor(($width - ($padding * ($count - 1))) / $count);
  @return $columnWidth;
}

test.scss

@import "settings";
@import "functions";
.grid {
  float: left;
  width: getColumnWidth($totalWidth, $columnCount);
}

mixin

@mixinとして複数の処理を定義しておき、使用することができます。ここではroundを呼び出すことでborder-radius: $radius;を使用できます。呼び出す際は@includeを使用します。引数を渡すことで角の丸さを調整できます。

test.scss

@mixin round($radius: 4px) {
  border-radius: $radius;
}
.label {
  font-size: 12px;
  @include round(10px);    ・・・border-radius: 10px;が定義される                                                 
}

extend

こちらもいくつかの要素を定義して呼び出すことが可能です。呼び出す際は@extendを使います。.msgに定義した要素を呼び出しています。

test.scss

.msg {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  color: white;
}
.errorMsg {
  @extend .msg;
  background: red;
}
.warningMsg {
  @extend .msg;
  background: orange;
}

test.css

.msg, .errorMsg, .warningMsg {
  font-size: 12px;
  font-weight: bold;
  padding: 2px 4px;
  color: white;
}

.errorMsg {
  background: red;
}

.warningMsg {
  background: orange;
}

以上

参考

ドットインストール
https://dotinstall.com/