cssの拡張言語scssが面白くて便利だった(初級編)

2020.07.21
nog

苦手なjsから初めてjQを触ったとき、なんて記述が楽なんだろうと感動した思い出があります。
そんなノリでcssもscssという拡張言語(メタ言語)が使えたら割と楽しかったので紹介してみようと思いました。

scssとは

記述の仕方どんな？

scssは基本cssとほぼ変わりません。ただ、cssの値に変数が使えたり若干プログラミングっぽいことができます。
ちなみに出来るからといって無理に変数等使わなくても、普通のcssの記述でも動くので初心者が始めやすい記述です。

はじめるには？

はい、環境構築必要です。これが一番めんどくさいですが無料ソフトやVSCodeというエディター使ってる方はプラグイン使えばscss使うことができるようです。ブラウザのツール等でもあるそうだとか。
自分は会社の先輩に手伝って頂いてローカルで環境構築しましたが、構築の完全理解に至って無いため、今回~~環境構築の話は割愛します~~

【追記】会社で一緒にお仕事させて頂いてるエンジニアさんがqiitaで環境構築の記事を書いたよ！と言ってくださったので是非参考に→SCSSの始め方
(imym先生有り難うございます)

どういう仕組み？

scssが使える環境で普段cssに無い変数や演算をscss記述するとそのソフトやプラグイン内で計算した値をcssとして出してくれます。
ただ、それだとscssが使える環境以外では使えないので、最後に「コンパイル」というscssをそのままcssに翻訳する処理をすればどの環境でもcssとして読み取ることが出来るようになります。便利。

【流れ】scss環境でscss記述→全部書き終わったらコンパイル(scssをcssにする処理)→どこでも読み込めるcss完成

scss記述で出来ること(初級編)

1.指定を入れ子(ネスト)に出来る

cssで書くとdiv{color:#fff;}、div a{color:#000;}、div a span{color:#ccc;}…とセレクタが伸びていく＆バラけていく。どこからどこまでが同じエリア内の指定なんだかも少しずつわかりにくくなったりしますよね。
scssだと以下のような記述で同じことができます。

div{ color:#fff; a{ color:#000; span{ color:#ccc; } } }

ブロックの親子関係がわかりやすい上にセレクタが伸び過ぎないのがポイントです。こういったセレクタを入れ子にすることをネストと言うらしいです。
最終的にコンパイル(scssをcssに出力すること)すると以下のように戻ります。

div{
    color:#fff;
}
div a{
    color:#000;
}
div a span{
    color:#ccc;
}

今回は例としてわかりやすくdiv等のセレクタでやっていますが、もちろんクラスやIDでも使えます。
むしろネストはクラスやIDで書いている時が一番、親子関係がわかりやすいscssの醍醐味を味わえる気がします。

ちなみに擬似要素もネスト出来ます。

//hover
a{
    color:#000;
    &:hover{
        text-decoration:underline;
    }
}

//before 
a{
    position:relative;
    &:before{
        content:"";
        position:absolute;
    }
}

擬似要素等の際はネスト内で「&:」と記述することで処理をつなげることが出来ます。

2.変数が使える

cssでメインで使うカラーの値が「#c50102」となったとき。よくあるのが、“カラーコードが覚えられない”という現象。
近いところで何回か値を使う分には前後からコピーしてくればいいのですが、忘れた頃に指定しようとするとどうも思い出せなくなりモヤモヤします。

これに至っては変数化できたら便利だな、と思っていたのですがscssだとそれが出来ます。

$main-color: #c50102; //変数定義 
div{ 
　color: $main-color; 
}

「$●●(変数名)」で好きにcssの値を変数化出来ます。
何より便利なのがクライアントとのやりとりで『サイトのイメージカラー、やっぱ赤じゃなくって青が良いな』と言われた時の対応。

わざわざサイト内全部の指定を検索＆置換しなくても、上記のscssなら変数の中身変えるだけで済みます。置換した際に一部cssが崩れたなど、指定を書いた全てのファイルに触れるリスクを無くせることも含めて便利な代物です。

コンパイルすると変数の値が挿入され以下のような普通のcssになってくれます。

div{ 
　color:#c50102; 
}

3.同じ指定の継承が出来る

全く同じ指定の場合、よく.hoge1, .hoge2{display:block;}と書く場合がありますよね。
ただしこれに追加して.hoge2だけにtext-align:right;を効かせたかった場合、scssだと少しだけスマートな書き方が出来ます。

//@extend　というのを使うとスタイルの継承が行えます。 
.hoge1{ 
　display:block; 
} 
.hoge2{ 
　@extend .hoge1; //@extendの後に継承したいスタイルを保持したセレクタ名 
　text-align:right; 
}

「@extend」という指令を使って他のセレクタが持っているスタイルを引用することが出来ます。
コンパイルすると

.hoge1, .hoge2{ 
　display:block; 
} 
.hoge2{ 
　text-align-right; 
}

の、ように見慣れた記述になってくれます。
最初はわざわざ@extend使わなくてもコンパイル後のような普通のcssで書けばいいのではと思うかもしれませんが@extendをつかってscssが出来るようになると、継承にさらに継承が使えるなどの小技も使えるようになるので開発の楽しさが増えてゆくと思います。

私の場合はよくdisplay:block;+text-align:center;などセットで頻繁に使うものにセレクタ名をつけて、他のセレクタでいちいち真ん中寄せの記述を書かなくていいように継承させています。

//例 
.center{ 
　display:block; 
　text-align:center; 
} 
div{ 
　@extend .center; //ブロックの中身真ん中寄せしたい 
　width:100%; 
　a{ 
　　font-size:1rem; 
　　@extend .center; //aタグの中の文言真ん中寄せしたい 
　} 
}

こういうのはハマると楽しくなってきますね。

今回のまとめ

いっぺんにご紹介するとどうもまとまらない文になってしまいそうなので今回は「初級編」と分けてここまでにしようと思います。

【今回学んだscssとは】

scssとはcssのメタ(拡張)言語
開発環境構築が必要になる
コンパイル→ソフトやプラグインの機能を使ってscssをcssにすること
ネスト(入れ子)化記述が出来る
変数を用いた指定が出来る
スタイルの継承が出来る

これを読んだ方が少しでもscssがどんな感じのものなのか、理解に繋がったらいいなと思います。

続き書きました→cssの拡張言語scssが面白くて便利だった(中級編)

PREV
戻る