【SCSS】基本的な書き方

基本的な書き方

入れ子にする
{}の中に子要素のタグ（class、IDなど）を書くと勝手に親要素を認識してくれる。

index.html

<div>
 <p>パンケーキ食べたい</p>
</div>

style.scss

div {
 background: red;
 width: 400px;
 height: 400px;
 p {
   color: white;
   font-weight: bold;
   text-align: center;
 }
}

▼出力結果

style.css

div {background: red; width: 400px; height: 400px;}
div p {color: white; font-weight: bold; text-align: center;}

「&」でくっつける
上の基本的な書き方だと親と子の形でしか書けないので、下の例のようにしたい場合は「&」で対応する。

▼こうやって吐き出させたい

style.css

div {width: 300px; height: 200px; background: red;}
div:before {content: ''; display: block; width: 300px; height: 150px; background: blue;}
div.hoge {width: 150px; height: 29px; background: yellow;} /* classがhogeのdiv */
div .hoge {width: 120px; height: 53px; background: green;} /* divの中にいるclassがhoge */

▼&を使ってこうやって書く

style.scss

div {
 width: 300px;
 height: 200px;
 background: red;
 &:before {
   content: '';
   display: block;
   width: 300px;
   height: 150px;
   background: blue;
 }
 &.hoge { /* classがhogeのdiv　&がついてるからdivと.hogeがくっつく */
   width: 150px;
   height: 29px;
   background: yellow;
 }
 .hoge { /* divの中にいるclassがhoge　&がついていないのでdivと.hogeがくっつかない */
   width: 120px;
   height: 53px;
   background: green;
 }
}
​

便利ポイント

変数

変数が使える。

/* 変数宣言の仕方*/
$変数名: 値;

style.scss
$main_color: red;
$sub_color: blue;
$font_size: 16px;

div {
 color: $main_color;
 font-size: 18px;
 p {
   border: 1px solid $main_color;
   color: $sub_color;
   font-size: $font-size;
 }
} 

▼出力結果

style.css

div {color: red; font-size: 18px;}
div p {border: 1px solid red; color: blue; font-size: 16px;}

条件分岐

条件分岐できる。

if文

style.scss
div {
 @if 1 + 1 == 2 { width: 100%; } // 1+1=2なのでtrue
 @if 1 > 2 {width: 50%;} // 1は2より小さいのでfalse
 @if null {width: 10%;} // nullはfalse
}

▼ 出力結果

style.css

 div {
   width: 100%;
 }

elseとelse ifも使える
style.scss
$color = red;
div {
 @if $color == blue {
   background: blue;
 } @else if $color == yellow {
   background: yellow;
 } @else if $color == red {
   background: red;
 } @else {
   background: white;
 }
}

▼出力結果

style.css
div {
 background: red;
}

反復処理

for文 

​for.scss

@for $i from 1 through 3 {
 .hoge-#{$i} {width: 100px * $i;} // 文字列として$iを使う場合（注:1）は「$i」ではなく「#{$i}」にする
}

▼出力結果

for.css
.hoge-1 {width: 100px;}
.hoge-2 {width: 200px;}
.hoge-3 {width: 300px;}

while文 

while.scss

$i: 1;
@while $i < 4 {
 .hoge-#{$i} {width: 100px * $i;}
 $i: $i + 1;
}

▼出力結果

while.css
.hoge-1 {width: 100px;}
.hoge-2 {width: 200px;}
.hoge-3 {width: 300px;}

each文

構文
@each $var in <list> 
/* $var -> 任意の変数 */
/* <list> -> カンマ区切りのリスト。リストの数だけ繰り返す
each.scss
@each $neko in mike, kuro, bus {
 .#{$neko}-icon {
   background-image: url('/images/#{$neko}.png');
 }
}

▼出力結果

each.css
.mike-icon {
 background-image: url('/images/mike.png');
}
.kuro-icon {
 background-image: url('/images/kuro.png');
}
.bus-icon {
 background-image: url('/images/bus.png');
}

関数

関数が使える。

/* 関数宣言の仕方 */
@mixin 関数名(引数１, 引数２, ...) {
 関数の中身
}
/* 関数の呼び出し方 */
@include 関数名(引数１, 引数２, ...);

▼今回作った関数

メディアクエリ

media_queries.scss

$breakpoint-tablet: 1024px; /* 変数宣言 */
$breakpoint-mobile: 640px; /* 変数宣言 */

/* $break-point以下の時に@contentを適用 */
@mixin max-screen($break-point) { 
 @media screen and (max-width: $break-point) {
   @content;
 }
}
/* $break-point以上の時に@contentを適用 */
@mixin min-screen($break-point) { 
 @media screen and (min-width: $break-point) {
   @content;
 }
}
/* $break-point-min以上、$break-point-max以下の時に@contentを適用 */
@mixin screen($break-point-min, $break-point-max) { 
 @media screen and (min-width: $break-point-min) and (max-width: $break-point-max) {
   @content;
 }
}
/* 使用例 */
div {
 @include max-screen($breakpoint-mobile) { /* 640px以下のとき */
   width: 100%;
 }
 @include min-screen($breakpoint-tablet) { /* 1024px以上のとき */
   width: 50%;
 }
 @include screen($breakpoint-mobile, $breakpoint-tablet) { /* 640px以上1024px以下のとき */
   width: 80%;
 }
}

▼出力結果

media_queries.css
@media screen and (max-width: 640px) {
 div {width: 100%;}
}
@media screen and (min-width: 1024px) {
 div {width: 50%;}
}
@media screen and (min-width: 640px) and (max-width: 1024px) {
 div {width: 80%;}
} 

ベンダープレフィックスの付与 

vender_prefix.scss
$set-prefix: '', '-moz-', '-webkit-'; /* つけたいやつを変数に入れる */

// プロパティに付与
@mixin ProprtySetPrefix($name, $value) {
 @each $prefix in $set-prefix {
   #{$prefix}#{$name}: $value;
 }
}
// 値に付与（flex、グラデーションに対応できていない...）
@mixin ValueSetPrefix($name, $value) {
 @each $prefix in $set-prefix {
   #{$name}: #{$prefix}$value;
 }
}
/* 使用例 */
div {
 @include ProprtySetPrefix(transition, .2s);
}

▼出力結果

vender_prefix.css
div {
 transition: .2s;
 -moz-transition: .2s;
 -webkit-transition: .2s;
}

フォントの読み込み

font.scss

@mixin font-face($name, $path, $weight: null, $style: null, $exts: otf ttf) {
 $src: null;
 $formats: (
   otf: "opentype",
   ttf: "truetype"
 );
 @each $ext in $exts {
   $format: map-get($formats, $ext);
   $src: append($src, url(quote($path)) format(quote($format)), comma);
 }
 @font-face {
   font-family: quote($name);
   font-style: $style;
   font-weight: $weight;
   src: $src;
 }
}
/* 使用例 */
@include font-face('Note Serif Japanese', '../../../../fonts/NotoSerifCJKjp-Regular.otf', 400, null, otf);
p {
 font-family: 'Noto Serif Japanese', sans-serif;
}

▼出力結果

font.css
@font-face {
 font-family: 'Noto Serif Japanese';
 font-weight: 400;
 src: url(../fonts/NotoSerifCJKjp-Regular.otf) format("opentype");
}
p {
 font-family: 'Noto Serif Japanese', sans-serif;
}

参考

https://qiita.com/nchhujimiyama/items/8a6aad5abead39d1352a