SCSS

高度SCSS（Advanced SCSS）

1. ミックスイン（Mixin）とインクルード（Include）

CSSのコンテキスでは、ミキシンはCSSルールをグループ化するために使用されるディレクティブとして理解される。これはプレースホルダーと同様ですが、完全に同じではない。ミキシンでは、プレースホルダーではできないパラメータを渡すことができる。
ミキシンは、現在のコンテキストに@includeを使用して組み込まれる。構文は@include <name> または @include <name>(<arguments...>) で、ここで <name> はミキシンの名前となる。

/*Scss*/
    @mixin reset-list{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    @mixin horizontal-list{
        @include reset-list;
     
        li{
            display: inline-block;
            margin:{
                left: -2px;
                right: 2em;
            }
        }
    }
    nav ul{
        @include horizontal-list;
    }
    
/*Css*/
    .nav ul{
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .nav ul li{
        display: inline-block;
        margin-left: -2px;
        margin-right: 2em;
    }

ミックスインは、ダッシュボード全体で再利用できるスタイルを定義することを可能にする。これは.float-leftのような意味のないクラスを使用するのを避け、スタイルセットをライブラリ全体に分散させることを可能にする。 (これはプロジェクト内で複数回使用されるスタイルに通常使用される)

例:

/*No Parameters*/
    /*scss*/
        @mixin menu{
            #menu{
                a{
                    background: #333;
                    text-decoration: none;
                }
                li{
                    height: 30px;
                    line-height: 30px;
                }
            }
        }
        --------------------------
        @include menu;
    /*css*/
        #menu a{
            background: #333;
            text-decoration: none;
        }
        #menu li{
            height: 30px;
            line-height: 30px;
        }

/*Use variable*/
    /*scss*/
        $color-blue: blue;
        @mixin menu{
            background: $color-blue;
        }
        .header{
            @include menu;
        }
    /*css*/ 
        .header{
            background: blue;
        }

/*The default value of parameter*/
    /*scss*/
        @mixin nav($background, $color: white){
            background: $background;
            color: $color;
        }
        .nav{
            @include nav(red);
            border: solid 1px;
        }
    /*css*/
        .nav{
            background: red;
            color: white;
            border: solid 1px;
        }

/*Pass parameter with variable names*/
    /*scss*/
        @mixin nav($background, $color){
            background: $background;
            color: $color;
        }
        .nav{
            @include nav($color : blue, $background: red);
            border: solid 1px;
        }
    /*css*/
        .nav{
            background: red;
            color: blue;
            border: solid 1px;
        }

/*@content*/
    /*scss*/
        @mixin nav($border){
            border: $border;
            @content;
        }
        .nav{
            @include nav(solid 1px red 1231){
                padding: 20px;
            };
        }
    /*css*/
        .nav{
            border: solid 1px red 1231;
            padding: 20px;
        }

2. 関数（Function）

SASSの中で関数はプログラミングの分野では馴染みがあるが、それはCSSを構築する上で非常に新しく、もちろん非常に役立つ概念。

SASSの関数は"@mixin"と似ているが、よく分析すると、"@mixin"はプロシージャ（戻り値のない関数）に似ており、関数は戻り値を持つもの。

関数は "@function"アットルールを使用して定義される。これは @function <name>(<arguments...>) { ... } と記述される。

関数の名前には、SASS中の任意のキーワードを使用できる。これには、一般的なステートメントと、関数呼び出しの結果として使用する値を示す at-rule @returnのみを含めることができる。関数は、通常のCSS関数構文を使用して呼び出される。

/*scss*/
    @function pow($base, $exponent){
        $result: 1;
        @for $_ from 1 through
        $exponent{
            $result: $result * $base;
        }
        @return $result;
    }
    .sidebar{
        float: left;
        margin-left: pow(4,3) * 1px;
    }
    
    @function sum($numbers...){
        $sum: 0;
        @each $number in $numbers{
            $sum: $sum * $number;
        }
        @return $sum;
    }
    .micro{
        width: sum(50px, 30px, 100px);
    }

/*css*/
    #sidebar{
        float: left;
        margin-left: 64px;
    }
    #micro{
        width: 180px;
    }

関数を使用すると、SassScriptの値に対する複雑な操作を定義し、それをスタイルシート全体で再利用できる。
一般的な公式や動作を読みやすい方法でまとめるのに役立つ。

例:

/*scss*/
    @function width_wrapper($value){
        @return ($value + 20px);
    }
    .wrapper{
        width: width_wrapper(80px);
    }

/*css*/
    .wrapper{
        width: 100px;
    }

3. IF AND ELSE

If

At-rule "@if"は@if <expression> { ... } の形で書かれ、そのブロックのコードが評価されるかどうかを制御する（CSSのようなスタイルを生成するかどうかを含む）。
式は通常、trueまたはfalseを返します。式がtrueを返す場合、コードブロックは評価され、式がfalseを返す場合、コードブロックは評価されない。

if elseステートメントを使用して条件が正しいかどうかを確認し、正しい場合はifブロック内のステートメントを実行し、その逆の場合は、elseブロック内のステートメントを実行する。

/*scss*/
    @mixin avatar($size, $circle: false){
        width: $size;
        height: $size;
    
        @if $circle{
            border-radius: $size / 2;
        }
    }
    .square-av{
        @include avatar(100px, $circle: false);
    }
    .circle-av{
        @include avatar(100px, $circle: true);
    }

/*css*/
    .square-av{
        width: 100px;
        height: 100px;
    }
    .circle-av{
        width: 100px;
        height: 100px;
        border-radius: 50px;
    }

Else

at-rule "@if" の後には、オプションのat-rule @else を使用できる。これは@else { ... }の形で書かれ、このat-ruleのコードブロックは、@if 式が false を返す場合に評価される。

/*scss*/
    $light-background: #f2ece4;
    $light-text: #036;
    $dark-background: #6b717f;
    $dark-text: #d2e1dd;
    @mixin
    theme-colors($light-theme: true){
        @if $light-theme{
            background-color: $light-background;
            color: $light-text;
        } @else {
            background-color: $dark-background;
            color: $dark-text;
        }
    }
    .banner{
        @include theme-colors($light-theme: true);
        body.dark & {
            @include theme-colors($light-theme: false);
        }
    }

/*css*/
    .banner{
        background-color: #f2ece4;
        color: #036;
    }
    body.dark .banner{
        background-color: #6b717f;
        color: #d2e1dd;
    }

Else if

@else if <expression> { ... }と記述することで、at-rule @else コードブロックを評価するかどうかを選択することもできる。その場合、コードブロックは、前のat-rule @if　の式が falseを返し、@else if　の式がtrueを返す場合にのみ評価される。

実際、at-rule @if の後に、必要なだけat-rule @else if を連鎖させることができる。式がtrueを返すチェーン内の最初のコードブロックが評価され、他のブロックは評価されない。チェーンの最後にプレーン at-rule @else がある場合、他のすべてのブロックが失敗すると、そのブロックが評価される。

ziuy

/*scss*/

    @mixin triangle($size, $color, $direction){
        height: 0;
        width: 0;
        border-color: transparent;
        border-style: solid;
        border-width: $size / 2;

        @if $direction == up{
            border-bottom-color: $color;
        } @else if $direction == right{
            border-left-color: $color;
        } @else if $direction == down{
            border-top-color: $color;
        } @else if $direction == left{
            border-right-color: $color;
        } @else {
            @error "Unknown direction #{$direction}.";
        }
    }
    .next{
        @include triangle(5px, black, right);
    }

/*css*/
    .next{
        height: 0;
        width: 0;
        border-color: transparent;
        border-style: solid;
        border-width: 2.5px;
        border-left-color: black;
    }

4. EACH

SASSにPHPのforeachループはと同じ機能を持つat-rule @each　がありますが、SASSにはPHPのように配列構造がないため、SASSのat-rule @each は配列リストと同様なデータ型をループするために使用される。

At-rule @each を使用すると、リスト内の各要素またはマップ内の各ペアに対してデータ型を簡単に生成したりコードを評価したりするのに役立つ。バリエーションが少ない、繰り返しのスタイルに最適。通常、構文が@each <variable> in <expression> { ... }と書かれ、式はリストを返す。コードブロックはリストの各要素に対して順番に評価され、指定された変数名に割り当てられる。

/*scss*/

    $sizes: 40px, 50px, 80px;
    @each #size in $sizes{
        .icon-#{$size}{
            font-size: $size;
            height: $size;
            width: $size;
        }
    }

/*css*/
    .icon-40px{
        font-size: 40px;
        height: 40px;
        width: 40px;
    }
    .icon-50px{
        font-size: 50px;
        height: 50px;
        width: 50px;
    }
    .icon-80px{
        font-size: 80px;
        height: 80px;
        width: 80px;
    }

/*scss*/

    $icons: {"eye": "\f112", "start": "\f12e", "stop": "\f12f"};
    @each @name, $glyph in $icons{
        .icon-#{$name}:before{
            display: inline-block;
            font-family: "Icon Font";
            content: $glyph
        }
    }

/*css*/
    @charset "UTF-8";
    .icon-eye:before{
        display: inline-block;
        font-family: "Icon Font";
        content: "";
    }
    .icon-start:before{
        display: inline-block;
        font-family: "Icon Font";
        content: "";
    }
    .icon-stop:before{
        display: inline-block;
        font-family: "Icon Font";
        content: "";
    }

/*scss*/

    $class-name: col-xs-1 col-xs-2 col-xs-3;
    @each @name in $class-name{
        .#{$name}{
            background: red;
        }
    }

    $borders: "solid 2px" "solid 3px";
    @each @border in $borders{
        .h2{
            border: #{$border};
        }
    }

/*css*/
    .col-xs-1{
        background: red;
    }
    .col-xs-2{
        background: red;
    }
    .col-xs-3{
        background: red;
    }
    .h2{
        border: solid 2px;
    }
    .h2{
        border: solid 3px;
    }

5. FOR

Sassでは、@forルールを使用して、似ているが値が異なるCSSスタイルを作成するためのループを作成できる。@forルールは数の範囲を繰り返し、その範囲内の各数に対してコードブロックを実行する。

@forルールの構文は、@for <variable> from <start expression> to <end expression> { ... }または @for <variable> from <start expression> through <end expression> { ... }のように書くことができる。最初の式はループの開始値を、2つ目の式はループの終了値を表す。中括弧内のコードブロックは指定された範囲内の各値に対して実行される。ループの現在の値は指定された変数に割り当てられる。

/*scss*/

    $base-color: #036;
    @for $i from 1 through 3{
        ul:nth-child(3n + #{$i}){
            background-color: lighten($base-color, $i * 5%);
        }
    }

/*css*/
    ul:nth-child(3n + 1){
        background-color: #004080;
    }
    ul:nth-child(3n + 2){
        background-color: #004d99;
    }
    ul:nth-child(3n + 3){
        background-color: #0059b3;
    }

6. WHILE

SASSでは、@whileルールも使用してループを作成することができる。@whileルールは@while <variable> { ... }と書かれ、式がtrueを返す場合にコードブロックが実行される。その後、式がまだtrueを返す場合、コードブロックは再び実行される。このプロセスは最終的な式がfalseを返すまで続く。

@whileルールを使用すると、特定の反復回数が事前にわからないループを作成できる。このルールは、特定の条件がもう成り立たなくなるまでコードブロックを繰り返し実行する際に非常に便利。

ただし、伝えたように、SASSでは、CSSが多くのループを必要としないため@whileループの使用は一般的でない。CSSでは、ループの使用よりも、セレクタの管理と最適化に焦点を当てることが一般的。

/*scss*/
    /* Divides `$value` by `$ratio` until it's below `$base`.*/
    @function scale-below($value, $base, $ratio: 1.618){
        @while $value > $base {
            $value: $value / $ratio;
        }
        @return $value;
    }

    $normal-font-size: 16px;
    sup{
        font-size: scale-below(20px, 16px);
    }

/*css*/
    sup{
        font-size: s12.36094px;
    }

前処理（Preprocessing）

flag --watchを使用して、個々のファイルまたはディレクトリを監視することもできる。 SASSのWatch flagは、ソースファイルを監視し、SASSファイルを保存するたびに変更を検出し、CSSを再コンパイルする。手動でコンパイルするのではなく、input.scssファイルを監視したい場合は、次のようにコマンドにWatch flagを追加するだけで良い。

ass --watch input.scss output.css

「:」を使用してディレクトリのパスを入力と出力に指定し、それらを監視とエクスポートすることができる。例：

sass --watch app/sass:public/stylesheets

SASSは、app/sassフォルダー内のすべてのファイルの変更を監視し、CSSをpublic/stylesheetsフォルダーにコンパイルする。

画像1: [scss]を含むディレクトリ、通常は [asset]

画像2: パスバーに書き込んでcmdウィンドウを開く

画像3: SCSSからCSSにコンパイルしたいコマンドとパスを書く

sass --watch scss:css

高度SCSS（Advanced SCSS）​

1. ミックスイン（Mixin）とインクルード（Include）​

2. 関数（Function）​

3. IF AND ELSE​

If​

Else​

Else if​

4. EACH​

5. FOR​

6. WHILE​

前処理（Preprocessing）​