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

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

プログラミング学習31日目⏩

Web制作コース中級編DAY7💻

学習時間:3時間34分⏳

学習内容:Sassの学習✏

学び📚
１　入れ子形式で書けた
２　変数が使えた
３　"&"記号で擬似要素が書けた
４　「@mixin」でコードの繰り返し記述を防げた#デイトラ #プログラミング初心者 #プログラミング学習 pic.twitter.com/Fb9So79iYn
— ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) April 13, 2021

　【学び】

1　【Saasとは】

CSSの拡張言語のこと

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

２　【入れ子】

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

＜入れ子の書き方＞

＜入れ子で孫要素まで書ける＞

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

３　【疑似要素とクラス】

＜＆で繋げる疑似要素・クラスの書き方＞

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

左：Sass　　　　　　　　　　　　　　　　　　　　　　　　　右CSS

４　【変数】

＜変数をCSSに組み込む＞

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

画像の例だと、

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

左：Sass　　　　　　　　　　　　　　　　　　　　　　　　　右CSS

＜変数定義のメリット＞

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

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

＜四則演算もできる＞

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

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

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

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

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

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

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

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

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

style.css

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

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

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

style.css

.header {
  height: 100px; /*ＰＣ用の表示*/

@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) { /*１　mixinを「mq」を名付ける　２　ここの「ｓｐ」の部分は、breakpointsで定義した、変数名を入れる*/
/*map-get(マップ型変数, キー)で値を取得*/
  @media #{map-get($breakpoints, $breakpoint)} {　/*２で入力された変数名を元に値が呼び出される*/

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

    @content;
  }
}

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

style.css

.header {
  height: 100px; /*ＰＣ用の表示*/

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

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

style.css


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

$link-font-size： 16px;　/*$link-font-sizeという変数に、１６ｐｘと定義*/

.active {

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


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

Sassについて

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

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

【学び】

　【学び】