Sassとは？
Sassとは、CSSの拡張言語であり、より効率的なCSSの作成に役立ちます。SassはSyntactically Awesome Style Sheets（構文的に素晴らしいスタイルシート）の略です。SassはCSSより高機能で、より効率的な方法でスタイルシートを作成できます。 Sassは、CSS3の機能に加えて、ネスト、変数、演算子、ミックスイン、継承、関数など多数の機能を提供しています。
Sassの特徴
1. 変数
Sassでは変数を使用してスタイルを記述できます。これにより、同じ値を複数の場所で使用したい場合に、コードの重複を避けることができます。変数は、$を前置詞として宣言されます。
Sassの使用例
$primary-color: #008080;
$secondary-color: #ff9800;
.button {
background-color: $primary-color;
color: $secondary-color;
}
生成されたCSS
.button {
background-color: #008080;
color: #ff9800;
}
2. ネスト
Sassは、CSSセレクタのネスト機能を提供します。これにより、HTML構造と同じように、スタイルを分類し、コードを読みやすくすることができます。
Sassの使用例
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
li {
display: inline-block;
a {
display: block;
padding: 6px 12px;
color: #333;
text-decoration: none;
}
}
}
}
生成されたCSS
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav li a {
display: block;
padding: 6px 12px;
color: #333;
text-decoration: none;
}
3. ミックスイン
Sassでは、CSSプロパティと値を再利用するために、ミックスイン機能を提供します。これにより、複雑なCSSを簡潔に保ち、スタイルの一貫性を保つことができます。
Sassの使用例
@mixin button($background, $color) {
background-color: $background;
color: $color;
padding: 10px 20px;
font-size: 1.2rem;
border-radius: 5px;
}
.button-primary {
@include button(#008080, #fff);
}
.button-secondary {
@include button(#ff9800, #fff);
}
生成されたCSS
.button-primary {
background-color: #008080;
color: #fff;
padding: 10px 20px;
font-size: 1.2rem;
border-radius: 5px;
}
.button-secondary {
background-color: #ff9800;
color: #fff;
padding: 10px 20px;
font-size: 1.2rem;
border-radius: 5px;
}
4. 継承
Sassは、CSSの継承機能を提供します。これにより、共通プロパティをまとめて、スタイルの一貫性を維持できます。
Sassの使用例
%button {
display: inline-block;
padding: 10px 20px;
font-size: 1.2rem;
border-radius: 5px;
}
.button-primary {
@extend %button;
background-color: #008080;
color: #fff;
}
.button-secondary {
@extend %button;
background-color: #ff9800;
color: #fff;
}
生成されたCSS
.button-primary, .button-secondary {
display: inline-block;
padding: 10px 20px;
font-size: 1.2rem;
border-radius: 5px;
}
.button-primary {
background-color: #008080;
color: #fff;
}
.button-secondary {
background-color: #ff9800;
color: #fff;
}
Sassのコンパイル方法
SassファイルをCSSファイルにコンパイルするには、SassコマンドラインツールまたはGUIツールを使用します。Sassコマンドラインツールは、Rubyで動作します。
1. Sassコマンドラインツールを使用する
-
Rubyをインストールします。
-
コマンドラインで以下のコマンドを実行します。
gem install sass -
SassファイルをCSSファイルにコンパイルします。
sass input.scss output.css
2. GUIツールを使用する
- KoalaやPreprosなどのGUIツールをインストールします。
- SassファイルをGUIツールにドラッグアンドドロップします。
- 自動的にコンパイルされたCSSファイルが生成されます。
まとめ
Sassは、CSSの拡張言語であり、変数、ネスト、ミックスイン、継承などの機能を提供します。これらの機能により、CSSの作成がより効率的に行えます。Sassを使うことで、コードの重複を避け、スタイルの一貫性を保つことができます。SassファイルをCSSファイルにコンパイルするには、SassコマンドラインツールまたはGUIツールを使用します。
参考リンク：