デイトラ初級21～23日　　Sassを学習しよう

こんにちは、Hikaruです。

現在デイトラで月５万円稼ぐために勉強中です。

デイトラ初級編ではSass（scss）の講座に入りました。

CSSは平面にベターっと並ぶことが一般的であり、数千、数万行になると、どこに何が書かれているのか把握することが非常に困難で、保守性や可読性が低下しやすくなります。後から修正しようと思ったときには、必ず修正漏れが生じ、予測不可能な動作が発生する可能性が高まります。

Sass（SCSS）を使用することで、このような問題に対処できます。以下は、Sassが提供する特長によってCSSの管理性が向上する点です。

入れ子構造にできる

Sassでは、セレクタを入れ子に記述することができます。これにより、親子関係や階層構造が直感的に表現できます。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
    
    li {
      display: inline-block;
      
      a {
        text-decoration: none;
      }
    }
  }
}

＆でつなげることができる

.button {
  background-color: #3498db;
  color: #ffffff;
  
  &:hover {
    background-color: darken(#3498db, 10%);
  }
}

疑似要素も＆でつなげることができる

.button {
  background-color: #3498db;
  color: #ffffff;
  
  &:hover {
    background-color: darken(#3498db, 10%);
  }
}

変数を定義して使える

変数を使ってカラーコード、文字サイズ、フォントファミリーなどを一元管理することは、後からの修正を簡単にし、保守性を向上させます。以下は、変数を活用したスタイルの一元管理の具体的な例です。

変数の宣言:

１．Sassでは、変数を$を使って宣言します。

$primary-colorという変数にカラーコード#3498dbを格納しています。

$primary-color: #3498db;

２．

変数の使用:

宣言した変数は、後で他のプロパティやセレクタで使用できます。

$primary-color変数の値がbody要素の背景色に使用されています。

body {
  background-color: $primary-color;
}

３．

変数の再代入:

変数の値は後で再代入できます。これは、デザインの変更やテーマの変更に便利です。

$primary-color: #3498db;

body {
  background-color: $primary-color;
}

// 別のセクションで変数を再代入
$primary-color: #e74c3c;

header {
  background-color: $primary-color;
}

定義したスタイルが使いまわせる mixin

SassのMixinは、再利用可能なスタイルのセットを定義するための機能です。Mixinを使うことで、同じスタイルを複数の場所で使い回すことができ、コードの冗長性を減少させます。以下は、SassのMixinの基本的な使い方です。

Mixinの定義:

１．Mixinは@mixinキーワードを使って定義されます。

@mixin border-radius($radius) {
  -webkit-border-radius: $radius;
  -moz-border-radius: $radius;
  -ms-border-radius: $radius;
  border-radius: $radius;
}

上記の例では、border-radiusというMixinが定義されています。このMixinは引数 $radius を受け取り、それに基づいてベンダープレフィックスつきの border-radius を生成します。

２．Mixinの適用:

Mixinを使うには、@includeディレクティブを使います。

button {
  @include border-radius(5px);
  background-color: #3498db;
  color: #ffffff;
}

上記の例では、button要素にborder-radiusMixinを適用しています。Mixin内のコードがその場所に展開され、Mixinで定義したスタイルがbuttonに適用されます。

３．デフォルト引数:

Mixinにデフォルトの引数を設定することも可能です。

@mixin box-shadow($x: 0, $y: 0, $blur: 5px, $color: #000) {
  box-shadow: $x $y $blur $color;
}

上記の例では、box-shadowMixinが、$x、$y、$blur、$colorの4つの引数を受け取りますが、デフォルトの値が設定されています。これにより、引数が指定されない場合はデフォルトの値が使われます。

.box {
  @include box-shadow(2px, 2px);
  background-color: #3498db;
}

上記の例では、box-shadowMixinに$xと$yだけが指定され、他の引数はデフォルトの値が使われます。

Mixinを使用することで、一般的なスタイルの再利用が容易になり、コードの保守性が向上します。