Sassの勉強に入った！

本日からはsassの勉強。講座ではsassmeisterを使うのですが、私が海外アクセスだからか？アクセスできず。 なのでVS codeとLive Sass Compilerで実際に書いて練習することに。

Sassの書き方

• HTMLにはsassファイルではなく、cssファイルを読み込ませる。

• sassは親要素の中に、子要素を入れ込んでcssを書くことができる。

• 直前の要素を&で引っ張ってくることができる。

• $マークで変数を宣言できる。

• 変数は四則演算も可能。

• extensを当てると、共通で使いたいcssを当てることができる。

• mixinを使うと、同じコードを使いまわしたい時に便利。

• functionも入れることができる。

$link-color-active: #da1e32;
$link-color-base: #333;
$link-font-size:16px;

@mixin button( $font-size ) {
    color: #333;
    font-size: $font-size;
    display: inline-block;
    margin-top: 20px;
    padding: 8px 16px;
    border: 1px solid #333;
    text-decoration: none;
  }

.lists{
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;

    li{
        width: 25%;
        text-align: center;

        a{
            @include button(14px);

            &:hover{
                color: $link-color-active;
            }

            &.active{
                font-size: $link-font-size + 10px;
                color: $link-color-active;
            }
        }
    }

}

mixinの使い方

@mixin button( $font-size ) {
    color: #333;
    font-size: $font-size;
    display: inline-block;
    margin-top: 20px;
    padding: 8px 16px;
    border: 1px solid #333;
    text-decoration: none;
  }

 a{
            @include button(14px);
}

mixinで指定した{}内のコードは、@includeで呼び出すことができる。 また、()内に変数を当てることで、include側の()内の数値を入力することができる。mediaクエリに使用することが多い。

//マップ型変数breakpointsを定義
$breakpoints: (
//キー　　値
  'sp': 'screen and (max-width: 767px)', //767px以下（スマホ）用の表示
  'pc': 'screen and (min-width: 768px)' //768px以上（タブレット・PC）用の表示
) !default;

//メディアクエリ用のmixinを定義。デフォ値はsp
@mixin mq($breakpoint: sp) {
//map-get(マップ型変数, キー)で値を取得
  @media #{map-get($breakpoints, $breakpoint)} {
    //この中をカスタムできる
    @content;
  }
}

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

  @include mq(sp) {
    height: 60px; //スマホの時だけ高さを60pxに！
  }
}

/*このように @media screen and (width: 767px) { } を書かなくても、
PC用のcssを書きながらスマホ用の表示を書き足すことができます！ */

functionの使い方

$link-font-size:14px;

@function activeFontSize($base-size){
    @return $base-size + 2px;
}

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

actionFontSizeというfunctionを作成し、入れ込むことができる。 上記の場合、linkクラスのフォントサイズは16pxになる。