SASS入門

SASS is 何？

Syntactically Awesome StyleSheetの略称である。
Syntactically Awesome StyleSheet = 「文法的に すごい スタイルシート」

メリット

• セレクタやプロパティのネストで記述量が減る
• 一度定義したスタイルのセットを簡単に呼び出せる
• 変数で数値を使いまわすことができる
• 四則演算ができる
• 関数が使える
• スタイルの継承ができる

デメリット

• コンパイルが必要なためすぐには反映できない
  → おすすめコンパイラツール　https://www.sassmeister.com/

SASSの記法には「SASS記法」と「SCSS記法」の二つがあり、ファイルの拡張子も「.css」とは異なる

ネスト

// ネスト構造での記述
.box {
    width: 200px;
    height: 200px;
    background-color: aquamarine;
    p {
        font-size: 8px;
        margin: 10px;
        // hover時に何かさせたいとき
        a {
            text-decoration: none;
            // 入れ子の構造の中で&が使われたとき、その親要素のセレクタを指す。
            &:hover {
                font-weight: bold;
            }
        }
    }
}

特定の要素の参照

例えば２番目の<li></li>のみ色を変更したい場合

li {
    font-size: 14px;
    &.second {
        color: red;
    }
}

変数

変数とは値を入れておく箱のようなもので、同じ値を繰り返し使いたい時などに有効である

• 定義方法は「 $変数：データにつけるラベル;」である
• 変数にはスコープという有効範囲が存在し、定義後のみ利用が可能である

// Sassで扱えるデータ型（数値、文字列、真偽、色、リスト）
$baseFontSize: 12px;
.box {
    p {
        font-size: $baseFontSize;
    }
}

文字列

• #{}は変数を評価する
• 文字列内に埋め込むには#{}を使おう。

$imgDir: "../img/";
.box {
    background: url("#{$imgDir}test.jpg");
}

カラー

$brandColor: rgba(255,0,0,0.9);
.box {
    p {
        color: $brandColor;
        // Sassには標準で用意されている関数がある
        // ここではlightenを使って明るさを変更する
        color: lighten($brandColor, 30%);
    }
}

四則演算

$baseFontSize: 12px;
.box {
    p {
        font-size: $baseFontSize - 2;
    }
}

条件分岐

@if @else

• 比較演算子
  「==」 「!=」 「<」「>」 「<=」 「>=」

$debugMode: true;
.box {
    @if $debugMode == true {
        color: red;
    } @else {
        color: green;
    }
}

繰り返し処理

• for文

@for $i from 10 through 14 {
    .fs#{$i} {font-size: 10px;
              font-weight: bold;}
}

• while文

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

リスト操作

$animals: cat, dog, tiger;
@each $animal in $animals {
    .#{$animal}-icon {background: url("#{$animal}.png");}
}

mixin

いくつかのコードを１つにまとめて、複数箇所で簡単に呼び出すことができる機能
以下のように定義をする

@mixin mixin名 { コード }

@mixin card {
    width: 300px;
    padding: 40px;
}

呼び出しをするときは以下のようにして呼び出す

@include mixin名

mixinでは引数を渡すことができる

// 定義
@mixin font-data($color) {
    font-size: 14px;
    color: $color;
}
// 呼び出し
.card {
    @inclde font-data(#ff0000) {
}

関数

関数とはある特定の処理をする一連のコード群のことを指し、Sassにおいても関数がサポートされている
Sassでは標準で用意されている関数がある

「Sass built-in function」等で検索すると情報がヒットする

• 色を暗くする

color: darken(色, 50%);

• 色を明るくする

color: lighten(色, 50%);

• 色の不透明度を指定する

color: rgba(色, 0.5);

ユーザー定義関数

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

外部ファイル読み込み

外部のscssファイルを読み込む際には以下のようにする

• 読み込み元のファイルは「_ファイル名.scss」とする
• 「_」と拡張子は省略することができる

@import “_colors.scss”;
@import “colors”;

変数をまとめたファイルを外部ファイルに定義して、それをimportするというのが一般的な使い方である。
グローバル変数は「_gloabals.scss」、ファンクションは「_functions.scss」というようにファイルを分けると管理しやすい。