【SCSS】実務でよく使うSassの機能たち
ただでさえコンパイルやらでコーディングの手間がある Sass。
今回は、Sass を最低限の知識で具体的に活用する方法についてまとめました。
主に、Sass を
- 視覚的にわかりやすくする
- 変数で管理しやすくする
という 2 つの目的ごとにまとめています。
Sass の導入方法などについてはこちらの記事で書いているのでぜひ読んでいただければと！
CSS を視覚的にわかりやすくする
入れ子で HTML っぽく CSS を書く
こういう一般的なHTMLがあったとき、
<section class="p-section">
<h2>Title</h2>
</section>
CSS はそれぞれのクラスやタグに対してスタイリングします。
.p-section {
padding: 1rem 3rem 4rem;
}
.p-section h2 {
font-size: 3.2rem;
}
ただ、CSS だと全て左寄せの書き方になってしまう以上、HTML と違って構造が視覚的にわかりにくいです。
Sass だと、HTML のように入れ子でスタイリングすることができます。
.p-section {
padding: 1rem 3rem 4rem;
h2 {
font-size: 3.2rem;
}
}
これを CSS にコンパイルすると、先程と同じようにスタイリングできていることがわかりますね。
.p-section {
padding: 1rem 3rem 4rem;
}
.p-section h2 {
font-size: 3.2rem;
}
Sass のような入れ子構造のスタイリングは、HTML の構造と似たかたちになるため、視覚的にどこをスタイリングしているかわかりやすくメンテナンスがしやすいです。
@extend で CSS の内容を引き継ぐ
また、Sass の入れ子構造は並列関係のクラスでも成立します。
例えば、セクションの HTML コーディングを以下のようにした場合。
<section class="p-section--work">
<h2>WORK</h2>
</section>
Sass は&を使ってスタイリングすることができます。
.p-section {
padding: 1rem 3rem 4rem;
&--work {
padding: 1rem 3rem 4rem;
background-color: #efefef;
}
}
CSS にコンパイルするとそれぞれ CSS が効きます。
.p-section {
padding: 1rem 3rem 4rem;
}
.p-section--work {
padding: 1rem 3rem 4rem;
background-color: #efefef;
}
ただ、これだと p-section の内容が変わるたびに p-section--work を変更しないといけないですし、シンプルに記述が長くなってしまいます。
ので、実際には@extend を使って p-section の内容を呼び出します。
.p-section {
padding: 1rem 3rem 4rem;
&--work {
// padding: 1rem 3rem 4rem;
@extend .p-section;
background-color: #efefef;
}
}
@extend で p-section の内容を引き継げるので、かなりメンテナンスのしやすい Sass がかけている状態ですね。
変数で管理しやすくする
また、Sass では変数が使えます。
変数は情報の入れ物みたいなもので、入れ物の内容を一度決めると、他の場所でも同じ内容を使い回せます。
$ でカラーリングの管理
変数は「$」を使って決められます。
よく使うのはカラーリングの変数。
以下のように Sass を書くと、赤色の色番号を一括で管理できます。
$color-red: #ed3232;
h2 {
color: $color-red;
font-size: 3.2rem;
}
@mixin でフォントの管理
また、変数は単体だけではなく、複数行の CSS でも使いまわすことができます。
よく使われるもので言うと、フォントの変数。
フォントを指定してかつ太字にして強調したい場合は、@mixin（ミックスイン）を使って Sass を書くと、いちいち font-family を設定する手間が省けます。
@mixin accentFont($weight: "bold") {
font-family: "Oswald", sans-serif;
font-weight: $weight;
}
h2 {
font-size: 3.2rem;
// font-family: "Oswald", sans-serif;
// font-weight:bold;
@include accentFont;
}
使いたい場所で@include を使うと使い回すことができます。
あとは、引数を使ってborderを管理しやすくすることもあります。
@mixin border($color:#efefef){
border: solid 1px $color;
}
.box{
@include border(#333)
}
上のコードでは、色を引数として@includeを使いまわしつつ、色だけ独自のスタイリングを実装しています。
@if でメディアクエリの管理
変数や@mixin をさらに応用して、if 文を書くこともできます。
使用場面はそこまで多くは無い印象ですが、レスポンシブ対応のメディアクエリを指定する際に使うと効果はばつぐんです。
breakpoint を一つの場所で管理ができるので、メディアクエリの微調整等で大活躍します。
@mixin breakpoint($point) {
@if $point == tablet {
@media (min-width: 640px) {
@content;
}
}
@if $point == pc {
@media (min-width: 769px) {
@content;
}
}
}
.p-section {
padding: 1rem 3rem 4rem;
// @media (min-width: 640px) のとき
@include breakpoint(tablet) {
padding: 1rem 2rem 4rem;
}
// @media (min-width: 769px) のとき
@include breakpoint(pc) {
padding: 1rem 6rem 12rem;
}
}
総まとめ
まとめると、以下のように Sass でスタイリングします。
スタイリングする HTML の構造
<section class="p-section--work">
<h2>WORK</h2>
<img src="./asset/img/work/main.jpg" alt="" />
</section>
変数などを格納する Sass。大体_base.scss とかにコーディングすることが多い印象。
@mixin breakpoint($point) {
@if $point == tablet {
@media (min-width: 640px) {
@content;
}
}
@if $point == pc {
@media (min-width: 769px) {
@content;
}
}
}
@mixin accentFont($weight: "bold") {
font-family: "Oswald", sans-serif;
font-weight: $weight;
}
$color-red: #ed3232;
p-section のスタイリングをする Sass。_section.scss とか名付けたファイルでスタイリングすることが多い印象です。
.p-section {
padding: 1rem 3rem 4rem;
h2 {
color: $color-red;
font-size: 3.2rem;
// font-family: "Oswald", sans-serif;
// font-weight:bold;
@include accentFont;
}
// @media (min-width: 640px) のとき
@include breakpoint(tablet) {
padding: 1rem 2rem 4rem;
}
// @media (min-width: 769px) のとき
@include breakpoint(pc) {
padding: 1rem 6rem 12rem;
}
}
最後に
本当は、@for やら@while やらまだまだ実装できる機能はありますが、今回は普段よく使う使い方だけをまとめてみました。
とは言っても、まあまあいろいろな機能を紹介したので、いきなり全部導入するのではなく、取り敢えず入れ子や@extend など今回紹介した機能の一部から Sass を導入していって、徐々に慣れてきたら変数や@if などを活用してみることをおすすめします。
それでは。
Discussion