見出し画像

デイトラ Web制作コース 初級編 DAY23-24 CSSの上位互換「Sass」

MIO

ご覧いただき、ありがとうございます！

今回はCSSをより簡単にするために生まれたSassについて学びました。
※ボリュームが普段の2倍くらいあります。


Sassとは

SassはCSSの拡張言語で、CSSを簡単かつ早く書けるようにしてくれる言語です。

「Syntactically Awesome Style Sheets」略して「Sass」なんですが、デイトラが「構造的にイカしたスタイルシート」と訳してて笑いました。

Sassには2種類あるらしく、「Sass」と「Scss」です。

  • Sass：CSSの拡張言語。中括弧やセミコロンを省略できる

  • Scss：Sassの新しい構文。CSSと書き方はほぼ同じ

Sassでできること

入れ子

入れ子とは、HTMLのように親子関係を階層的に表現する方法です。

<section class = "menu">
  <div class = "menu-inner">
    <h1 class = "menu-ttl">タイトル< /h1>
  < /div>
< /section>

上記のように”menuクラス”の中に、”menu-innerクラス”を作って、さらにその下に…と階層的に書くのがHTMLです。

一方で、CSSは一つのセレクタの中にセレクタを入れ込んで…という書き方はしません。

.menu {
  /* 処理 */
}

.menu-inner {
  /* 処理 */
}

.menu-ttl {
  /* 処理 */
}

Sassを使うと、HTMLのように入れ子で書くことができます。

.menu {
  /* 処理 */

  &-inner {　　/* &:-inner ＝ .menu-inner */
    /* 処理 */
  }

  &-ttl {  /* &:-ttl ＝ .menu-ttl */
    /* 処理 */
  }
}

「&」を子孫クラスの前に書くことで、親クラスの名前を省略することでできます。

入れ子状態になっているので、ここからここまでがmenuクラスだなと、見た目も分かりやすくなったように感じます。

変数の定義と呼び出し

Sassでは変数を使うことができます。
色やフォントサイズなどを変数に入れて、再利用が可能です。

$color-black : #fff;

$font-size : 16px;

「color-black」という変数に「#333」のカラーコードを入れ、「font-size」という変数に「16px」という値を格納しました。

こうすることで、保守性が高くなり、カラーコードもいちいち覚える必要がなくなります。

ちなみに変数なので、四則演算も可能です。

font-size : $font-size;  // 結果は16px
font-size : $font-size + 10px;  /* 結果は26px */

ちなみにコメントアウトは「/* */」と「 // 」の両方を使用できます。

クラスの再利用（@extend）

Sassではクラスと処理をまるごと他のクラスにコピーすることが可能です。
aタグにbuttonクラスの処理を当ててみます。

.button {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

a {
  @extend : .button;
}

「@extend」を使うことによって、aタグにbuttonクラスの処理をコピーすることができました。

CSSにすると以下のようになります。

.button {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.button, a {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

何回も同じ処理を書かなくてよくなりました。
便利ですね。

クラスとスタイルの再利用（@mixinと@include）

@extendと似たもので「@mixin」と「@include」というものがあります。

  • @extend：クラスのスタイルを適用できる

  • @mixin：スタイルを定義する

  • @include：@mixinで定義したスタイルをクラスに適用する

@mixin button-styles {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.button {
  @include button-styles;
}

「@mixin」で定義、「@include」で呼び出しです。
buttonクラスの中にbutton-styleの処理を呼び出すことができました。

他の適用方法も見てみます。

@mixin button-styles {
  background-color: transparent;
  border: none;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  cursor: pointer;
}

.button {
  @include button-styles;
}

@mixin click-action {
  &:hover {
    background-color: gray;
  }
  
  &:active {
    transform: translateY(2px);
  }
}

.button-with-action {
  @include button-styles;
  @include click-action;
}

これでbutton-with-actionクラスには「buttonクラスの処理」、「ホバー時のスタイル」、「アクティブ時のスタイル」全てが適用されました。

引数

なんとSassでは引数を使うことができます。（衝撃）

@mixin button($background-color, $text-color) {
  background-color: $background-color;
  color: $text-color;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
}

.button-first {
  @include button(#3498db, #fff);  // 背景色が#3498db、文字の色が#fff
}

.button-second {
  @include button(#e74c3c, #fff);
}

.button-third {
  @include button(#2ecc71, #fff);
}

一行目で@mixin buttonクラスは$background-colorと$text-colorの二つの引数を受け取りました。
それぞれの引数はボタンの背景色と文字の色を定義しています。

ボタンの背景色と文字の色だけ変更した複数のボタンを効率的に作ることができました。

関数（@function）

Sassでは、再利用できる関数も定義することができます。

// 関数addを定義する
@function add($num1, $num2) {
  @return $num1 + $num2;
}

// 関数を使用して値を計算する
$total: add(5, 3); // 結果は 8

// 変数に格納した関数の返り値を出力する
.output {
  font-size: $total + 10px; // 結果は18px
}

「もはやJavaScript」って思ったのは私だけでしょうか。

複雑なコードになると、管理がしやすくなるので力を発揮してくれそうです。

環境設定

SassをVSCodeで使うためには、こちらも少し設定を行う必要があります。

  1. 拡張機能の検索で「Sass」をインストール

  2. 「Sassフォルダ」と「Sass用のファイル」を作成

  3. コンパイル※する

  4. Sassファイルを編集 → CSSに反映される

コンパイル：
プログラムやコードをある言語から別の言語に変換すること

SassはCSSを書きやすくした拡張言語なので、ブラウザで読み込むことはできません。
よってSassをCSSに変換する必要があります。

コンパイルの方法はこちらが写真付きで教えてくれていました。

感想

実はSassは苦手分野なので、いつもより詳しく書きました。

でも実をいうと、私はコーディングの際にSassを使っていません…
慣れれば便利なのはもちろんなのですが、ルールを覚えなければいけないことと、最終的にCSSになること、そこまでの手間を考えるとまだ使用できずにいます。

デイトラの講座では勉強して、コンパイルをして編集もしました。
少なくとも理解はしておきたいと思ったので、今回はとてもいい復習になりました。
（functionの使い方は完全に忘れてた）

Sassは正直好みが分かれるものかなとも思います。
iPhone派とAndroid派みたいな感じですね。

どちらの選択が最適かは分かりません。
それぞれのメリットとデメリットを比較して、ご自身に合った選択をしていただければと思います。

最後までお付き合いいただき、本当にありがとうございました🌸

Xで毎日デイトラの学習記録つけてます！
応援していただけると嬉しいです✨
X : https://twitter.com/totoro_mi8

この記事が気に入ったらサポートをしてみませんか？