【Sass】Sass ～ 基本編 ～

CSS/SCSS/SASS

■ はじめに

https://dk521123.hatenablog.com/entry/2021/03/15/221755

の続き。

　前回で、Sass（サス）の ネスト構造を取り扱ったので
今回は、基本的な文法を学んでいく。

SassMeister
https://www.sassmeister.com/

目次

【１】＆（アンパサンド）
【２】変数
【３】四則演算
【４】@mixin（ミックスイン）
【５】@import
【６】@function/@return - 関数

【１】＆（アンパサンド）

* 文字列を繋ぐ役割
 => イメージ的に java/javascriptの「+」, VBの「&」

例 

container {
  &-top {

=> container-top

主な使い方 

１）CSS の「セレクタ:hover」を表す際に「&:hover」で使う
２）CSS の「要素.クラス名」を表す際に「&.クラス名」で使う
etc...

サンプル

SCSS 

#main {
    #continer {
        width: 90%;
        &-top {
            font-weight: bold;
        }
    }
    a {
        text-decoration: nobe;
        &:hover {
            font-weight: bold;
        }
        &:active {
            position: relative;
            top: 7px;
            box-shadow: none;
        }
    }
    li {
        &.current {
            color: #f74c90;
        }
    }
}

変換後 

#main #continer {
  width: 90%;
}
#main #continer-top {
  font-weight: bold;
}
#main a {
  text-decoration: nobe;
}
#main a:hover {
  font-weight: bold;
}
#main a:active {
  position: relative;
  top: 7px;
  box-shadow: none;
}
#main li.current {
  color: #f74c90;
}

【２】変数

* 「$」を付ける

サンプル

SCSS 

// 変数を定義した
$textColor: white;
#main {
    color: $textColor;
    .text {
        color: $textColor;
    }
}

変換後 

#main {
  color: white;
}
#main .text {
  color: white;
}

【３】四則演算

* 簡単な四則演算もできる
 => CSS の calc でもできるので参考程度。

サンプル

SCSS 

#main {
    width: 100px - 2px;
}

変換後 

#main {
  width: 98px;
}

【４】@mixin（ミックスイン）

* イメージ的には、複数のCSSを纏めたものって印象。

構文

定義する 

@mixin 【mixin名】

呼び出す 

@include 【mixin名】

サンプル

SCSS 

// 引数なし
@mixin baseButton{
   display: inline-block;
   padding: 8px;
   border:1px solid black;
   background: #fff;
}

// 引数あり
@mixin baseButtonEx($background: #fff){
   display: inline-block;
   padding: 8px;
   border:1px solid black;
   background: $background;
}

.button{
   // 例：引数なし
   &-error {
     @include baseButton;
     background: red;
  }
   &-info {
     @include baseButton;
     background: blue;
  }
   // 例：引数あり
   &-warn {
     @include baseButtonEx(yellow);
  }
   &-defalut {
     @include baseButtonEx();
  }
}

変換後 

.button-error {
  display: inline-block;
  padding: 8px;
  border: 1px solid black;
  background: #fff;
  background: red;
}
.button-info {
  display: inline-block;
  padding: 8px;
  border: 1px solid black;
  background: #fff;
  background: blue;
}
.button-warn {
  display: inline-block;
  padding: 8px;
  border: 1px solid black;
  background: yellow;
}
.button-defalut {
  display: inline-block;
  padding: 8px;
  border: 1px solid black;
  background: #fff;
}

参考文献

https://stand-4u.com/css/sass/mixin.html

【５】@import

* 別ファイルのSCSSファイルを読み込むことができる

サンプル

SCSS 

@import "../common.scss";
@import "../variables.scss";

参考文献

https://qiita.com/k_momotani/items/3a728e8256047377f1fa

【６】@function/@return - 関数

https://www.youtube.com/watch?v=k-Lt_tDNkm0

の動画の z-index の管理が勉強になった。
（z-index関連のバグは、結構多いので、この方法はいいと思った）
その中で独自関数を使っている。

構文

@function 【関数名】($【引数１】(, ...)) {
  @return 【処理】;
}

サンプル

SCSS 

// z-index を自動的に振り分けてくれる
$z-map: normal, mask, modal;

@function getZIndex($target) {
    @return index($z-map, $target)
}

#header {
    z-index: getZIndex(normal);
}
#main {
    z-index: getZIndex(normal);
}
.mask {
    z-index: getZIndex(mask);
}
.modal {
    z-index: getZIndex(modal);
}

変換後 

#header {
  z-index: 1;
}

#main {
  z-index: 1;
}

.mask {
  z-index: 2;
}

.modal {
  z-index: 3;
}

関連記事

Sass ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2021/03/15/221755