こんにちは、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;
}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を使用することで、一般的なスタイルの再利用が容易になり、コードの保守性が向上します。
