Zenn
🐝

【入門】Sassの基礎

2021/04/26に公開
CSS
Sass
tech

Sass(Syntactically Awesome Style Sheets)

  • CSSを拡張した言語で、効率よくCSSを作成できる。
  • 「.scss」、または「.sass」という拡張子のファイルに記述する。(.scssが主流らしい)
  • 「.scss」、または「.sass」をコンパイルすることで、cssファイルが作成される。

以下に基本的な使用例を記載する。(作成されたcssファイルは記載しない)

コメント

  • コメントは以下で記述する。
    • １行コメント
      • //
      • CSSでは1行コメントは使用できないため、コンパイルすると1行コメントは削除される。
    • 複数行コメント
      • /* ... */
      • 拡張機能でコンパイルのフォーマットを「compressed」に設定すると複数行コメントは削除される。
      • 「compressed」の場合でもコメントが削除されないようにするには、/*! ... */で記述する。
style.scss
.container {
    // Color is red.
    color: red;

    /* margin is zero.
       padding is zero. */
    margin: 0;
    padding: 0;

    /*! font-size is 10px. */
    font-size: 10px;
}
  • コメントに日本語を含める場合、ファイルの先頭に@charsetでutf-8を指定する。
style.scss
@charset "utf-8"
.container {
    // 赤色にする。
    color: red;
}

ネスト

  • 入れ子でスタイルを記述することができる。
style.scss
.container {
    h1 {
        color: red;
    }
    p {
        color: blue;
    }
}
  • ハイフンがあるプロパティもネストすることができる。(個人的には使わない)
style.scss
.container h1 {
    margin {
        top: 10px;
        bottom: 20px;
    }
}

.container p {
    margin {
        left: 30px;
        right: 40px;
    }
}
  • メディアクエリもネストすることができる。
  • 以下では、画面幅は800px以下の場合は、h1の文字サイズが12pxとなる。
style.scss
.container {
    h1 {
        font-size: 24px;

        @media screen and (max-width: 800px) {
            font-size: 12px;
        }
    }
}
  • 親のセレクタの参照
    • &で親のセレクタに参照できる。
style.scss
@charset "utf-8"
.container {
    a {
        color: red;

        // コンパイル時に「a:hover」と解釈される。
        &:hover {
            // 下線を消す。
            text-decoration: none;
        }
    }
}

変数

  • 変数というデータを格納する箱を用意し、必要に応じて格納したデータを使用することができる。
  • 変数名の先頭は$で始め、:で区切って値を記述する。
  • 変数名は英数字以外に、_や-が使用できる。
    • 変数名に使用した_や-は互換性があるため、$default-colorは$default_colorでも参照できる。
    • 変数名はどちらかに統一しておくべきでしょう。
  • 変数名に日本語も使用できるが、@charset “utf-8”;を先頭に記述する必要がある。(個人的にはオススメしない)
style.scss
@charset "utf-8"
$default-color: blue;
$warning_color: yellow;
$赤: red

body {  
    color: $default-color;  
    
    h1 {
        color: $warning_color;
    }

    div.error {
        color: $赤;
    }
}

変数のスコープ(有効範囲)

  • 変数には有効範囲があり、変数を記述する場所によって変わる。
    • トップレベルで定義されたグローバル変数
      • ファイルの中でどこでも有効である。
    • 波括弧の中で定義されたローカル変数
      • 定義された{}の中で有効である。
      • !global フラグを付与するとその限りではない。
style.scss
$default-color: blue;

body {  
    color: $default-color;  
}

container {
    $warning_color: yellow;

    h1 {
        color: $warning_color
    }
}

footer {
    // invalid ref.(error)
    color: $warning_color;
}
  • !global フラグ
    • {}で定義した変数もグローバル変数と同じスコープとなる。
style.scss
container {
    h1 {
        $warning_color: yellow !global;
        color: $warning_color;
    }
}

footer {
    color: $warning_color;
}

演算

  • 数値の操作として以下を行うことができる。
    • 足し算：+
    • 引き算：-
    • 掛け算：*
    • 割り算：/
    • 剰余：%
style.scss
$main-width: 600px;
$border-width: 2px;
container {
    $padding: 10px;
    width: main_width - ($border_width * 2) - ($padding * 2);
}

データ型

  • Sassにはデータ型が7種類ある。
    • Number：数値
      • 整数、単位、浮動小数点など数が値になるもの。(px,emなどの単位も含まれる)
    • String：文字列
      • ""や''で囲まれたもの。
    • Color：色（カラーコード）
      • カラーネームやHEX , rgb() , rgba()など。
    • Boolean：真偽値
      • true, false
    • Null：空の値
      • Nullの場合、プロパティを書き出さないよう仕組みとなっている。
    • List：リスト（配列）
      • 値をカンマやスペース、カッコで区切ったものです。入れ子にすることで多次元配列も作成可能。
        • $num :1, 2, 3;
    • Map：マップ（連想配列）
      • キーとバリューでペアとなった構造である。
        • $color: (color1: red, color2: blue, color3: green);
  • データ型はtype-of()で確認することができる。

ミックスイン

  • ミックスインを使うことで スタイルの再利用が可能になる。
    • プロパティやセレクタをまとめてワンセットにしておいて、それらを読み込むことができる。
    • @mixinを用いて定義し、@includeで定義したミックスインを呼び出す。
    • ミックスインもスコープを持つ。
    • ミックスインは引数を指定することも可能である。
style.scss
@mixin align-center($margin: 0px) {
    display: block;
    margin: $margin auto;
}

img {
    // default parameter: margin: 0px
    @include align-center;
}

.img2 {
    // margin: 10px
    @include align-center(10px);
}
  • ミックスインのスコープ
    • ミックインにもスコープがあり、変数と同じ考え方となる。
style.scss
.btn {
    @mixin kadomaru {
        border-radius: 5px;
    }
    .kadomaru-btn {
        @include kadomaru;
    }
}
 
.submit-btn {
    // invalid include.(error)
    @include kadomaru;
}
  • ミックスインにコンテンツを渡す
    • contentでルールセットやスタイルなどのコンテンツをミックスインに渡すことができる。
style.scss
@mixin mq($width: 680px) {
    @media only screen and (max-width: $width) {
        @content;
    }
}

img {
    @include mq(340px) {
        margin: 0;
    }
}

セレクタの継承

  • @extendでセレクタ(定義したスタイル)を継承することができる。
  • プレースホルダーセレクタ %を用いることで、継承元のセレクタをCSSファイルに生成させないようにできる。
style.scss
%custom-btn {
    padding: 5px 10px;
    border-radius: 5px;
    color: #333;
    text-decoration: none;
}

.default-btn {
    @extend %custom-btn;
    background-color: #ccc

}

.custom-btn-alert {
    @extend %custom-btn;
    background-color: #fcc;
}
  • @media内での継承方法
    • @mediaの中でセレクタを継承するためには、@mediaの中で継承元のセレクタを定義する必要がある。
style.scss
%font-size-normal {
    font-size: 24px
}
 
@media screen and (min-width:960px) {
    h1 {
        // error.
        @extend %font-size-normal
    }
}

@media screen and (min-width:960px) {
    %font-size-big {
        font-size: 48px
    }

    h1 {
        @extend %font-size-big
    }
}

補完(インターポレーション)

  • 補完を行うための構文として#{}がある。
  • 変数に入った文字列は値として認識されてエラーが出てしまう。
    • プロパティの値にしか使用できないが、#{}と組み合わせることでセレクタやプロパティ名に使用可能。
style.scss
$class-name: btn;

// container.btn
container.#{$class-name} {
    color: red;
}

$attr: margin;

p {
  // margin-top
  #{$attr}-top: 10px;
}

$img-base-path: "./sample/images/";
  
.sample-image {
    background: url(#{$img-base-path}main.png) no-repeat;
}

関数

  • あらかじめ用意された関数がある。
    • 以下に例を挙げる。(これ以外もある)
関数名 意味 使用例
ceil($number) 小数点以下を切り上げする ceil(3.5px) -> 3px
floor($number) 小数点以下を切り捨てする floor(3.5px) -> 4px
round($number) 小数点以下を四捨五入する round(3.5px) -> 4px
abs($number) 絶対値を返す abs(-1px) -> 1px
min($number) 最小の数値を返す min(5px, 10px, 8px) -> 5px
max($number) 最大の数値を返す max(1px, 20px, 55px) -> 55px

用意されている関数はまだまだあるので以下のサイトを参考にしてください。

style.scss
$width: 100px;
$minus-num: -100px
 
h1 {
    width: $width / 3;
}
 
h2 {
    width: ceil($width / 3);
}
 
h3 {
    width: floor($width / 3);
}
 
h4 {
    width: round($width / 3);
}

h5 {
  width: abs($minus-num);
}

h6 {
    width: min(100px, 200px, 300px);
}

h7 {
    width: max(100px, 200px, 300px);
}
  • 関数は自作することも可能である。
    • @functionで関数の宣言を行い、@returnで返す値を記述する。
style.scss
@function half($value) {
    @return round($value / 2);
}

$pi: 3.14;
@function clac-area-of-circle($radius) {
    @return round(radius * radius * pi)
}

.container {
    width: half(1080px);
}

他ファイル読み込み

  • CSSと同様@importで他のscssファイルを読み込むことができる。
    • 読み込むファイルが多いと、ファイル読み込みに時間がかかり、効率がよくない。
  • partialという分割したscssファイルを1つのscssファイルとしてまとめる機能がより効率的である。
    • ファイル名の先頭に_を付けることで、コンパイルしてもCSSファイルを生成しない。
style.scss
// 通常のインポート
@import url("base.css");
@import url(base.css);
@import "base.css";

// パーシャルインポート
@import "_base1.scss";
@import "_base2";

// カンマ区切りで、まとめて読み込む
@import "_base1", "_base2";

// 異なるディレクトリの読み込み
@import "scss/base/_base";  
@import "scss/base/sub/_sub-base";
  • パーシャルインポートのディレクトリ構成
    • 個人によって好みがあるが、以下のような構成がオススメである。
projectフォルダ
  |css/
  |   |- style.css（生成されるCSSファイル）
  |   
  |sass/
      |- _reset.scss（リセット用のscssファイル）
      |- _extend.scss（@extendの定義）
      |- _mixin.scss（@mixinの定義）
      |- _settings.scss（変数などの設定の定義）
      |- style.scss（メインのスタイル）

開発者向けの標準出力

  • @debugでコンソール出力
  • @warnでコンソールに警告出力
  • @errorでコンソールエラー出力
style.scss
@debug 100px + 20px * 4;
// コマンドプロンプト
// style.scss:1 DEBUG: 180px
  • warn, errorも同様に記述する。

Discussion