Sassについて
デイトラWeb制作コース中級編DAY7の学び
【この記事に書いてあること】
プログラミング学習31日目⏩
— ふりっく💻トリプルゼロのWeb制作者 (@FuRiC_twi) April 13, 2021
Web制作コース中級編DAY7💻
学習時間:3時間34分⏳
学習内容:Sassの学習✏
学び📚
1 入れ子形式で書けた
2 変数が使えた
3 "&"記号で擬似要素が書けた
4 「@mixin」でコードの繰り返し記述を防げた#デイトラ#プログラミング初心者#プログラミング学習 pic.twitter.com/Fb9So79iYn
【学び】
1 【Saasとは】
CSSの拡張言語のこと
<Sassのメリット>
① 入れ子(ネスト)形式で書ける
② 変数が使える
③ ”&”記号で擬似要素が書ける
④ @mixin
でコードの繰り返し記述を防げる
2 【入れ子】
Sassは、親クラスのカッコの中に、続けて子要素のCSSを書くことができる
<入れ子の書き方>
<入れ子で孫要素まで書ける>
HTMLの改装に合わせて、入れ子を深くすることができる
3 【疑似要素とクラス】
<&で繋げる疑似要素・クラスの書き方>
&
をつけることで、前の要素をすべて継承できる
左:Sass 右CSS
4 【変数】
<変数をCSSに組み込む>
「$」マーク+名前
をつけて、変数を定義する
画像の例だと、
28 $link-color-active: #da1e32;
と定義し、値を変数名にする
<変数定義のメリット>
制作途中での仕様変更が一括でできるようになる
定義した、変数の値を変えるだけなので、保守性の高いコードになる
<四則演算もできる>
①$link-font-size: 16px;
で16pxの値に変数名を定義
② 値に$link-font-size
を記入し、四則演算する
画像の例だと、16px+10pxで.active
が26pxになっている
5 【定義したスタイル使う】
<@extend>
すでに設定してあるスタイルを、別のクラスに引き継ぐこと
共通で使いたいスタイルを予め設定し、それを@extend
することで、何回も同じコードを書かなくて済む
<@mixin>
一部だけ仕様を変更したいが、ほとんど同じ型のときは、@mixin
を使う
@mixin
を反映させたいときは、@include
を使う
6 【mixinを使ったメディアクエリの設定方法】
予め定義したメディアクエリを@mixin
で呼び出す
<従来のメディアクエリの書き方>
よくないポイント
・コード量が長い
・クラス名ごとに書かないといけない
・ディアクエリ用にもう一度コードを書き直さないと行けない
@media screen and (max-width: 767px) {
.header {
height: 60px;
}
}
<@mixinを使ったメディアクエリの書き方>
いいポイント
・コード量が減る
・どこのクラスに対するメディアクエリかを視覚的に判断できる
・対象のクラスにそのままメディアクエリを書くことができる
.header {
height: 100px; /*PC用の表示*/
@include mq() { /*メディアクエリ用*/
hight: 60px;
}
}
<メディアクエリ用のmixinの作り方>
① マップ型変数 breakpointsを定義
$breakpoints: (
/*キー(変数名) : 値*/
'sp': 'screen and (max-width: 767px)', /*767px以下(スマホ)用の表示*/
'pc': 'screen and (min-width: 768px)' /*768px以上(タブレット・PC)用の表示*/
) !default;
② ディアクエリ用のmixinを定義
@mixin mq($breakpoint: sp) { /*1 mixinを「mq」を名付ける 2 ここの「sp」の部分は、breakpointsで定義した、変数名を入れる*/
/*map-get(マップ型変数, キー)で値を取得*/
@media #{map-get($breakpoints, $breakpoint)} { /*2で入力された変数名を元に値が呼び出される*/
/*この中をカスタムできる*/
@content;
}
}
③ メディアクエリ用のmixinを呼び出す
.header {
height: 100px; /*PC用の表示*/
@include mq ("sp") { /*メディアクエリ用*/
height: 60px;
}
}
7 【functionについて】
Sassは関数も使える
@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になる*/
Author And Source
この問題について(Sassについて), 我々は、より多くの情報をここで見つけました https://qiita.com/FuRiC_QT/items/15395694bb116951fb91著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .