Progateで学んだSassのまとめ

前回はjQueryを勉強したのですが、今回はCSSの上位互換ともいえるSassです。CSSの記述が簡単になるということで、ちょっと勉強してみました。

Sassとは、CSSを拡張して扱いやすくしたもので、書きやすく、見やすいと使い勝手がいいようです。Sassはそのままでは利用できないので、CSSに変換するためにコンパイルが必要になります。

わたしの場合は、VScodeを利用しているので、VScodeの拡張機能を入れることで簡単にSassを利用することができました。

VScodeでSassを利用するためにやったことメモ

VScodeでSassを利用するための拡張機能はいくつかあるようですが、今回は「DartJS Sass Compiler」を導入してみました。Sass公式がDart Sass（ダートサス）を推奨して、VScodeの「DartJS Sass Compiler」はインストールして有効にするだけで、Sassファイル（拡張子SCSS）の保存時に自動でコンパイルされCSSファイルを生成してくれます。

ProgateのSassで学習したことまとめ

Progateで学べるSassは「Scss記法」で、ファイル拡張子は「.scss」
Scss記法の他に「SASS記法」というのがあるようです。

入れ子構造
＆記号
変数
mixin
関数

入れ子構造

入れ子構造で組めるのでCSSを記述するよりも書く量が少なくできます。

.header {
    width: 100%;
    ul{
        padding: 10px;
    }
}

＆記号

hover や active を指定するときに & を利用することで入れ子にできます。

li {
    font-size: 15px;
    &:hover {
        background-color: red;
    }
}

特定要素の指定の場合も & を利用する

<ul>
  <li>1</li>
  <li class="second">2</li>
  <li>3</li>
</ul>

li {
    font-size: 14px;
    &.second {
        color: red;
    }
}

変数が利用できる

変数が利用できます。

$mono-color: #333;

p {
  color: $mono-color;
}

※変数は利用できる範囲をしてすることもでき、スコープ外だと変数を読み込むことができません。なので、基本として入れ子構造の一番外で定義するようにします。

mixin

いくつかのコードを1つにまとめて、複数箇所で簡単に呼び出すことができる機能。

@mixin section-card {
  width: 300px;
  padding: 40px;
}

.section_a
@include section-card;

.section_b
@include section-card;

mixinには引数を設定することができる

@mixin font-date($color) {
  font-size: 14px;
  color: $color;
}
.card {
  @include font-date(#ff0000);
}

関数

color: darken(色,50%);
//色を暗くする関数
color: lighten(色,50%);
//色を明るくする関数
color: rgba(色,0.5);
//色の府透明度を指定する関数

雑感

まだCSS事態もそれほどよくわかっていないので、もう少し勉強が必要ですが、Sass自体はそれほど覚えないといけないことは多くなさそうですね。

monoのメモ帳

HTMLとCSSを勉強しながらはてなブログをカスタマイズ中です。