こんにちは、Yukiです。
今回はSassで最低限覚えておきたい6つの機能を解説していきたいと思います。
まだ使ったことないけど、これからSassを使ってみたいというコーダーやマークアップエンジニア、サーバーサイドエンジニアの方向けの内容となっています。
【本記事の内容】
- Sass使うと何が便利なのか？
- Sassで最低限覚えるべき機能は6つ
スポンサードサーチ
Sassを使うと何が便利なのか
SassというのはCSSを効率的に書くために開発された言語です。そして、Sassには２種類の記法があってSCSS記法とSASS記法と呼ばれるものがあります。現在主流なのがSCSS記法で、今回紹介するのもSCSS記法です。
では早速、そもそもSassを使うと何がどう便利なのかという話をしていきたいと思います。
Sassでは、コードの再利用や変数、演算、条件分岐といったプログラム的な書き方をCSSで可能にしてくれます。CSSをプログラム的にかけると何が便利かというと例えば…
色を変数で管理することで、サイトのメインカラーを変えたいとなった時に、CSSだけであれば全てのプロパティの色の値を変えなければなりませんが、Sassだと変数を指定している色を１つ変えれば済みます。
さらに、ネストを利用することでソースコードの可読性が上がったり、＆（アンパサンド）を利用することで記述量を減らすことができたりします。
Sassの使い始めはなかなか慣れないかもしれませんが、使い慣れると「もうSassを使わないとかあり得ない！」という感覚になります。
では次は、Sassで最低限覚えるべき機能6つを紹介したいと思います。
Sassで最低限覚えるべき機能6つ
Sassで最低限覚えるべき機能は以下の6つです。
- ＆（アンパサンド）
- ミックスイン
- 変数
- ２種類のコメント
- パーシャルによるファイル分割
- ネスト
では詳しくみていきましょう。
＆（アンパサンド）
Sassでは、「&」をセレクタ名の前に使うことで、親のセレクタ名と繋げたセレクタを作成することが可能です。
言葉で説明するとわかりづらいので、実際のコードを見てみましょう。
＆（アンパサンド）を使った書き方の例１
//cssで書いた場合
.link{
color: red;
}
.link:hover{
color:blue;
}
//Sassで書いた場合
.link{
color: red;
&:hover{
color: blue;
}
}
＆（アンパサンド）を使った書き方の例２
//cssで書いた場合
.header{
background-color: #fff;
}
.header__logo{
font-size: 24px;
}
//Sassで書いた場合
.header{
background-color: #fff;
&__logo{
font-size: 24px;
}
}
このように、＆（アンパサンド）を使うとコードの記述量を減らすことができ、非常に便利です。
ミックスイン
ミックスインはSassの機能の中でも最もよく使われる機能の１つです。
ミックスインについて簡単に解説すると、あるまとまったCSSを定義し、それを別の場所で呼び出して使えるという機能です。これも言葉で解説するとわかりづらいので、実際のコードを見てみましょう。
ミックスインを使った記述例
// ミックスインの定義
@mixin card {
padding: 20px;
background-color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
color: #333;
}
// ミックスインの呼び出し
.contents-card{
@include card;
}
このように、ミックスインではよく使うコードをまとめて、呼び出すことでコード全体の記述量を減らすことができます。
ちなみに定義したミックスインは@include ミックスイン名;で呼び出すことが可能です。
ミックスインを利用したメディアクエリの記述例（ミックスインの応用）
// ミックスインの定義
@mixin sp {
@media (max-width: 768px) {
@content;
}
}
// ミックスインの呼び出し
.inner{
padding: 0 50px;
margin: 0 auto;
max-width: 1100px;
width: 100%;
// スマホ時のCSSを指定
@include sp{
padding: 0 30px;
}
}
このようにメディアクエリを利用すると、レスポンシブの対応の記述も簡潔に書くことができます。
ちなみにここで出てきた@content;はスタイルなどのCSSをミックスインに渡す機能です。
ミックスインを使ったこの2つの書き方は、非常に便利なのでぜひ覚えておきましょう。
変数
変数もまた、Sassを利用する大きな利点の１つです。
先ほども紹介した通り、色の指定やfont-familyの指定の際に非常に便利です。LPのコーディングくらいでは、あまりそのメリットを感じられませんが、大規模なサイトやアプリのコーディングではいちいち「ここの色のコードなんだっけ？」とならず、変数名を指定するだけなので管理が非常に楽になり、大きなメリットを実感できます。
変数を利用した記述例
// 色の定義
$MainColor:#333;
$SubColor:#f7f7f7;
$AccentColor:#0033ff;
.header{
background-color: $MainColor;
color: $SubColor;
}
コメント（２種類）
Sassを実際に用いる際には、SassをCSSに変換（コンパイル）して利用することになります。
そして、Sassではそのコンパイルの後にも残るコメントと、コンパイル後は消えてしまうコメントがあります。それぞれの書き方は以下の通り。
// コンパイル後に消えるコメント /* コンパイル後も消えないコメント */
必要な箇所に適切なコメントを残すには、上記の違いを理解しておく必要があります。
パーシャルによるファイル分割
Sassにはパーシャルというファイルを分割する機能があります。
CSSでファイルを「style.css」「reset.css」「module.css」と分けてしまうと、ファイルの数だけHTTPリクエストが発生してしまい、パフォーマンスが若干低下する問題があります。（ファイル3つくらいでは、ユーザーが体感できるほどのパフォーマンスの低下はしないが、もっと数が増えるとパフォーマンスが落ちる可能性がある。）
そこで、パフォーマンスと管理のしやすさを両方ともクリアできるのが、パーシャルによるファイル分割です。パーシャルのファイルを作成するにはファイルの先頭をアンダースコア（_）で書き始めます。
例）_reset.scssなど
パーシャルによるファイル分割を利用した例
// style.scss @import "_variables.scss"; @import "_mixin.scss"; @import "_base.scss"; @import "_module.scss"; @import "block/**";
この例では、「_variables.scss」「_mixin.scss」「_base.scss」「_module.scss」が「style.scss」と同じフォルダ内にあることを前提とした例です。ちなみに「block/**」というのはblockフォルダの直下にあるファイル全てを読み込むという意味になります。
この例だと少しわかりづらいという方は、こちらのソースコードを参考にしてみてください。
このようにパーシャルを利用してファイルを分割することで、パフォーマンスを落とすことなく、それぞれのファイルを管理しやすくできるようにできます。
ネスト
ネストとは、HTMLの構造に合わせて入れ子で書いていくことができる機能です。
これも具体例を見てみましょう。
<section>
<h2>heading</h2>
<ul>
<li>list1</li>
<li>list2</li>
</ul>
</section>
// scss
section{
background-color: #333;
h2{
font-size: 30px;
}
ul{
margin-bottom: 20px;
li{
font-size: 18px;
}
}
}
このように、HTMLの構造に合わせて記述できるのでCSSよりも記述量が減り、SCSSを見るだけでも構造を把握することができメンテナンス性も向上します。
＊ただネストの階層は、深すぎると返って可読性が落ちてしまうので、注意が必要です。コンポーネント設計を意識するのであれば、ネストは2〜3階層くらいにすべきですし、HTMLの構造に合わせてCSSを書いていきたいなら5〜6層になることも仕方ないでしょう。慣れないうちは、コンパイル後のCSSを常に確認しながらSassを書いていくのが良いかと思います。
スポンサードサーチ
Sassのコンパイル
先ほども少し触れましたが、Sassを実際に用いる際には、SassをCSSに変換（コンパイル）して利用することになります。
ターミナルなどを使ってSassをコンパイルできることが理想ですが、環境構築に悩みSassの利用を諦めてしまうことの方が勿体無いので、最初のうちはkoalaやPreprosなどのGUIツールを使ってSassを利用することをお勧めします。
GUIツールを使えば、黒い画面を利用することなく簡単にSassをコンパイルすることができます。どちらも無料で使えます。ちなみに私のオススメはkoalaです。
まとめ
もう一度復習すると、Sassで最低限覚えておきたい機能は以下の6つ。
- アンパサンド
- ミックスイン
- 変数
- コメント
- パーシャルによるファイル分割
- ネスト
Sassには他にもまだまだ便利な機能がありますが、最低限この６つの機能が使えるだけでも、今後CSSを書く際の効率が大きく変わってくると思いますので、ぜひ今回紹介した機能を利用してみてください。
記事の途中でも紹介しましたが、こちらのソースコードの方で実践に即した形でSassを利用したコードがあるので、もし簡単な例ばかりでイマイチ実際はどんな感じに使われるのかがイメージ湧かないという方がいたら、参考にしてみてください。
加えて、もっとSassを勉強したいという方は下記の書籍がオススメです。
では今回は以上です。最後までお読みいただきありがとうございました。
コメントを残す