こんにちは、かつコーチです。
CSSを扱う上で、Sassを取り入れるのは、一般的になっているでしょう。
そこで今回は、Sassの基本について解説します。
Sassとは？
Sass（Syntactically Awesome Stylesheets）は、
CSSをより効率的かつ再利用可能にするためのCSSの拡張言語です。
通常のCSSにない多くの機能を提供しており、これにより、コードのメンテナンスが簡単になり、
冗長なスタイルの記述を減らすことができます。
以下では、Sassの基本機能をまとめて詳しく解説します。
変数（Variables）
Sassでは、変数を使用して色、フォントサイズ、スペーシングなどの値を管理できます。
これにより、再利用性が向上し、後からの変更が容易になります。
$primary-color: #3498db;
$secondary-color: #2ecc71;
$font-size-base: 16px;
body {
font-size: $font-size-base;
background-color: $primary-color;
}
h1 {
color: $secondary-color;
}この例では、変数を使って色やフォントサイズを管理しています。
例えば、後で $primary-color を変えると、サイト全体の背景色が変更されるため、
メンテナンスが楽になります。
ネスト（Nesting）
Sassでは、セレクタをネストすることができ、HTML構造に沿ったCSSを書くことができます。
これにより、コードが読みやすくなり、関連するスタイルをまとめて記述できます。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
margin-right: 20px;
}
a {
text-decoration: none;
color: $primary-color;
}
}この例では、nav 要素内の ul、li、a のスタイルをネストして記述しています。
これにより、どの部分に対してスタイルが適用されるかが一目でわかりやすくなります。
パーシャル（Partials）と@use
Sassのファイルを複数に分割し、パーシャル（部分ファイル）として管理することができます。
パーシャルファイルは、アンダースコア（_）で始めることで、
Sassコンパイラに直接CSSファイルに変換しないよう指示します。
これを使って、モジュールごとにファイルを分割してコードを整理します。
例：
// _variables.scss
$primary-color: #3498db;
$font-size-base: 16px;@useを使ってパーシャルファイルを読み込みます：
scssコードをコピーする// styles.scss
@use 'variables';
body {
font-size: variables.$font-size-base;
background-color: variables.$primary-color;
}
@useは他のSassファイルを読み込み、変数や関数を使えるようにするコマンドです。
@importは非推奨となり、@useが推奨されています。
ミックスイン（Mixins）
ミックスインは、CSSのコードを再利用可能なブロックとして定義できる機能です。
例えば、ベンダープレフィックスの処理やレスポンシブデザインの設定などを一箇所で管理できます。
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
button {
@include border-radius(5px);
}このようにミックスインを使うと、border-radius のベンダープレフィックスを
何度も書く必要がなくなり、再利用性が向上します。
拡張（Extends）
Sassには、既存のスタイルを他のセレクタで継承する機能もあります。
@extendを使うことで、同じスタイルを複数のクラスに適用でき、冗長なコードを減らせます。
.button {
padding: 10px 20px;
font-size: 16px;
border-radius: 5px;
}
.primary-button {
@extend .button;
background-color: $primary-color;
color: #fff;
}
.secondary-button {
@extend .button;
background-color: $secondary-color;
color: #fff;
}この例では、.button のスタイルを .primary-button と .secondary-button に継承させており、
基本スタイルの重複を避けています。
関数（Functions）
Sassでは関数を定義して、複雑な計算や処理を行い、その結果をスタイルに適用できます。
例えば、色の調整や数値計算を関数で自動化できます。
@function calculate-rem($size-px) {
@return $size-px / 16 * 1rem;
}
body {
font-size: calculate-rem(18); // 1.125rem
}この関数は、ピクセルを rem に変換するためのものです。
特定のピクセル値を渡すと、その値が自動的に rem 単位に変換されます。
制御ディレクティブ（Control Directives）
Sassは、プログラミングのように制御構文をサポートしています。
これにより、スタイルの適用を条件によって分岐させたり、繰り返し処理を行ったりできます。
ループ（@for）
scssコードをコピーする@for $i from 1 through 3 {
.margin-#{$i} {
margin: #{$i * 5}px;
}
}
このループでは、margin-1, margin-2, margin-3 のクラスが生成され、それぞれ 5px, 10px, 15px のマージンが適用されます。
繰り返し（@each）
scssコードをコピーする$colors: red, green, blue;
@each $color in $colors {
.text-#{$color} {
color: #{$color};
}
}
この例では、赤、緑、青の色に対応する .text-red, .text-green, .text-blue のクラスが自動的に生成されます。
メディアクエリ（Responsive Design）
Sassでは、メディアクエリもネストして書くことができます。
これにより、レスポンシブデザインを簡単に管理できます。
.container {
width: 100%;
padding: 20px;
@media (min-width: 768px) {
width: 750px;
}
@media (min-width: 992px) {
width: 970px;
}
}このように、メディアクエリも関連する要素内にまとめて書くことで、管理しやすくなります。
まとめ
Sassの基本機能を活用することで、以下のような効果が期待できます：
- 再利用性の向上: 変数やミックスイン、関数を使ってスタイルを効率的に再利用できます。
- コードの整理: ネストやパーシャルを使って、関連するスタイルをまとめ、コードを整理できます。
- メンテナンスの容易さ: 変数や関数で管理しているため、1箇所の変更で全体のスタイルを調整することが容易です。
- 効率的なレスポンシブデザイン: メディアクエリをネストして記述できるため、レスポンシブ対応のスタイルも管理しやすくなります。
Sassを効果的に使うことで、CSSの記述量を減らし、保守性の高いスタイルシートを作成できます。
