SCSS でもっといろいろやりたいというメモ

SCSS に慣れてきて、逆にもし使えないとなるとちょっと面倒だな、と思うくらいには馴染んできたところですが、実際入れ子と変数しか使えていないので、もっとちゃんとしっかり使いたいと思い、いろいろ調べてみました。ただ、到底すぐには覚えられないので、あとから読み返すためのメモ。ちなみに調べたといいつつ、ほぼドットインストールですが。

最初。if else文。こんな感じに書く。

$onigiri: true;
$sushi: 20;

.box {
　　border: 3px solid black;
    @if $onigiri == true {
        border-radius: 10px;
    } @else {
        border-radius: 0;
    }

　　@if $sushi <= 10 {
	color: blue;
　　}
　　@else if $sushi <= 20 {
	color: yellow;
　　}
　　@else {
	color: red;
　　}
}

変数の中身によって、適用される css が変わる。上でいうと、onigiri が true のときは box の角が丸くなっておにぎりっぽくなる。true じゃなかったら角はとがる。sushi が10以下だったら青、11から20だったら黄色、21以上は赤になる。寿司食べすぎ注意、的なイメージ。ちなみに 11 < $sushi < 20 みたいな、～から～まで、っていう書き方は、なんか Atom がコンパイルしてくれなかったから、多分できない。

要は後から変数を変えるときに備えて、先に css を整えておきますよ、っていうのができる、ということでしょうか。なんだろう、お客さんが仕様をどうするか迷ってて、ギリギリまでどっちになるかわからないからどっちも仕込んでおこう、的な？ちょっと使う場面が思いつかないですが、うまく使えれば面白いことができる気はします。なのでどういう使い方があるのか、調べようと思います。がんばれ明日の自分。そしてまたメモ代わりに記事を書こうと思います。がんばれ近未来の自分。

次。for文、while文。

@for $i from 10 through 20 {
    .fs#{$i} {
        font-size: #{$i}px;
    }
}


$img: 1;
@while $img <= 10 {
    .fs#{$img}{
        width: 100px * $img;
    }
    $img: $img + 1;
}

繰り返しの処理を自動でやってくれる。上でいうと、for文では、.fs10～20 というクラスを作って、中身を font-size: 10～20px にしてくれます。while文では、.img1～10 というクラスを作って、中身が width:100～1000px になるようにしています。中身はともかく、画像をずらっと並べるページを制作時に、画像1枚ずつのクラスが欲しければさくっと作ることができる、みたいな使い方はできそうですね。

次。each文。

$drinks: coffee, tea, cola, water;

@each $drink in $drinks {
    .#{$drink}-img { background: url("#{$drink}.png"); }
}

もしくは

@each $drink in coffee, tea, cola, water {
    .#{$drink}-img { background: url("#{$drink}.png"); }
}

先に変数の中身を決めておいて、each文の中で一つずつ取り出し、クラスを作る。上でいうと、drinks という変数の中身を４つ記載し、それらを drink という変数に一つずつ当てはめて、それぞれクラスを作り、さらに background も個別で png を指定する、という内容。これも画像をしきつめるページを作るときに使えそう。変数を数字にするときは for文ないしwhile文、変数を単語にするときは each文みたいな感じでしょうか。

関数。@function。

$containerwidth: 1100px;
$allcontents: 3;

@function getcontentswidth($width, $count){
    $padding: 50px;
    $contentswidth: floor(($width - ($padding * ($count - 1))) / $count);
    @return $contentswidth;
}

.contents {
    display: inline-block;
    width: getcontentswidth($containerwidth, $allcontents);
}

特定の計算をするシステムを、あらかじめ作れる。上でいうと、contents というクラスの width を、全体の幅(containerwidth)やコンテンツの数(allcontents)が変わっても自動で計算してくれるようになっています。この場合は全体の幅は 1100px、コンテンツの数は3つですね。流れとしては、最初に記述した変数の、$containerwidth と $allcontents が .contents クラスの中のwidth に入り、その状態で getcontentswidth が @function に入り、$containerwidth と $allcontents がそれぞれ同じ位置にある $width と $count に入り、@function の中で $width と $count が計算式に入り、はじき出された数字が $contentswidth に入り、@return で $contentswidth が getcontentswidth に戻り、再び .contents クラスに数字という形で入る、という感じ。文章にするとわけわからないですね。考えつつ感じましょう。フィールアンドシンク。

あと、記述が増えてきた場合、変数部分と関数部分でファイルを分けてあげると、後々編集するときに楽になるかもしれないです。そういうときは、以下のようにします。

１．仮に変数部分の cssファイルを「setting.scss」、関数部分の cssファイルを「function.scss」とすると、それぞれ「_setting.scss」「_function.scss」というように頭にアンダーバーをつける。

２．大元の「style.scss」に、「@import “setting”;」「@import “function”;」と記述してあげる。

簡単ですね。どういう風に書いたっけ、っていうときに、いちいち上の方まで見に行くのは、文章量が少ないときはいいですけど肥大化してくるとひと手間なので、いっそ最初から分割してあげてもいいかもしれないですね。

次。@mixin。

@mixin round {
    border-radius: 4px;
}

.label {
    font-size: 12px;
    @include round;
}

引数も使える

@mixin round($radius:4px) {
    border-radius: $radius;
}

.label {
    font-size: 12px;
    @include round(5px);
}

重複して使いそうな内容を、@mixin でまとめて記述しておいて、使う箇所に @include で引っ張ってくる、みたいな感じ。html の方で、class=”container main” みたいにクラスを二つ指定しなくても、css の方で処理できるし、一目で内容が共通しているのがわかるのがいいぞ、みたいなイメージ。いざ css にコンパイルしたときに、記述量が膨らみそうな気がするけど、実用度は高そう。

最後。@extend。

.msg {
    font-size: 12px;
    font-wight: bold;
    padding: 2px 4px;
    color: white;
}

.errorMsg {
    @extend .msg;
    background: red;
}

.warningMsg {
    @extend .msg;
    background: orange;    
}

@mixin では、@include を書いたところに内容を持ってくるけど、@extend は、@extend で指定したクラスに、@extend を書いたクラスを追加する、みたいな感じ。上でいうと、コンパイルすると .msg, .errorMsg, .warningMsg{}みたいになる。@mixin より @extend の方が効率よさそう。

ひとまずこれくらい。あとはそれぞれ、具体的にどういう場面で使うのがいいのかを調べたいです。今のところ @extend くらいしか使い道なさそう。function はうまいこと使いこなせるとかっこいいけど、パパッと記述できるようになるまでが大変そう。そんな感じ。内容をまとめるのにとても時間がかかってしまったので、その分多少なりとも知識に定着していますように。

かしこ