📕

SASS入門

3 min read

SASS is 何?

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

メリット

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

デメリット

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;
            }
        }
    }
}

特定の要素の参照

例えば2番目の<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

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

@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」というようにファイルを分けると管理しやすい。

Discussion

ログインするとコメントできます