デイトラ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になる*/
↧