SASS(SCSS)の基本的な使い方

SASS(SCSS)の開発環境

SASS(SCSS)を使った開発はMicrosoftの無料で使えるエディター、Visual Studio Codeを使うことをお勧めします。
面倒なコンパイルを自動化できます。

Sassって規模が大きくなればなるほど効率的なのは分かっているけどコンパイルとかそのコンパイルの環境を構築するのが面倒だから導入さてれいないそうです。でもVisualStudioCodeを使えば拡張機能で簡単にコンパイルできちゃうんです。以...

セレクタのネスト

SASS(SCSS)はセレクタをネストをネストして書くことができます。

HTML

<body>
    <div class="container">
        <p class="text01">あいうえお</p>
        <p class="text02">かきくえこ</p>
    </div>
</body>

このような簡単なHTMLにSCSSでスタイルを当てます。

SCSS

.container
{
    background-color: red;
    .text01
    {
        color: blue;
    }
    .text02
    {
        color: yellow;
    }
}

このようにネストしたコードを書けるので、SCSSのコードが整理できて見やすく保守性も良くなります。

これをコンパイルして変換されたCSSを確認してみます。

CSS

.container {
  background-color: red;
}

.container .text01 {
  color: blue;
}

.container .text02 {
  color: yellow;
}
/*# sourceMappingURL=style.css.map */

同じセレクタ名が何度も書かれています。

一方、SCSSではネストして書くことで何度も同じセレクタ名を書いていません。

親セレクタの参照

&を使って親セレクタを参照することができます。

HTML

<body>
    <div class="container">
        <a href="#">アンカーテキスト</a>
    </div>
</body>

aタグを使ってリンクを作りました。

SCSS

.container
{
    a
    {
        color: blue;
        &:hover
        {
            text-decoration: underline;
        }
    }
}

リンクテキストの色を青にしてマウスカーソルを当てるとアンダーランを表示するようにしました。

&を使って親セレクタのaを参照しています。

？？と思ったら、出力されたCSSを確認します。

CSS

.container a {
  color: blue;
}

.container a:hover {
  text-decoration: underline;
}
/*# sourceMappingURL=style.css.map */

このようなCSSが生成されます。

親セレクタを参照できているのが分かると思います。

親セレクタ名の参照

&は親セレクタ名の参照もできます。

HTML

<body>
    <div class="container">
        <p class="container_text01">あいうえお</p>
        <p class="container_text02">かきくけこ</p>
    </div>
</body>

内容クラス名に注目して下さい。

SCSS

.container
{
    &_text01
    {
        color: red;
    }
    &_text02
    {
        color: blue;
    }
}

説明すまでもありませんね。

CSSを確認します。

CSS

.container_text01 {
color: red;
}

.container_text02 {
color: blue;
}
/*# sourceMappingURL=style.css.map */

クラス名を参照しているのが確認できます。

セレクタを継承

@extendを使ってセレクタのスタイルを継承できます。

HTML

<body>
    <div class="container">
        <p class="text01">あいうえお</p>
        <p class="text02">かきくけこ</p>
    </div>
</body>

このコードにSCSSでスタイルを当てます。

SCSS

.container
{
    .text01
    {
        background-color: red;
    }
    .text02
    {
        @extend .text01;
        color: blue;
    }
}

.text01の背景色を設定します。

.text02は.text01のスタイルを継承して更に表示色を設定します。

CSSを見てみます。

CSS

.container .text01, .container .text02 {
  background-color: red;
}

.container .text02 {
  color: blue;
}
/*# sourceMappingURL=style.css.map */

こんな面倒くさいCSSをSCSSなら簡単に書けます。

継承元がネストしていてもネストしているスタイルを継承できます。

プレースホルダセレクタ

% プレースホルダ―セレクタと@extendするとプレースホルダセレクタを出力しないで、スタイルだけを継承することができます

HTML

<body>
    <div class="container">
        <p class="text01">あいうえお</p>
        <p class="text02">かきくけこ</p>
    </div>
</body>

簡単なHTMLにSCSSでスタイルを当てます。

SCSS

.container
{
    %bkcolor
    {
        background-color: red;
    }
    .text01
    {
        @extend %bkcolor;
        color: white;
    }
    .text02
    {
        @extend %bkcolor;
        color: yellow;
    }
}

%を使ってbkcolorと言うプレースホルダセレクタを定義します。

@extendでプレースホルダセレクタのスタイルを継承します。

CSS

.container .text01, .container .text02 {
  background-color: red;
}

.container .text01 {
  color: white;
}

.container .text02 {
  color: yellow;
}
/*# sourceMappingURL=style.css.map */

プレースホルダセレクタのbkcolorが出力されていないのが分かります。

変数

SASS(SCSS)は$を使用してプログラミング言語のように変数が使えます。

SCSS

$color_default  :red;
$width_default  :960px;
.container
{
    color: $color_default;
    width: $width_default;
}

$を使って変数を宣言して初期値を代入します。

プロパティの値に変数名を書きます。

CSS

.container {
  color: red;
  width: 960px;
}
/*# sourceMappingURL=style.css.map */

プロパティの値に変数の値がセットされています。

演算

SASS(SCSS)は演算子を使うことで簡単な演算ができます。

SCSS

$font_default   :16px;
$font_small :   $font_default   *   0.8;
$font_big   :   $font_default   *   1.2;

.container
{
    .text01
    {
        font-size: $font_default;
    }
    .text02
    {
        font-size: $font_small;
    }
    .text03
    {
        font-size: $font_big;
    }
}

$font_small変数に$font_default変数の値を0.8倍した値を代入します。

$font_big変数に$font_default変数の値を1.2倍した値を代入します。

CSS

.container .text01 {
  font-size: 16px;
}

.container .text02 {
  font-size: 12.8px;
}

.container .text03 {
  font-size: 19.2px;
}
/*# sourceMappingURL=style.css.map */

少数点が有るのは気にしないでください。

演算子

演算子の種類

+	加算
–	減算
*	乗算
/	除算
%	剰余

外部ファイルのインポート

SASS(SCSS)が外部ファイルを読み込んでコンパイルすることが可能です。

よって機能別やカテゴリ別にファイルを分けることができるのでより管理やメンテナンスが用意になります。

個別にはコンパイルしないで読み込んでからコンパイルする方法もあります。

SCSS

scssファイルを3個用意してstyle.sccsで読み込みます。

読み込まれるscssファイルはファイル名の頭に_（アンダースコア）を付けてパーシャルなファイルとして独自にコンパイルできないようにします。

_stylecolor.scss

$color_red  :   red;
$color_blue :   blue;
$color_yellow   :yellow;

ファイル名の先頭に_（アンダースコア）を付けて単独でコンパイルできないパーシャルなファイルにします。

_stylewidth.scss

$width_defaule  :   960px;
$width_small    :   $width_defaule  *   0.8;
$width_big      :   $width_defaule  *   1.2;

こちらも同様にパーシャルなファイルにします。

style.scss

@import "_stylewidth.scss";
@import "_stylecolor.scss";

.container
{
    .text01
    {
        color: $color_red;
        width: $width_defaule;
    }
    .text02
    {
        color  :$color_blue;
        width: $width_small;
    }
    .text03
    {
        color: $color_yellow;
        width: $width_big;
    }
}

@importを使って2つのscssファイルを読み込みます。

_（アンダースコア）は省略して書くことができます。

コンパイルによって出力されたCSSを見てみます。

CSS

.container .text01 {
  color: red;
  width: 960px;
}

.container .text02 {
  color: blue;
  width: 768px;
}

.container .text03 {
  color: yellow;
  width: 1152px;
}
/*# sourceMappingURL=style.css.map */

正常に読み込まれて機能しています。

配列

前に説明した$を使った変数の応用で配列を使うことができます。

HTML

<body>
    <div class="container">
        <p class="text01">あいうえお</p>
        <p class="text02">かきくけこ</p>
        <p class="text03">さしすせそ</p>
        <p class="text04">たちつてと</p>
        <p class="text05">なにぬねの</p>
    </div>
</body>

クラス名をtext01～05まで作ります。

SCSS

$array_text: "text01","text02","text03","text04","text05";

.container
{
    @each $text in $array_text
    {
        .#{$text}
        {
            font-size: 20px;
        }
    }
}

変数の宣言と同様に$を使って配列を宣言します。

値を,（カンマ）で区切って値を代入します。

@eachを使って配列に指定したクラスのfont-sizeを変更します。

出力されたCSSを見てみます。

@eachについては後程！！。

CSS

.container .text01 {
  font-size: 20px;
}

.container .text02 {
  font-size: 20px;
}

.container .text03 {
  font-size: 20px;
}

.container .text04 {
  font-size: 20px;
}

.container .text05 {
  font-size: 20px;
}
/*# sourceMappingURL=style.css.map */

セレクタ.text01～05のfont-sizeを20pxに変更しています。

@mixin

@mixinを使ってスタイルを定義し@includeでそのスタイルを呼び出すことができます。

基本の使い方

SCSS

.container
{
    @mixin box
    {
        height: 100px;
        width: 100px;
        border-radius: 5px;            
    }
    .box01
    {
        @include    box;
        background-color: red;
    }
    .box02
    {
        @include    box;
        background-color: blue;
    }
}

@mixinを使ってスタイルを定義します。

各セレクタ内で@includeを使って@mixinで定期したスタイルを読み出します。

CSS

.container .box01 {
  height: 100px;
  width: 100px;
  border-radius: 5px;
  background-color: red;
}

.container .box02 {
  height: 100px;
  width: 100px;
  border-radius: 5px;
  background-color: blue;
}
/*# sourceMappingURL=style.css.map */

@mixinで定義したスタイルが@includeで呼び出されているのが確認できます。

引数を使う

@mixinは引数を使うことができます。
先程のSCSSを少し変更します。

SCSS

.container
{
    @mixin box($height,$width,$bkcolor)
    {
        height: $height;
        width: $width;
        background-color: $bkcolor;
        border-radius: 5px;            
    }
    .box01
    {
        @include    box(100px,100px,red);
    }
    .box02
    {
        @include    box(200px,200px,blue);
    }
}

変数の応用編みたいな感じです。

@mixun名に()カッコを付けて受け取る引数を変数と同様に$で宣言します。

@includeで読み出すときにも()カッコ内に渡す引数を書きます。

CSS

.container .box01 {
height: 100px;
width: 100px;
background-color: red;
border-radius: 5px;
}

.container .box02 {
height: 200px;
width: 200px;
background-color: blue;
border-radius: 5px;
}
/*# sourceMappingURL=style.css.map */

ごらんの通り思い通りにCSSが出力されました。

初期値を使う

@mixinは引数を使えることは分かりましたが、その引数に初期値を設定することができます。

SCSS

.container
{
    @mixin box($height:100px,$width:100px,$bkcolor:red)
    {
        height: $height;
        width: $width;
        background-color: $bkcolor;
        border-radius: 5px;            
    }
    .box01
    {
        @include    box;
    }
    .box02
    {
        @include    box(200px,200px,blue);
    }
}

@mixinの引数に予め値を代入するとそれが初期値になります。

@includeで引数を省力すると初期値が適用されます。

勿論、初期値以外の値を引数とすることもできます。

CSS

.container .box01 {
  height: 100px;
  width: 100px;
  background-color: red;
  border-radius: 5px;
}

.container .box02 {
  height: 200px;
  width: 200px;
  background-color: blue;
  border-radius: 5px;
}
/*# sourceMappingURL=style.css.map */

説明いりませんね。

条件分岐

@ifを使って条件分岐できます。

SCSS

$colorflg01    :   true;
.container
{
    @if $colorflg01    ==  true
    {
        .text01
        {
            color: red;
        }    
    }
}

変数$colorflg01の値がtrueならば.text01のcolorを赤に設定します。

CSS

.container .text01 {
  color: red;
}
/*# sourceMappingURL=style.css.map */

CSSはこのように出力されます。

複数条件の時はand、or演算子でつなげます。

SCSS

$colorflg01 :   true;
$colorflg02 :   true;

.container
{
    @if $colorflg01 ==  true    and
        $colorflg02 ==  true
    {
        .text01
        {
            color: red;
        }
    }
}

@colorflg01変数がtrueで且つ@colorflg02変数の値がtrueならばと言う条件です。

CSS

.container .text01 {
  color: red;
}
/*# sourceMappingURL=style.css.map */

単純なCSSが出されます。

@ifは複数（ネスト）条件分岐ができます。

SCSS

$colorflg01 :   3;

.container
{
    @if $colorflg01 ==  1
    {
        .text01
        {
            color: red;
        }
    }
    @else
    {
        @if $colorflg01  ==  2
        {
            .text01
            {
                color: blue;
            }    
        }
        @else
        {
            .text01
            {
                color: yellow;
            }
        }
    }
}

@ifの条件にヒットしない場合の処理には@elseを使います。

$colorflg01の値が1ならば赤色に設定し、2ならば青に設定、以外なら黄色に設定します。

CSS

.container .text01 {
  color: yellow;
}
/*# sourceMappingURL=style.css.map */

$colorflg01の値が3なのでこのようなCSSが出力されます。

条件分岐で使用した演算子を比較演算子と論理演算子と言います。

比較演算子

演算子	比較	結果
==	等しい	左右が等しければtrue
!=	等しくない	左右が等しくなければtrue
>	大きい	左が右より大きければtrue
<	小さい	左が右より小さければtrue
>=	以上	左が右と等しいか大きければtrue
<=	以下	左が右と等しいか小さければtrue

論理演算子

演算子	例	結果
and	$a and $b	$aがtrueで且つ$bがtrueならばtrue
or	$a or $b	$aと$bのいずれかがtrueならばtrue
not	not $a	$aがfalseならばtrue

繰り返し@for

@forを使用することで繰り返しで処理ができます。
って言ってもよく分かりませんよね。
実例で紹介します。

SCSS

.container
{
    @for $i from    1   through 5
    {
        .text0#{$i}
        {
            font-size:16px +   $i  *   5;
        }
    }
}

変数$iが1～5まで繰り返します。

$i変数は1から始まり都度+1して実行されます。

CSS

.container .text01 {
  font-size: 21px;
}

.container .text02 {
  font-size: 26px;
}

.container .text03 {
  font-size: 31px;
}

.container .text04 {
  font-size: 36px;
}

.container .text05 {
  font-size: 41px;
}
/*# sourceMappingURL=style.css.map */

右.text01～05のfont-sizeを設定するCSSを出力します。

繰り返し@while

@while は条件式がtrueである限り処理を繰り返します。
@forと似ていますが書くことが多い分自由度が有ります。

SCSS

$i	:	1;

@while	$i	<=	5
{
	.text0#{$i}
	{
		font-size:16px	+	$i;

		$i	:	$i	+	1;
	}	
}

変数$iに初期値1をセットして変数$iが5以下であれば処理を繰り返します。

変数$iは処理の最後に1を加算します。

@forとは違い変数の演算が自由にできます。

CSS

.text01 {
font-size: 17px;
}

.text02 {
font-size: 18px;
}

.text03 {
font-size: 19px;
}

.text04 {
font-size: 20px;
}

.text05 {
font-size: 21px;
}
/*# sourceMappingURL=style.css.map */

このようなCSSが出力されます。

繰り返し@each

配列変数に対しての繰り返し処理は@eachを使います。

SCSS

$colors : red, blue, yellow;

@each	$color	in	$colors
{
	.#{$color}
	{
		color : $color;
	}
}

$colorsと言う配列変数に3個の値を代入します。

@eachで配列の数だけ繰り返し処理します。

CSS

.red {
  color: red;
}

.blue {
  color: blue;
}

.yellow {
  color: yellow;
}
/*# sourceMappingURL=style.css.map */

このようなCSSが生成されます。

最後に！！

SASS(CSS)の基本的な使い方を記事にしましたが、まだまだごく一部でSASS(SCSS)には組み込み関数や関数宣言等多くの機能があります。

しかしながらこの記事で紹介した機能も全てを使う機会はあまりないとと思います。

便利で使い易い機能を選んで使うことをお勧めします。