SCSSまとめ集

目次

Sass,SCSSとは？
SCSS 基本文法集

1. Sass, SCSSとは？

Sassとは？

CSSを拡張したメタ言語(2006年に誕生)の一種。
記法として２種類（SASS, SCSS）の２種類がある。
勘違いしやすいが、SassはCSSを拡張したメタ言語、SASSとSCSSは記法のこと。

SASS, SCSS それぞれの記法

sass

ul
  margin: 10px
  li
    margin-top: 5px

scss

ul{
  margin: 10px;
  li{
    margin-top: 5px;
  }
}

2. SCSS 基本文法集

セレクタ
コメント
変数
演算
インポート
データ型
条件分岐
繰り返し
スタイルの継承

セレクタ

階層構造で書くことが可能で。
子セレクタに「&」をつける→「&」の箇所が親セレクタになる。
子セレクタに「&」をつけない→親セレクタとスペースになる。

scss

ul{
  margin: 10px;
  li{
    margin-top: 5px;
    &.left{
      margin-left: 5px;
    }
  }
}

//トランスパイル後
ul {
  margin: 10px;
}
ul li {
  margin-top: 5px;
}
ul li.left {
  margin-left: 5px;
}

コメント

１行ずつ or 複数行コメントアウトすることができる。

scss

main {
  //１行ずつコメント
  //border: 1px solid #000;

  /* 複数行コメント */
  /*
  margin: 10px;
  */
}

変数

「$変数名:〜;」で宣言できる。
共通させたいスタイル（色、長さ、フォント等）がある時に使うと効果的。
どこからでも参照可能な変数をグローバル変数、ブロック内のみ参照可能な変数をローカル変数と呼ぶ。

scss

$basic_color: #000000;
$basic_font-size: 14px;
.car {
  color: $basic_color;
  font-size: $basic_font-size;
}

//トランスパイル後
.car {
  color: #000000;
  font-size: 14px;
}

変数を値の一部として使用したい場合

scss

$img_path: '../img/';

.item {
  background: url(#{$img_path}back.png);
}

//トランスパイル後
.item {
  background: url(#../img/back.png);
}

※変数の上書きについて

以下、３種類の上書きについて記載。

グローバル変数はそのまま、ローカル変数によりブロック内部のみ値が変わる

scss

$width: 100px;

.box1{
  $width: 200px;
  width: $width;
}
.box2{
  width: $width;
}

//トランスパイル後
//グローバル変数の値は変わらない
.box1{
  width: 200px;
}
.box2{
  width: 100px
}

!default　同名の変数が既に定義されてある場合、上書きしない

scss(!defaultを使用)

$width: 100px;

.box1{
  $width: 200px !default;
  width: $width;
}

//トランスパイル後
.box1{
  width: 100px;
}

!global　同名の変数が既に定義されてある場合、上書きする

$width: 100px;

.box1{
  $width: 200px !global; 
  width: $width;
}
.box2{
  width: $width;
}

//トランスパイル後
.box1{
  width: 200px;
}
.box2{
  width: 200px;
}

演算

加算、減算、乗算、除算、剰余ができます。

scss

$base_width: 100px;

.base{
  /* 加算 */
  width: $base_width + 10px;
  /* 減算 */
  width: $base_width - 5px;
  /* 乗算 */
  width: $base_width * 2;
  /* 除算 */
  width: $base_width / 2;
  /* 剰余 */
  width: $base_width % 3;
}

//トランスパイル後
.base{
  /* 加算 */
  width: 110px;  //(100px + 10px)
  /* 減算 */
  width: 95px;   //(100px - 5px)
  /* 乗算 */
  width: 200px;  //(100px * 2)
  /* 除算 */
  width: 50px;   //(100px / 2) 
  /* 剰余 */
  width: 1px;    //(100px % 3)
}

インポート

他のSCSSファイルをインポートすることができます。

scss

//色々な書き方が可能
@import url(common.scss);
@import url("common.scss");
@import "common.scss";
@import 'common.scss';

データ型

以下のようなデータ型ある
- 数値(Number)型
- 真偽(Boolean)型
- 色(Color)型
- 文字列(String)型
- 配列(List)型
- 連想配列(Map)型
- 関数(Function)型
- Null型

以下、それぞれの型の例

scss


//数値(Number)型
$number1: 10;
$number2: 1.1;
$number3: 100px;
$number4: 50%;
$number5: 2em;

//真偽(Boolean)型
$boolean1: true;
$boolean2: false;

//色(Color)型
$color1: blue; 
$color2: #ff0000;
$color3: rgba(255, 255, 0, 0.5);
$color4: hsla(110, 100%, 30%, 70%);

//文字列(String)型
$string1: 'Sass';   //シングルクォートで囲まれた文字
$string2: "scss";   //ダブルクォートで囲まれた文字
$string3: auto;

//配列(List)型
$list1: 'hoge' 'fuga' 'piyo';   //スペースで区切る
$list2: red, blue, yellow;      //カンマで区切る
$list3: (10px)(20px)(30px);     //カッコで区切る
$list4: ('hoge' 'fuga' 'piyo'); //カッコで囲んでもOK
$list5: ['hoge' 'fuga' 'piyo']; //カギカッコで囲んでもOK
$list6: [[black, lime, fuchsia, olive], [blue, aqua], [yellow, red]]; //多重配列もOK

//連想配列(Map)型
$map1:(
  google:'https://www.google.com/',
  yahoo:'https://www.yahoo.co.jp/',
  amazon:'https://www.amazon.co.jp/'
);

//関数(Function)型
@function myFunction($val: 1){
  @return $val * 100;
}

//Null型
$null1: null;

ちなみに、配列(List)型や連想配列(Map)型の値は、以下のような記述で取得できる。

scss(配列)

$colors: red, blue, yellow;

//配列　単体を取得
main {
  color: nth($colors, 1);  //配列のインデックス番号は1からスタートする
}

//トランスパイル後
main {
  color: red;
}

//配列　複数を取得
@each $color in $colors {
    .#{$color}-bg {
        background: #{$color};
    }
}

//トランスパイル後
.red-bg {
  background: red;
}
.blue-bg {
  background: blue;
}
.yellow-bg {
  background: yellow;
}

scss(連想配列)


$colors: (
  color1: red,
  color2: blue,
  color3: yellow
);

//連想配列　単体を取得
main{
  color: map-get($colors, 'color1');
}

//トランスパイル後
main{
  color: red;
}

//連想配列　複数を取得
//ここで書かれてある$key, $colorは、連想配列のKeyとValueに対応してある(任意の変数名を設定可能)
@each $key, $color in $colors {
    .#{$key} {
        color: $color;
    }
}

//トランスパイル後
.color1 {
  color: red;
}
.color2 {
  color: blue;
}
.color3 {
  color: yellow;
}

条件分岐

他言語同様、if~elseを使い条件分岐することができる。
条件演算子、論理演算子は以下の通り。

条件演算子

演算子	意味
==	左辺と右辺が等しい
!=	左辺と右辺が等しくない
>	左辺は右辺より大きい
<	左辺は右辺より小さい
>=	左辺は右辺以上
<=	左辺は右辺以下

論理演算子

演算子	意味
and	かつ
or	または
not	否定

scss

$var: 1;

main{
  @if $var == 0{
    color: red;
  }
  @else if $var == 1{
    color: blue;
  }
  @else {
    color: yellow;
  }
}

//トランスパイル後
main{
  color: blue;
}

繰り返し

他言語同様、繰り返し処理を行うことができる
@for, @while, @eachの３種類。
- @forは、@for ~ through, @for ~ toの２種類がある

scss(for文)

//@for
//@for ~ through
@for $val from 0 through 2{
  .frame_#{$val}{
    z-index: $val;
  }
}
//@for ~ to
@for $val from 0 to 2{
  .frame_#{$val}{
    z-index: $val;
  }
}

//トランパイル後
.frame_0{
  z-index: 0;
}
.frame_1{
  z-index: 1;
}
.frame_2{
  z-index: 2;
}

scss(while文)

//@while
$val: 3;

@while $val > 0{
  .frame_#{$val} {
    z-index: $val;
  }
  $val: $val - 1;
}

//トランスパイル後
.frame_3{
  z-index: 3;
}
.frame_2{
  z-index: 2;
}
.frame_1{
  z-index: 1;
}

scss(each文)

//@each
$images: 'hoge' 'fuga' 'piyo';

@each $image in $images{
  .box-#{$image}{
    background-image: url(../img/#{$image}.png);
  }
}

//トランスパイル後
.box-hoge{
  background-image: url(../img/hoge.png);
}
.box-fuga{
  background-image: url(../img/fuga.png);
}
.box-piyo{
  background-image: url(../img/piyo.png);
}

スタイルの継承

@extendを使用し、他セレクタのスタイルを継承することが可能

scss(extendを使用)

.box1{
  width: 100px;
}
.box2{
  @extend .box1;
  height: 200px;
}

//トランスパイル後
.box1, .box2{
  width: 100px;
}
.box2{
  height: 200px;
}

@mixinを使用することで引数を指定したスタイルの継承を行うことも可能（関数についてはまとめ2で解説）

scss(mixinを使用)

@mixin box($width: 100px, $bgcolor: #000){
  width: $width;
  background: $bgcolor;
}
.box1{
  @include box;
}
.box2{
  @include box(200px, #ff0000);
}

//トランスパイル後
.box1{
  width: 100px;
  background: #000;
}
.box2{
  width: 200px;
  background: #ff0000;
}