Sass本来の力を(自分に)取り戻す

こんにちは🐱
Ateam Hikkoshi samurai Inc.× Ateam Connect Inc. Advent Calendar 2020 10日目の記事はエイチーム引越し侍フロントエンドエンジニアの@acc1ioが担当します。

はじめに

いきなりですが、皆さんSassは使っていますか？
普段CSSを書いている方であれば恐らく殆どの方は使用経験があると思います。

自分は普段業務でもSassを書くことが多いんですが結構多機能にも関わらず普段使わない機能はどうしても記憶から薄れてしまい自分自身Sass本来の力？を失ってしまいました。
そこでこの記事では本来の力を取り戻す為に（自分が忘れかけていた機能）この記事でまとめてみようと思います。

なお、この記事では導入方法の説明はしておりませんのでご容赦ください。

機能集

@extend - セレクタの継承

style.scss

.meowMainText {
    font-size: 1vw;
    color: #ddd;
    line-height: 1;
}

.meowFreeText {
    @extend .meowMainText; // .meowMainTextのスタイルを継承
    letter-spacing: 1.4; //
}

// 出力されるCSS
.meowMainText, .meowFreeText {
  font-size: 1vw;
  color: #ddd;
  line-height: 1;
}

.meowFreeText {
  letter-spacing: 1.4;
}

% プレースホルダーセレクタ

プレースホルダ―セレクタを使って@extendすると、そのセレクタは出力せず、スタイルのみ継承することができます。

style.scss

%meow {
    background-color: #fff;
    padding: 10px 5px;
    margin: 5px;
}
.meow1 {
    @extend %meow;
    color: red;
}
.meow2 {
    @extend %meow;
    color: blue;
}

// 出力されるCSS
.meow2, .meow1 {
  background-color: #fff;
  padding: 10px 5px;
  margin: 5px;
}

.meow1 {
  color: red;
}

.meow2 {
  color: blue;
}

インターポレーション

変数が参照できない場所でも扱えるようにしてくれる機能
変数はあくまでCSSで用いることが出来る値に限られている　例 ) 20px, Arial, #fff ...etc

style.scc

$meowPath: '../meow/mainImages';

#mainMeow {
    background: url(#{$meowPath}.main.png);
}

// 出力されるCSS
#mainMeow {
  background: url(../meow/mainImages.main.png);
}

演算しないようする

style.scss

// 通常
.meowMeow {
    $font-size: 14px;
    $letter-spacing: 2px;
    font: $font-size/$letter-spacing; // ここで14%2でCSSには7が出力されてしまう
}

// インターポレーションを使用
.meowMeow {
    $font-size: 14px;
    $letter-spacing: 2px;
    font: #{$font-size}/#{$letter-spacing};
}

// 出力されるCSS
.meowMeow {
    font: 14px/2px; // :)
}

アンクォートさせる

style.scss

$meowText: "何故猫はこんなに可愛いのか、";

.meowMystery::after {
    content: "#{$meowText + 我々は調査を始めることにした。}";
}

// 出力されるCSS
.meowMystery::after {
  content: "何故猫はこんなに可愛いのか、我々は調査を始めることにした。"; // ダブルクォーテーションが二重になってない！
}

@each繰り返し

style.scss

$meowColours: (
    "meowPink": #dc51ac,
    "meowRed": #d64651,
    "meowOrange": #e55937,
);

@each $meowColour, $i in $meowColours {
    body {
        &.#{$meowColour} {
            background-color: $i;
        }   
    }
}

// 出力されるCSS
body.meowPink {
  background-color: #dc51ac;
}

body.meowRed {
  background-color: #d64651;
}

body.meowOrange {
  background-color: #e55937;
}

配列

style.scss

$array_meowImg: meowDarl1, meowPurple2, meowRed3; //配列
@each $meow_name in $array_meowImg {
    .listItem.#{$meow_name} {
        background-image: url(#{$meow_name}.png);
    }
}

// 出力されるCSS
.listItem.meowDarl1 {
  background-image: url(meowDarl1.png);
}

.listItem.meowPurple2 {
  background-image: url(meowPurple2.png);
}

.listItem.meowRed3 {
  background-image: url(meowRed3.png);
}

関数の定義

style.scss

@function halfSize($value) {
    @return $value / 2;
}

.meowImg {
    width: halfSize(1000px);
}

// 出力されるCSS
.meowImg {
  width: 500px;
}

ちなみにroundなどのネイティブ関数と組み合わせて使うことも出来ます

@debugで結果の出力

style.scss

@debug 177px + 45px; // コンパイルすると２２２pxがコマンドラインに表示される

$meowValue: 9999;
@function debug() {
   @debug: $meowValue; // 9999
   $meowValue: $meowValue - 500;
   @debug $meowValue; // 9499
}

四則演算の結果や関数も出力できるので一旦結果が知りたい時に使えますね

@if - 条件分岐

カッコの中の条件式を評価し、式が真のときだけ@ifブロックの命令文を実行します。

style.scss

$meowCute : true;
.meowVisual { 
    @if $meowCute == true {
        font-size: 20vw; 
    } 
}

// 出力されるCSS
.meowVisual {
  font-size: 20vw;
}

複数の条件分岐を処理する

style.scss

$meowCute : cute;
.meowVisual { 
    @if $meowCute == cute {
        font-size: 100px; 

    } @else if $meowCute == no { 
        font-size: 50px; 

    } @else { 
        font-size: 10px;
    } 
}

// 出力されるCSS
.meowVisual {
  font-size: 100px;
}

@for - 繰り返し構文

構文としてthroughとtoがあり違いは、throughで指定した場合は、その数値を含んで繰り返し、toで指定した場合は、その数値を含まずに繰り返し処理をする。

style.scss

$columns: 5;

@for $i from 1 through $columns {
    .meowColumns-#{$i} {
        width: (100% / $i);
    }
}

// 出力されるCSS
.meowColumns-1 {
  width: 100%;
}

.meowColumns-2 {
  width: 50%;
}

.meowColumns-3 {
  width: 33.3333333333%;
}

.meowColumns-4 {
  width: 25%;
}

.meowColumns-5 {
  width: 20%;
}

@while - 繰り返し構文

条件式が真を返す限りブロック内を実行します。

style.scss

$meowCount: 0;

@while $meowCount < 5 {
    .meowBody-#{$meowCount} {
        width: (10 * $meowCount) + px;
    }

    $meowCount: $meowCount + 1;
}

// 出力されるCSS
.meowBody-0 {
  width: 0px;
}

.meowBody-1 {
  width: 10px;
}

.meowBody-2 {
  width: 20px;
}

.meowBody-3 {
  width: 30px;
}

.meowBody-4 {
  width: 40px;
}

まとめ

いざこうしてまとめてみると「こんなのあったな」とか「ほぼ初見です」というものもあり自分なりにまとめられて良かったなと思います。
せっかく色々機能があるのに使わずに忘れてしまうのは非常に勿体無いので積極的に業務等で使っていきたいですね！

今回まとめた数は少なめですが、調べていくうちに結構知らない事が出てきて全部まとめようとすると量が大変なことになるのでこのくらいで勘弁していただきたいです。
以上！Ateam Hikkoshi samurai Inc.× Ateam Connect Inc. Advent Calendar 2020 10日目の記事でした🐈

次回予告

明日のカレンダーはエンジニアの@ex_SOULさんです！お楽しみに！

参考にさせていただいたサイト、本

SMART
sass-lang
Web製作者の為のSassの教科書