Sass(SCSS)チートシート - ROXX開発者ブログ

自己紹介

株式会社SCOUTERの石岡(id:masaakikunsan)です。

フロントエンドエンジニアをやらせていただいており、
冴えない彼女の育てかたと氷菓というアニメを主食に生きております。

プログラミングを始めてまだ一年も経っていないひよっこなので僕のブログでは初心者にフォーカスして初心者がつまづきそうとか欲しいであろうことをブログにしていこうと思っています。

はじめに

みなさんなんだかんだSass(SCSS)の構文って忘れがちじゃないですか？

ちなみに僕はいつまで経っても覚えません。

今回のブログではSCSS構文について書かせていただきます。

概要

SassとはCSSを書くためのメタ言語になります。まぁつまりCSSを効率よく書くためのものですね。

Sassには二つの構文があり、ファイルの拡張子が.sassのものと.scssのものになります。

昔はインデント構文で書かれたSassのみだったのですが今はCSSっぽく書けるSCSSができSCSSが現在よく使われています。

導入

Sassを動かすにはRubyが必要なので前提条件としてRubyはいれといてください。

# インストール
$ gem install sass

# もしpermissionsがどうのこう言われてインストールできなかったら
$ sudo gem install sass

これでSassがインストールできたかと思います

最後にバージョンを確認してみましょう

$ sass -v

コマンド

$ sass [option] [input.scss]:[output.css]

optionはめんどいので記載しない

ネスト

・セレクタを入れ子構造でかけるから便利！

// CSSの場合
div {
    background: #000;
}
div p {
    color: #fff;
}

// SCSSの場合
div {
    background: #000;

    p {
        color: #fff;
    }
}

・隣接セレクタの場合

// HTMLの場合
<label><input type="radio">test</label>

// CSSの場合
input {
    display: none;
}
span {
    position:relative;
}
span::before {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 14px;
    height: 14px;
    border: 1px solid #999;
    border-radius: 50%;
    content: "";
}
input:checked + span::after {
    content: "";
    display: block;
    position: absolute;
    top: 3px;
    left: 3px;
    width: 10px;
    height: 10px;
    background: #6ac5b6;
    border-radius: 50%;
}

// SCSSの場合
input {
    display: none;
    
    span {
        position:relative;

        // &はその親要素のセレクタを表す、この場合span
        &::before {
            display: block;
            position: absolute;
            top: 0;
            left: 0;
            width: 14px;
            height: 14px;
            border: 1px solid #999;
            border-radius: 50%;
            content: "";
        }
    }
    &:checked + span::after {
        content: "";
        display: block;
        position: absolute;
        top: 3px;
        left: 3px;
        width: 10px;
        height: 10px;
        background: #6ac5b6;
        border-radius: 50%;
    }
}

変数

よく使う値を変数にしたりプロパティ名やセレクタ名とかにも使える。

$color-base: #ddd;
$class: container;
// SCSS
p { color: $color-base }
.#{$class} { background: $color-base; }
            
// CSS
p { color: #ddd }
.container { background: #ddd; }

ミックスイン

よく使うものをスニペットとして保存しておけるのでとても便利。

// よく使うものの頭に@mixinをつけて保存し使いたい所の頭に@includeをつけるだけ
@mixin box-shadow ($x $y $gradation $color) {
    box-shadow: $x $y $gradation $color;
}
        
div {
    @include box-shadow(1px 1px 5px #000;);
}
        
// CSS
div {
    box-shadow: 1px 1px 5px #000;
}

継承

styleが一緒だけどここではfont-sizeを変えたいというときに便利。

p {
    font-size: 16px;
    margin: 0;
    color: #ddd;
}
            
.required {
    @extend p;
    font-size: 12px;
    color: #FF0000;
}
            
// CSS
p, .required {
　　font-size: 16px;
    margin: 0;
    color: #ddd;
}
            
.required {
    font-size: 12px;
    color: #FF0000;
}