Sass チートシート
[最終更新] (2019/06/03 00:45:40)
最近の投稿
注目の記事

概要

Sass (Syntactically Awesome Stylesheets) のチートシートです。インデントを多用した SASS 記法ではなく、広く普及している SCSS 構文の Sass を対象とします。

継承 (extend)

基本

.class1 {
    background-color: #f00;
}
.class2 {
    @extend .class1;
    color: #fff;
}

継承元を使用しない場合

パーセント記号を用いることで、抽象クラスのような実体のないクラス class1 を定義できます。CSS にコンパイルすると class1 は消失します。

%class1 {
    background-color: #f00;
}
.class2 {
    @extend %class1;
    color: #fff;
}

ファイル分割 (import)

基本

main.scss

@import "sub"; // 拡張子省略が可能
// @import "sub.scss";
// @import url("sub.scss");
// @import url(sub.scss);

sub.scss

.myclass {
    $val: #f00;
    background-color: $val;
}

複数読み込み

@import "sub1.scss", "sub2.scss";

パーシャルファイルの読み込み

アンダースコアから開始されるファイル名の SCSS ファイルを import する際には、アンダースコアを省略できます。

main.scss

@import "sub";

_sub.scss

.myclass {
    $val: #f00;
    background-color: $val;
}

名前空間をもたせて import

他のプロジェクトから CSS を流用してきて import する際に、名前空間用のクラスを用意すると本プロジェクトのスタイル汚染を回避できます。SCSS は CSS との互換性があるため、CSS ファイルのファイル名を SCSS にして import するだけで実現できます。

main.scss

.mynamespace1 {
    @import "project1";
}
.mynamespace2 {
    @import "project2";
}

_project1.scss

プロジェクト 1 での CSS (または SCSS)

_project2.scss

プロジェクト 2 での CSS (または SCSS)

ネスト

基本

#myid {
    background-color: #00f;
    h1 {
        background-color: #f00;
    }
    p, ul {
        background-color: #0f0;
    }
}

隣接セレクタと子セレクタ

#myid {
    background-color: #0f0;
    h1 {
        + p { // 隣接セレクタ (h1 の同階層直後の p 要素にのみ適用)
            background-color: #f00;
        }
    }
    ul {
        > li { // 子セレクタ (ul 直下の li 要素にのみ適用)
           background-color: #f00;
        }
    }
}

ネストしない書き方も可能

#myid {
    background-color: #0f0;
    h1 + p { // 隣接セレクタ (h1 の同階層直後の p 要素にのみ適用)
        background-color: #f00;
    }
    ul > li { // 子セレクタ (ul 直下の li 要素にのみ適用)
        background-color: #f00;
    }
}

ハイフン区切りの CSS スタイル属性をネスト

.myclass {
    border: 2px dotted #f00 {
        top: {
            color: #0f0;
        }
        bottom: {
            color: #00f;
        }
    }
}

条件に合致した場合にのみスタイルを適用

後述の @if を使用せずに条件分岐が記述できます。

親要素をスタイル判定条件に利用

body タグに somepage クラスが付与されているページでのみ有効化

.html

<body>
  <div id="myid">
  ...
  </div>
</body>

.scss

#myid {
    background-color: #f00;
    body.somepage & {
        color: #fff;
    }
}

自分に付与されているクラスやマウスオーバーを判定条件に利用

myclass が付与された div でのみ有効になるスタイルを記述

div {
    background-color: #f00;
    &.myclass {
        color: #fff;
    }
}

hover 中の div でのみ有効になるスタイルを記述

div {
    background-color: #f00;
    &:hover {
        color: #fff;
    }
}

@media クエリをスタイル判定条件に利用

#myid {
    background-color: #f00;
    @media print {
        color: #fff;
    }
}

変数

基本

$myvar: #f00;

.myclass {
    background-color: $myvar;
}

ローカルな変数

.myclass {
    $myvar: #f00;
    background-color: $myvar;
}

シャープで変数を参照

文法上のあいまいさが発生する箇所で変数を参照するためにはシャープを利用します。以下の例ではシングルクォーテーションで変数の値を囲んでいることもポイントです。

$myvar: '.myclass';

#{$myvar} {
    background-color: #f00;
}

パス情報を変数に格納

$MY_PATH: '../img';

.myclass {
    background: url(#{$MY_PATH}/icn.png);
}

四則演算

幅や高さ

$myvar: 20px;

.myclass {
    width: ($myvar * 5) + 100;
    background-color: #f00;
}

RGB

.myclass {
    background-color: #000 + #000000 + red + rgb(0, 255, 0); // 黄色
    color: #000 + 255; // RGB すべてに 255 加算 → 白色
}

Mixin

複数引数かつ初期値のあるミックスイン

@mixin myMixin($arg1: 10px 10px, $arg2: #f00) {
    margin: $arg1;
    background-color: $arg2;
}

.myclass1 {
    @include myMixin;
}

.myclass2 {
    @include myMixin(20px 20px, #0f0);
}

$args: 20px 20px, #0f0;
.myclass3 { // カンマ区切り変数を利用する場合は '...' が必要
    @include myMixin($args...);
}

グローバルではないミックスイン

.mynamespace {
    @mixin myMixin {
        background-color: #f00;
    }
    .myclass1 {
        @include myMixin;
    }
}

ブロックで動的に内容が変化するミックスイン

@mixin myMixin {
    background-color: #f00;
    @content;
}

.myclass1 {
    @include myMixin {
        color: #fff;
    }
}

条件分岐 (if-else)

true/false

$myvar: true;

@if $myvar and true {
    .myclass1 {
        background-color: #f00;
    }
}

ミックスインとの併用

@mixin myMixin($arg) {
    @if $arg == 0 {
        background-color: #f00;
    }
    @else if $arg == 1 {
        background-color: #0f0;
    }
    @else {
        background-color: #00f;
    }
}

.myclass1 {
    @include myMixin(0);
}
.myclass2 {
    @include myMixin(1);
}
.myclass3 {
    @include myMixin(2);
}

繰り返し処理

この続きが気になる方は

Sass チートシート

残り文字数は全体の約 26 %
tybot
100 円
* プログラミング情報の有料公開およびご購入について
* ご購入済みの方はこちらからログイン
関連ページ