Sassについて


デイトラWeb制作コース中級編DAY7の学び

【この記事に書いてあること】

 【学び】

1 【Saasとは】

CSSの拡張言語のこと

<Sassのメリット>
① 入れ子(ネスト)形式で書ける
② 変数が使える
③ ”&”記号で擬似要素が書ける
④ @mixinでコードの繰り返し記述を防げる

2 【入れ子】

Sassは、親クラスのカッコの中に、続けて子要素のCSSを書くことができる

<入れ子の書き方>

<入れ子で孫要素まで書ける>

HTMLの改装に合わせて、入れ子を深くすることができる

3 【疑似要素とクラス】

<&で繋げる疑似要素・クラスの書き方>

&をつけることで、前の要素をすべて継承できる

左:Sass                         右CSS

4 【変数】

<変数をCSSに組み込む>

「$」マーク+名前をつけて、変数を定義する

画像の例だと、

28 $link-color-active: #da1e32;と定義し、値を変数名にする

左:Sass                         右CSS

<変数定義のメリット>

制作途中での仕様変更が一括でできるようになる

定義した、変数の値を変えるだけなので、保守性の高いコードになる

<四則演算もできる>

$link-font-size: 16px;で16pxの値に変数名を定義

② 値に$link-font-sizeを記入し、四則演算する

画像の例だと、16px+10pxで.active が26pxになっている

5 【定義したスタイル使う】

@extend
すでに設定してあるスタイルを、別のクラスに引き継ぐこと
共通で使いたいスタイルを予め設定し、それを@extendすることで、何回も同じコードを書かなくて済む

@mixin
一部だけ仕様を変更したいが、ほとんど同じ型のときは、@mixinを使う
@mixinを反映させたいときは、@includeを使う

6 【mixinを使ったメディアクエリの設定方法】

予め定義したメディアクエリを@mixinで呼び出す

<従来のメディアクエリの書き方>
よくないポイント
・コード量が長い
・クラス名ごとに書かないといけない
・ディアクエリ用にもう一度コードを書き直さないと行けない

style.css
@media screen and (max-width: 767px) {
  .header {
    height: 60px;
  }
}

@mixinを使ったメディアクエリの書き方>

いいポイント
・コード量が減る
・どこのクラスに対するメディアクエリかを視覚的に判断できる
・対象のクラスにそのままメディアクエリを書くことができる

style.css
.header {
  height: 100px; /*PC用の表示*/

@include mq() { /*メディアクエリ用*/
    hight: 60px;
        }
}

<メディアクエリ用のmixinの作り方>

① マップ型変数 breakpointsを定義

style.css
$breakpoints: (
/*キー(変数名) : 値*/
  'sp': 'screen and (max-width: 767px)', /*767px以下(スマホ)用の表示*/
  'pc': 'screen and (min-width: 768px)' /*768px以上(タブレット・PC)用の表示*/
) !default;

② ディアクエリ用のmixinを定義

style.css
@mixin mq($breakpoint: sp) { /*1 mixinを「mq」を名付ける 2 ここの「sp」の部分は、breakpointsで定義した、変数名を入れる*/
/*map-get(マップ型変数, キー)で値を取得*/
  @media #{map-get($breakpoints, $breakpoint)} { /*2で入力された変数名を元に値が呼び出される*/

    /*この中をカスタムできる*/

    @content;
  }
}

③ メディアクエリ用のmixinを呼び出す

style.css
.header {
  height: 100px; /*PC用の表示*/

@include mq ("sp") { /*メディアクエリ用*/
    height: 60px;
}
}

7 【functionについて】
Sassは関数も使える

style.css

@function activeFontSize ($base-size) { /*activeFontSize ()というfunctionを定義して、引数に$base-sizeを定義*/
    @return $base-size + 2px; /*$base-sizeに2pxを足した値を返り値にする*/
}

$link-font-size 16px; /*$link-font-sizeという変数に、16pxと定義*/

.active {

    font-size: activeFontSize ($link-font-size);
}


/* クラス名「.activer」のフォントサイズの値が18pxになる*/