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

 

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

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

です！

 

 

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

 

 

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

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

 

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

 

 

Sassの便利な機能

1. ネスト（入れ子）
2. 親参照セレクタ（&）
3. 変数（$）
4. コードの再利用（extend）
5. コードの再利用（mixin）
6. 演算子

 

1.ネスト（入れ子）

 

style.scss

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

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

a {
color: #41f4a3;
}
}
}
[/cc_css]

 

style.css

[cc_css]
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;
}
[/cc_css]

 

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

 

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

 

style.scss

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

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

&:first-of-type {
text-decoration: none;
}
}
[/cc_css]

 

style.css

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

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

a:first-of-type {
text-decoration: none;
}
[/cc_css]

 

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

 

3.変数（$）

 

style.scss

[cc_css]
$red: #bc0d4a;

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

p {
color: $red;
}
}
[/cc_css]

 

style.css

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

.attention-box p {
color: #bc0d4a;
}
[/cc_css]

 

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

 

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

 

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

 

style.scss

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

.form {
border: 1px solid #333;

.form-button {
@extend .button-yellow;
}
}
[/cc_css]

 

style.css

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

.form {
border: 1px solid #333;
}
[/cc_css]

 

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

 

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

 

style.scss

[cc_css]
@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)
}
}
[/cc_css]

 

style.css

[cc_css]
.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;
}
[/cc_css]

 

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

 

6.演算子

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

 

style.scss

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

 

style.css

[cc_css]
.wrapper {
width: calc(100% – ( 10px * 2 ));
height: auto;
margin: 0 auto;
padding: 0 10px;
}
[/cc_css]

 

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

 

 

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

 

 

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

 

ではっ！