Web制作を初めた方の中には「Sass」という言葉を聞いたことがあるのではないでしょうか?
CSSのようにスタイルに対して使うSassですが、違いって何んだろう?と思う方も多いハズ…!
そこで今回は「CSS」と「Sass」の違いについて説明したいと思います!
「CSS」と「Sass」とは?
CSSはウェブサイトのスタイリングに使用されるスタイルシート言語で、直接HTMLなどにスタイルを適用することができます。一方、SassはCSSの拡張言語で、変数、ネスト、ミックスインなどの機能を使用し、コードの再利用を行うことで保守性を向上することができます。
ちなみにSassはコンパイルという作業を行ってCSSに変換されます。(逆を言えばコンパイルしないとCSSにならないのでコンパイル作業が必須になります)
ちなみに「SCSS」はSassの記法の一つを指します。拡張子などが変わる点と、記述方法が変わる点以外はほぼ同じ使用方法になります。CSSに記述が似ているためとっつきやすいのも特徴です!
より詳しく…
CSS(Cascading Style Sheets)はウェブページの見た目やスタイルを定義するためのスタイルシート言語です。CSSはHTMLに直接適用でき、セレクタとプロパティの組み合わせを使用して要素のスタイルを指定します。
一方、Sass(Syntactically Awesome Style Sheets)はCSSの拡張言語で、CSSをより効率的に記述することができます。Sass(およびSCSS)は、変数、ネスト、ミックスイン、継承などの使用することができます。
(詳細は後述)
上記のように変数を使用することで、再利用可能な値を定義でき、色やフォントなどのスタイルを一箇所で変更することができます。
またネストは、親要素内で子要素をグループ化でき、より直感的にわかりやすいコードを書くことができます。
ミックスインは、スタイルのセットを定義し、必要な箇所で再利用でき、同じスタイルのブロックを複数の要素で使用する場合に便利です。
継承は、スタイルのプロパティを親要素から子要素に自動的に適用でき、コードを削減し、保守性を高める事ができます。
先述のように、Sass(およびSCSS)はコンパイル作業を経てCSSに変換することによって初めて普通のCSSと同じように適用することができます。
Sass(およびSCSS)を使用することでコードの再利用可能にし、保守性、拡張性を向上させ作業を効率化させる事ができるのが導入の大きなメリットとなります。
それでは実際に見てみましょう!今回はSassよりCSSにより近い記述のSCSS記法で説明をしたいと思います!
ネストとは?
ネスト構造を使用すると、階層的になるのでコードがより読みやすくなります!
親要素との関連性が明確になることで、スタイルの適用範囲を限定したり、要素間の関係を視覚的に見ることができるため、メンテナンスが容易になるのがメリットです!
サンプル
https://codepen.io/takoyaki89/full/xxyMJoo
.container {
.header {
h1 {
font-size: 24px;
color: #333;
}
p {
font-size: 14px;
color: #777;
}
}
.content {
.post {
h2 {
font-size: 20px;
color: #555;
}
p {
font-size: 16px;
color: #888;
}
}
}
}
このSCSSコードでは、「.container
」 クラスの中に「 .header
」と 「.content
」というクラスがネストされています。更に、「.header
」内には <h1>
タグと <p>
タグ、「.content
」内には「 .post
」クラスがネストされています。
上記のようにネストされたセレクタ内で記述を行うことで、親要素と子要素の関係性を直感的に見ることができます。
例えば、「.container
」内の「 .header
」の下にある <h1>
タグは、「.container」「 .header 」「h1
」 というセレクタでスタイルを指定できます。
ミックスインとは?
ミックスインは同じスタイルのセットを複数の要素やクラスで再利用することができます。これにより、スタイルの一貫性を保ちつつコードの記述を減らすことができるのと、スタイルの変更が必要な場合には、ミックスインの定義部分を変更するだけで、再利用部分にも自動的に反映することができます。
コードの効率と保守性やスタイルの再利用性を高めることができるのでとっても便利な書き方です!
サンプル
https://codepen.io/takoyaki89/full/KKGJBLo
@mixin button($background-color, $color) {
background-color: $background-color;
color: $color;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
}
.button-primary {
@include button(blue, white);
}
.button-secondary {
@include button(grey, black);
}
.button-success {
@include button(green, white);
}<br><br>
上記の記述は@mixin
ディレクティブを使用して 「button
」というミックスインを定義することで、ミックスイン内で引数を使用しながら「ボタンの背景色」と「文字色を指定」し、その他のスタイルプロパティも定義しています。
「.button-primary
」、「.button-secondary
」、「.button-success
」の各クラス内で @include
ディレクティブを使用してミックスインを呼び出すことで、引数に対して具体的な値を渡し、それぞれのボタンに異なるスタイルが適用されます。
継承とは?
継承(Inheritance)は、スタイルのプロパティを親要素から子要素に自動的に適用することができます。
サンプル
https://codepen.io/takoyaki89/pen/NWOoBov
.panel {
padding: 10px;
border-radius: 5px;
}
.panel-primary {
@extend .panel;
background-color: blue;
color: white;
}
.panel-success {
@extend .panel;
background-color: green;
color: white;
}
.panel-warning {
@extend .panel;
background-color: yellow;
color: black;
}
上記では「.panel
」クラスを持つ要素に共通のスタイルを定義し、「.panel-primary
」、「.panel-success
」、「.panel-warning
」 の各クラスでは @extend
ディレクティブを使用して「 .panel
」クラスを継承しています。
継承を使用することで、「.panel
」 クラスのスタイルを共有しながら、各クラスに固有のスタイルを追加しています。例えば、「.panel-primary
」クラスは 「.panel
」クラスのスタイルを継承しながら、背景色を青色、文字色を白色に設定しています。
SCSSの記述はCSSにも似ているので慣れていくと記述が早くなり便利になるかと思います!
なお、なれないうちはCSSの時はどんな感じで記述されるのかがわかりにくいかと思いますので、
https://www.sassmeister.com/ を使うとコンパイル後のCSSがわかるので便利です!
以上「CSS」と「Sass」の違いについてでした!