この記事は
普段CSSでコーディングしているけど、
Scssも便利らしいし勉強しなきゃなあと思ってる人向けの記事だよ！！
わたしも初めからScssを使ってたわけではないので、使ってみるまでいまいち便利さがわからなかったんだが、
今はもう逆にCSSでどうやって書いてたかよく覚えてないぞ・・・(´-ω-｀)うぬぅ
Scssって何？
Sass は Syntactically Awesome Style Sheets (構文的に素晴らしいスタイルシート) の略で、CSSを便利に使えるように拡張した言語です。
-SASS (scss) の基本的な使い方/Web Design Leaves
CSSとだいたい一緒だけど、色々できてめちゃ便利になったのがSassって感じだな。
あれ？Sass？Scssじゃないの？
SassとScssはだいたい一緒だけど、ちょっと違う。
で、CSSから入ってるひとなら絶対Scssのが親しみやすい。
違いはあとで説明するけど、簡単に言うとCSSの書き方と似ている方がScssで、
もっと書き方が簡略化されているのがSassって感じだ。
（SassとScssの違いに飛ぶ）
WebでScssが試せるぞ
Scssは、コンパイルして一回CSSとして出力させてからHTMLに読み込ませるっていう仕組みなので、そもそもコンパイルできる環境ができてないと使えないのだけど、構築ができてなくても実際にどんな風に書けるのか試せるサイトが存在するので紹介。
環境ができてないけど勉強したいって人はひとまずこの辺で試してみるといいと思うぞ。
・SassMeister | The Sass Playground!
書いたScssを即時でコンパイルして出来上がったCSSも右側に表示してくれるサイト。
・CodePen
登録後、CSSの設定のところで「Scss」を選択すると、Scss記述でも書けるようになるサイト
Scssの書き方
じゃあ実際にどんな風に書くのかを見ていこう！
たとえばこんなデザインのページがあったとする。
で、HTMLをこう書いたとする。
<divclass="container"><divclass="inner"><pclass="title">コンテナのタイトル</p><pclass="text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div><divclass="inner"><pclass="title">コンテナのタイトル</p><pclass="text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div><divclass="inner"><pclass="title">コンテナのタイトル</p><pclass="text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div></div>CSSで書いてみるとこんな感じ？
body{background:#65B7B7;}.container{display:flex;margin:0auto;width:80%;}.inner{background:#F5CE3F;margin:10px;padding:020px;border-radius:10px;}.title{font-size:26px;font-weight:bold;}.text{font-size:14px;}これをScssにすると、こうなる。
body{background:#65B7B7;.container{display:flex;margin:0auto;width:80%;.inner{background:#F5CE3F;margin:10px;padding:020px;border-radius:10px;}.title{font-size:26px;font-weight:bold;}.text{font-size:14px;}}}そう、Scssはクラスの記述を入れ子にして書けるのだ！！！
こうすると、階層構造がとてもわかりやすいな！！！
&(アンパサンド)を使う
でも、これだけだとまだ便利さがわからないよな。
次は、HTMLに書くクラスの書き方を少し変えて書いてみる。
<divclass="container"><divclass="container__inner"><pclass="container__title">コンテナのタイトル</p><pclass="container__text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div><divclass="container__inner"><pclass="container__title">コンテナのタイトル</p><pclass="container__text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div><divclass="container__inner"><pclass="container__title">コンテナのタイトル</p><pclass="container__text">コンテナのテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p></div></div>お？なんでアンスコ2個でつないでんの？？？ってなった人。
これはBEMというクラスの命名規則で、Scssと相性の良い規則なので覚えておいてほしいぞ。
（ハシビロコウが書いたBEM記事）
[HTML/SCSS]BEM設計をワイヤーフレームを使って解説してみる
で、こいつをScssで書くと、こうなる。
body{background:#65B7B7;}.container{display:flex;margin:0auto;width:80%;&__inner{background:#F5CE3F;margin:10px;padding:020px;border-radius:10px;}&__title{font-size:26px;font-weight:bold;}&__text{font-size:14px;}}そう、Scssは&（アンパサンド）を使うことで、クラス名が一部省略できるのだ！
しかもBEMの規則に乗っ取って命名しておくと、.containerの中にどんな子要素があるのか一目瞭然になる。
(ちなみにbodyも含めて入れ子にしてしまって良いんだけど、あんま入れ子やると階層が深くなってわかりづらいので離してます)
また、
a{color:#fff;}a:hover{color:#000;}とかの場合も、
a{color:#fff;&:hover{color:#000;}}こうやって入れ子にして書ける。
どこを:hoverした時なのか、わかりやすくなってよいよい。
もちろん、:before・:afterも入れ子にして書けるから、&:beforeとか、&:afterっていう書き方もできる。
変数
Scssは変数を使うことができる。
たぶんいろいろやればすごい複雑なこともできるんだろうけど、今回はよく使ってる変数を紹介。
色の変数
ページ上で何度も使う色は、CSSだとそのたびにカラーコードをコピペしなきゃいけなくてめんどくさいよなぁ。
でも、Scssなら変数を一回書いてしまえばその必要がなくなるのだ。
色の変数の書き方は非常に簡単で、たとえば
$point:#6A71C4;と書く($の後の文字列はなんでもOK)。
ほんで、この色を使いたいタイミングがきた時に
color:$point;とか
background:$point;とかやるだけで、#6A71C4の色が呼び出されるのだ。
font-familyも変数に
ページ内でたまに出てくるfont-familyがある場合は、
そいつも変数にしておくとお手軽に呼び出せるぞ。
$font_yu:游ゴシック体,"Yu Gothic",YuGothic;こうやって設定しておくと、
font-family:$font_yu;こう書いた時に游ゴシックが呼び出される。
便利〜〜〜〜〜〜〜
引数
Scssは、引数を使うこともできる。
→引数（アーギュメント）とは - IT用語辞典 e-Words
Scssの引数は、@mixinで書いて@includeで呼び出せるぞ。
ここでは、わたしがよく使う@mixinを紹介するぞ〜。
display:flex
display:flexは、justify-contentとかalign-itemsとか、ブラウザごとの記述とかが
いちいちめんどくさいので、@mixinにして１行で呼び出せるようにしている。
こんな感じで。
@mixinflex($justify:space-between,$align:center){display:flex;display:-webkit-flex;//Safari,Android,iOS対応display:-ms-flexbox;//IE対応justify-content:$justify;-webkit-box-pack:$justify;//Safari,Android,iOS対応-ms-flex-pack:$justify;//IE対応align-items:$align;-webkit-box-align:$align;//Safari,Android,iOS対応-ms-flex-align:$align;//IE対応}@mixinのあとに@mixinの名前を、()の中に初期値を設定。{}の中には呼び出したい記述を書いているよ。
で、今回の場合は$justifyと$alignってのがjustify-contentとかalign-itemsの値として入っているよな。
ここは、()内で指定した値が呼び出されるので、指定を変えたいときは()の中の値を指定すればよい。
ちなみにここで設定している()内の値は初期値なので、
呼び出すときに
.hoge{@includeflex;}と書くと、コンパイルされるCSSは以下のようになるのだ。
.hoge{display:flex;display:-webkit-flex;display:-ms-flexbox;justify-content:space-between;-webkit-box-pack:space-between;-ms-flex-pack:space-between;align-items:center;-webkit-box-align:center;-ms-flex-align:center;}これを例えば
.hoge{@includeflex($justify:flex-start,$align:baseline);}とかすると、コンパイルされるCSSは以下のようになるよ。
.hoge{display:flex;display:-webkit-flex;display:-ms-flexbox;justify-content:flex-start;-webkit-box-pack:flex-start;-ms-flex-pack:flex-start;align-items:baseline;-webkit-box-align:baseline;-ms-flex-align:baseline;}なんとなくわかるかね？
position:absolute
これは自分の記事で度々紹介している@mixinなのだけど、せっかくなのでまた載せておく。position:absoluteも毎回行数が多くてめんどくさいので@mixinにして呼び出しちゃいます。
@mixinabsolute($top:null,$right:null,$bottom:null,$left:null){position:absolute;@if$top!=null{top:$top;}@if$right!=null{right:$right;}@if$bottom!=null{bottom:$bottom;}@if$left!=null{left:$left;}}これは$top,$right,$bottom,$leftの値がnullじゃないときは、
topには$topの値を、rightには$rightの値を、bottomには$bottomの値を、leftには$leftの値を入れてねっていう@mixinですな。
使うときはこんな感じ。
.hoge{@includeabsolute($top:0,$left:0);}こうすると、コンパイルされるCSSは
.hoge{position:absolute;top:0;left:0;}こうなる。1行で済むので記述量が減ってだいぶすっきりだな。
メディアクエリ
Scss使ってて一番「便利だな〜〜〜〜〜」と思うのは、これ使ってるときかもしれぬ。
レスポンシブ対応するページを作る際、メディアクエリを使うと思うのだけど、Scssでやるとこんな風な@mixinが作れる。
$min_pc:769px;//デスクトップ(769px)以上@mixinmin_pc{@mediascreenand(min-width:$min_pc){@content;}}$min_pcは変数だな。ここにはメディアクエリでよく使う769pxを入れたぞ。@mixinの中身にこれを当てはめると
@mediascreenand(min-width:769px){@content;}となるな。
で、この@contentというのは、実行処理の@includeから@mixinにスタイルセットを渡すことができる機能だぞ。
-@content : @mixinにスタイルセットを渡す | 集の一期一会
ちょっとなに言ってるかわからない人、わたしもよくわからないけど、つまり、
.hoge{font-size:16px;@includemin_pc{font-size:28px;}}としたとき、コンパイルされるCSSはこうなるのだ。
.hoge{font-size:16px;}@mediascreenand(min-width:769px){.hoge{font-size:28px;}}メディアクエリもクラスに入れ子で書くことができるので、
どのクラスにどんなスタイルが当たっているのか確認するのが格段に楽になるぞ。
ブラウザハック
ブラウザハックもIEバグに苦しんでる時とかに使うよな。
これもメディアクエリと同じ感じで、@mixinにしておくと便利だぞ。
/* IE10 以降にのみ適用される */@mixinIE{@mediaalland(-ms-high-contrast:none){@content;}}/* Safariのみ適用される */@mixinSafari{@mediascreenand(-webkit-min-device-pixel-ratio:0){@content;}}使い方はメディアクエリのときと同様、ハックしたい部分で@includeで呼び出せばおk。
SassとScssの違い
最後にSassとScssの違いを。
さっきの、
.container{display:flex;margin:0auto;width:80%;&__inner{background:#F5CE3F;margin:10px;padding:020px;border-radius:10px;}&__title{font-size:26px;font-weight:bold;}&__text{font-size:14px;}}これは、Sassで書くと
.containerdisplay:flexmargin:0autowidth:80%&__innerbackground:#F5CE3Fmargin:10pxpadding:020pxborder-radius:10px&__titlefont-size:26pxfont-weight:bold&__textfont-size:14pxこうなる。
インデントで入れ子を全部管理しているような感じなので、インデントをずらすとバクッと表示崩れが起きる感じ。
シンプルな記述を好む人はこっちの方が使いやすいのかな？とか思うんだが、
私は{}に慣れ親しんでしまってるので、断然Scssが好きだなぁ。
最後に
ちょっとでもScssの便利さが伝わって、「使えそう」とか「使ってみたい」とか思ってもらえたら嬉しいぞ！
じゃあの〜〜〜〜〜〜