Sassを深く踏み込んで、作業効率をあげる！変数、@for、@each、@if
| HTML / CSSSassって便利ですよね。
別ファイルをインクルードしても、１個のファイルとして出力出来るし。
様々な痒いところに手が届く感じですよね。
その痒いところに手が届くことをこれからご紹介します。
変数、配列がとにかく便利
変数や、配列がとにかく便利です。
って見出しそのまま言ってますが、本当に便利ですよね。
フロントエンド＆バックエンドを経験している人たちはわかってもらえるはず。
そのサイトのカラーコードとかいちいち覚えてないし！
覚えやすい名前で登録できたら便利だし！って感じですかね
ってことで、下に例をば！
$red: #C00;
$green: #0C0;
$blue: #00C;
変数にすると簡単ですよね。たとえカラーコードが複雑になっていようが$redの部分は変わらない（任意ですが)とおぼえやすい名前で登録しておけば引っ張ってこれます。
// 変数の設定
$red: #C00;
// 変数を指定
color: $red;
background: rgba($red, .2);
これは、便利です。
簡単な例だったので、どう便利だというのかわかりにくいかもしれませんが、覚えられないものを登録していくということと、変数の値を変更するだけで、一括で変えれちゃいます。
統一されているものだとテーマカラーみたいなものですね。そういうものは、これで対応できますね。
同じく、配列も便利です。
$colors:(
"green": #9dc815,
"darkgreen": darken(#9dc815, 15%),
"lightgreen": lighten(#44382c, 15%),
);
color: map-get($colors, "green");
background: map-get($colors, "lightgreen");
border: 2px solid map-get($colors, "darkgreen");
配列も簡単にセットできました。
結構わかりやすいですよね。
更に便利な使い方を紹介されているサイトがありましたので、併せてご紹介します。
[SCSS] [CSS] SCSSでカラーコードを管理する関数を作る | UI/UX Design、フロントエンド系の技術に関する備忘録 | whiskers
グループとオプションを指定するだけで、色が取れるというものです。
連想配列を使えば、使い方もいっぱい増えますね。
すごく参考にさせていただきました。
for文、each文で同じような繰り返しが短行で書こう
JavaScriptや、PHPでもよく使われる、繰り返しですね。
// scss
.ranking{
&--block{
position: relative;
&::after{
display: block;
width: 20px;
height: 20px;
background: rgba(#000, .7);
color: #fff;
font-size: 12px;
line-height: 1.67;
text-align: center;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
@for $i from 1 through 10 {
&:nth-child(#{$i})::after{ content: '#{$i}'; }
}
}
}
// css
.ranking--block{
position: relative;
}
.ranking--block::after{
display: block;
width: 20px;
height: 20px;
background: rgba(0, 0, 0, .7);
color: #fff;
font-size: 12px;
line-height: 1.67;
text-align: center;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
.ranking--block::afternth-child(1)::after{ content: '1'; }
.ranking--block::afternth-child(2)::after{ content: '2'; }
.ranking--block::afternth-child(3)::after{ content: '3'; }
.ranking--block::afternth-child(4)::after{ content: '4'; }
.ranking--block::afternth-child(5)::after{ content: '5'; }
.ranking--block::afternth-child(6)::after{ content: '6'; }
.ranking--block::afternth-child(7)::after{ content: '7'; }
.ranking--block::afternth-child(8)::after{ content: '8'; }
.ranking--block::afternth-child(9)::after{ content: '9'; }
.ranking--block::afternth-child(10)::after{ content: '10'; }
こんな感じで、１〜１０までの番号がふれたりします。
よく使われるのは、
// scss ５回繰り返します。
@for $i from 1 through 5{
.mgb#{$i * 10}{ margin-bottom: #{$i * 10}px; }
.pdb#{$i * 10}{ padding-bottom: #{$i * 10}px; }
}
// css
.mgb10{ margin-bottom: 10px; }
.pdb10{ padding-bottom: 10px; }
.mgb20{ margin-bottom: 20px; }
.pdb20{ padding-bottom: 20px; }
.mgb30{ margin-bottom: 30px; }
.pdb30{ padding-bottom: 30px; }
.mgb40{ margin-bottom: 40px; }
.pdb40{ padding-bottom: 40px; }
.mgb50{ margin-bottom: 50px; }
.pdb50{ padding-bottom: 50px; }
こんな感じで使うことが多いですよね。
数字を使った繰り返しです。
eachは、配列を使った繰り返しになるのかな。
// scss
$colors: red, green, blue;
@each $color in $colors {
.#{$color} {
color: #{$color};
}
}
//css
.red { color: red; }
.green { color: green; }
.blue { color: blue; }
配列に入れた要素の数だけ繰り返すものですね。
// scss
$navlist: home, about, company, contact;
.nav{
&--item{
@each $navitem in $navlist{
&.icon__#{$navitem}{
a{
background: url(../images/common/icon__#{$navitem}.png) 12px 15px no-repeat;
&:hover{
background: #369 url(../images/common/icon__#{$navitem}_ov.png) 12px 15px no-repeat;
}
}
}
}
}
}
// css
.nav--item.icon__home a{ background: url(../images/common/icon__home.png) 12px 15px no-repeat; }
.nav--item.icon__home a:hover{ background: #369 url(../images/common/icon__home_ov.png) 12px 15px no-repeat; }
.nav--item.icon__about a{ background: url(../images/common/icon__about.png) 12px 15px no-repeat; }
.nav--item.icon__about a:hover{ background: #369 url(../images/common/icon__about_ov.png) 12px 15px no-repeat; }
.nav--item.icon__company a{ background: url(../images/common/icon__company.png) 12px 15px no-repeat; }
.nav--item.icon__company a:hover{ background: #369 url(../images/common/icon__company_ov.png) 12px 15px no-repeat; }
.nav--item.icon__contact a{ background: url(../images/common/icon__contact.png) 12px 15px no-repeat; }
.nav--item.icon__contact a:hover{ background: #369 url(../images/common/icon__contact_ov.png) 12px 15px no-repeat; }
ナビゲーションとかに使えたりして便利ですね。
基本同じだけども、部分だけ違う場合に便利ですね。
if文で便利に分岐処理
if文での分岐処理とかは、@for、@eachとかと同じでJavaScriptとか使い方は一緒です。
// scss
$style: red
.box{
@if $style == red {
color: #fff;
background: red;
} @else if $style == green {
color: #fff;
background: green;
} @else if $style == blue {
color: #fff;
background: blue;
} @else {
color: #000;
background: #f5f5f5;
}
}
// css
.box{
color: #fff;
background: red;
}
上みたいに使うことはないっすよね。
@mixinとかと組み合わせることがおおいかと思います。
//scss
@mixin boxColors($style) {
@if $style == red {
color: #fff;
background: red;
} @else if $style == green {
color: #fff;
background: green;
} @else if $style == blue {
color: #fff;
background: blue;
} @else {
color: #000;
background: #f5f5f5;
}
}
.box{
@include boxColors(red);
}
// css
.box{
color: #fff;
background: red;
}
functionも勉強しよう。mixinとなにが違う？
functionとmixinの違いがよくわからなかったのだが、今回調べてみた。
mixinは@contentを使えたり中身全部そっくり返せたりするやつで
functionは、数値、値をreturnしてくれる感じです。
functionの前に@mixinをおさらい
// scss
@mixin myMixin($w:20px, $h:20px, $bgc:#000, $clr:#fff){
position: relative;
&::after{
@content;
display: block;
width: $w;
height: $h;
background: rgba($bgc, .7);
color: $clr;
font-size: 12px;
line-height: $h;
text-align: center;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
}
.box1{
@include myMixin(40px, 40px, #368, #fff){
content: '1';
};
}
// css
.box1{
position: relative;
}
.box1::after{
content: '1';
display: block;
width: $w;
height: $h;
background: rgba($bgc, .7);
color: $clr;
font-size: 12px;
line-height: $h;
text-align: center;
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
// scss
$fontsize: 14px;
@function myFunc($lineheight:28px){
@return round($lineheight / $fontsize * 100) / 100;
}
.txt1{
font-size:$fontsize;
line-height: myFunc();
}
.txt2{
font-size:$fontsize;
line-height: myFunc(40);
}
// css
.txt1{
font-size: 14px;
line-height: 2;
}
.txt2{
font-size: 14px;
line-height: 2.86;
}
こんな感じで、数値を渡したら、計算させて数値を返してくれる感じですね。
今のところ、functionの有効利用がわかりません。
良い使い方があれば教えてほしいです。
まとめ
sassやらLESSやらと（他にもありますが）、CSSのメタ言語はいろいろとあります。
どれも、使いやすい使いにくいがあると思います。自分にあったものを選択するとよいですね。僕は、今のところscssを使っております。
scssも奥が深く出来ることがたくさんあります。バージョンも上がっていけばもっと出来ることが増えていくかと思います。
今回紹介したことを頭に入れておくだけで、出来ることがいろいろと増えるのではないでしょうか。
WEBデザイナーやフロントエンドエンジニアなど、出来ることが増えていく一方でそれに比例し、することがめっちゃ増えていきます。少しでも、便利な機能を覚えて手数を減らせれるようにしておきたいですね。
ぼくも、手数を減らして、効率を上げることは永遠のテーマだと思います。
