[css]Sassの便利な点をまとめてみた〜Sassの便利な機能（mixin, extend, etc...）〜｜blog（スワブロ）

[css]Sassの便利な点をまとめてみた〜Sassの便利な機能（mixin, extend, etc…）〜

2019.04.04

むったん

ども、「六崎」改め「むったん」です！

弟（むつたく）が入社して1ヶ月が経ちましたが、名前被る問題により改名しました(◍˃̶ᗜ˂̶◍)ﾉ”
ちなみに、今まで呼ばれてた私の珍しいあだ名は…

ろくちゃん（先に「むっくん」と呼ばれてた人がいたから
ほーちゃん（高校時代1人だけ呼んでくれてた
ムッソリーニさん（「むっつり」から由来して大学時代の先輩達が呼んでた…むっつりじゃないけど笑

です！

では、前回に引き続き「Sassの便利な点をまとめてみた」ということで、便利な機能を紹介していこうと思います！

Sassの便利な点をまとめてみた

SASSとSCSSの違い
Sassの便利な機能　←今回はこれ
Sassのコンパイルと出力形式

さて、前回Sassには2種類の記法があることを説明しました。
今回は「便利な機能」ということで、Sassの機能について紹介していきます！
ちなみに、記法はSCSSで行いたいと思います。

1.ネスト（入れ子）

style.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

ul {
list-style: none;
margin: 10px 0;

li {
color: #4286f4;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
margin-bottom: 5px;

a {
color: #41f4a3;
}
}
}

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

ul {
list-style: none;
margin: 10px 0;
}

ul li {
color: #4286f4;
border-bottom: 1px solid #ccc;
padding-bottom: 5px;
margin-bottom: 5px;
}

ul li a {
color: #41f4a3;
}

a {
color: #4286f4;
text-decoration: underline;
}

コンパイル時に親セレクタを頭にcssを生成してくれる機能です。
ただし、ネストし過ぎるとセレクタが長くなってしまうので2つくらいまでがオススメです！

2.親参照セレクタ（&）

style.scss

1
2
3
4
5
6
7
8
9
10
11
12
13

a {
color: #4286f4;
text-decoration: underline;

&:hover {
color: #41f4a3;
background-color: #fcfcf7;
}

&:first-of-type {
text-decoration: none;
}
}

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13

a {
color: #4286f4;
text-decoration: underline;
}

a:hover {
color: #41f4a3;
background-color: #fcfcf7;
}

a:first-of-type {
text-decoration: none;
}

（&）を使うことで、親セレクタを自動付与してくれます。
擬似要素等に使うとメッチャ便利！

3.変数（$）

style.scss

1
2
3
4
5
6
7
8
9

$red: #bc0d4a;

.attention-box {
background-color: lighten($red, 15%);

p {
color: $red;
}
}

style.css

1
2
3
4
5
6
7

.attention-box {
background-color: #f0266c;
}

.attention-box p {
color: #bc0d4a;
}

共通して使う値を変数にしておくとメッチャ便利です！
最初にセットしておけば生のカンプデータとの行ったり来たりをしなくて済むー✧٩(ˊωˋ*)و✧

ちなみに、ここで使用しているlighten。
輝度の変更をしているのですが、彩度や透明度なども同じ様に簡単に変更できるので、私はよく使っています。

4.コードの再利用（extend）

style.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.button-yellow {
width: 100px;
height: 30px;
border-radius: 15px;
background-color: #bc7b0d;
color: #fff;
}

.form {
border: 1px solid #333;

.form-button {
@extend .button-yellow;
}
}

style.css

1
2
3
4
5
6
7
8
9
10
11

.button-yellow, .form .form-button {
width: 100px;
height: 30px;
border-radius: 15px;
background-color: #bc7b0d;
color: #fff;
}

.form {
border: 1px solid #333;
}

コードの再利用が簡単にできます。
@extendは、スタイルをそのまま継承します。
mixinとの使い分けは、私の中でも議論（1人で議論してるw）になりますが
「絶対的にプロパティや値が変わらないのであれば、extendを利用する」としています。

5.コードの再利用（mixin）

style.scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

@mixin button-blue($background: #0d70bc, $width: 100px) {
width: $width;
height: 30px;
border-radius: 15px;
background-color: $background;
color: #fff;
}

.form {
border: 1px solid #333;

.form-button {
@include button-blue();
}

.thx-button {
@include button-blue($background: #bc530d, $width: 150px)
}
}

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

.form {
border: 1px solid #333;
}

.form .form-button {
width: 100px;
height: 30px;
border-radius: 15px;
background-color: #0d70bc;
color: #fff;
}

.form .thx-button {
width: 150px;
height: 30px;
border-radius: 15px;
background-color: #bc530d;
color: #fff;
}

extendと同様に、コードの再利用が簡単にできます。
extendとの違いを上げると、変数によってプロパティや値を変えられることですね。
上記同様、使い分けをする際は
「ベースは変わらないけど、たまにプロパティや値が変わることがあるものは、mixinを利用する」としています。

6.演算子

こちらは、cssでも利用できると社内でも半年ぐらいにザワッとした記憶があるのですが…
ちょっとご紹介です。

style.scss

1
2
3
4
5
6
7

$side-padding: 10px;
.wrapper {
width: calc(100% - ( #{$side-padding} * 2 ));
height: auto;
margin: 0 auto;
padding: 0 $side-padding;
}

style.css

1
2
3
4
5
6

.wrapper {
width: calc(100% - ( 10px * 2 ));
height: auto;
margin: 0 auto;
padding: 0 10px;
}

レスポンシブになってくると、固定値より%で決めた方が楽だったりします。
その際、足したり引いたり割ったり掛けたり…私の頭の中はパニックになるので、よく使ってます！
この演算子のおかげで、電卓を使わなくなったし、コンパイルすると計算式ではなく値になってるのがメッチャありがたい所。

ちなみに、SCSSの変数とCSS3のcalc()を一緒に使うときには#{変数名}とすることもポイントですヾ(*´∀｀*)ﾉ
なぜかというのは…実践してみると分かるよ！（そりゃそうだw

いかがでしたでしょうか？
ちなみに、今回いきなりSassシリーズについて書き始めたのは…
一緒に作業する千ちゃんとたくやに「ぜひ！！読んでもらいたい」から、愛を込めてしたためているのですが…
読んでくれてるのかな(●´^｀●)
読んでくれてるといいな…。

ではっ！

↓↓↓ぜひチェックしてください

～提供中のヒューマンセンシング技術～

◆人物検出技術
歩行者・来店者数計測やロボット搭載も
https://humandetect.pas-ta.io

◆視線検出技術
アイトラッキングや次世代UIに
https://eyetrack.pas-ta.io

◆生体判定技術
eKYC・顔認証のなりすまし対策を！
https://bio-check.pas-ta.io

◆目検出技術
あらゆる目周りデータを高精度に取得
https://pupil.pas-ta.io

◆音声感情認識技術
会話から怒りや喜びの感情を判定
https://feeling.pas-ta.io

◆虹彩認証技術
目の虹彩を利用した生体認証技術
https://iris.pas-ta.io

< Back