Sassか刺されるか、仁義なき戦い(初めてCSSのSass使ったら便利だった)

Sassか刺されるか、仁義なき戦い(初めてCSSのSass使ったら便利だった)

2019.09.13 | Develop, Staff Diary

上から読んでも下から読んでもなすですなこんにちは、幾度となく修羅場を潜り抜けてきた、二代目の辻元気です。
さて、うちの事務所のコーディング環境ではCSSをSass形式で記述して、node-sassでコンパイルして使用しています。

4月に入社するまで自分は静的なCSSのみで記述していたので、まったく新しいSassという考え方を勉強しながら日々コーディングをしています。
と言っても今までのCSSの書き方に似ているし(というかそのまま書けるし)、入れ子(ネスト)の書き方も少しづつ慣れてきたので今後はスピードアップして書けそうな気がします。

そんなわけで、修羅場から学んだSassの便利な基本的な機能をメモしておきます。
使用方法やインストールの際に参考にしたウェブサイトもまとめておきます。

Contents

テンプレート的に繰り返し使えて、上書きも簡単にできる瞬殺系@mixin


ミックスインの機能を使えば、頻繁に出現するスタイルを簡単に呼び出せるので、何度も書く手間を省けます。

コンパイル前

//ミックスインでオジキを定義
@mixin ojiki {
  width: 10rem;

    // TB
  @media only screen and (max-width:$size-tb) {
    width: 6rem;
  }

  // SP
  @media only screen and (max-width:$size-sp) {
    width: 4rem;
  }
}

//修羅場にオジキを召喚
.shuraba {
  @include ojiki;
}

コンパイル結果

//修羅場に召喚されたオジキ(サイズで体型が変化)
.shuraba {
  width: 10rem;

    // TB
  @media only screen and (max-width:$size-tb) {
    width: 6rem;
  }

  // SP
  @media only screen and (max-width:$size-sp) {
    width: 4rem;
  }
}

繰り返し処理に便利な@for@while@eachが使えるから結果的に短く記述できる

@forでお金を単純に増やす方法


単純にお金を1万円〜100万円に増やしたい状況。
普通にアナログチックに書くと、.money1〜100枚で定義しないとお金が増えない。
苦労ばかり増えていく。
しかし!!!この魔法の計算式を使えば…

//お金が増える魔法の計算式
@for $i from 1 through 100 {
  .money#{$i} {
    font-size: #{$i}px;
  }
}

@whileで一定期間、札束の高さが増し続ける

増えれば増えるほど嬉しい札束!
通常だと頑張って.satsutaba1〜定義しないといけない。
そんな苦労が、この魔法の計算s

//札束が増し続ける魔法の計算式
$height: 1; //初期値
@while $height < 50 { //50枚になるまで
  .satsutaba#{$height} {
    margin-top: $height + px;
  }
  $height: $height + 1; //一枚づつ札束が増えていく魔法の言葉
}

@eachで名簿から舎弟の画像を読み出す

どうしても、舎弟の画像を名簿から表示しないといけない究極な状況。
それがこの魔法のk

//うちの事務所の舎弟の名簿を作成できる魔法の計算式
$shateiList: takashi, kohei, kiyoharu, gonzou;

//舎弟の人数分画像を表示
@each $shatei in $shateiList {
  .shatei-#{shatei} {
    background: url(#{shatei}.png) no-repeat left top;
    text-decoration: line-through;
  }
}

結果的に、隆、康平、清春、権蔵の4人の画像が簡単に表示される。
これが事務所全員と考えると、いかに楽ができるか…!

オジキの熱い魂を簡単に引き継げる、@extendが便利

@extend(エクステンド)は、つまり継承。
他で定義したスタイルを簡単に引き継ぐことができる、いわばオジキの魂を、簡単に二代目にも受け継げるやつ!

コンパイル前

//継承元のオジキ
.ojiki {
  display: none;
  opacity: 0;
  visibility: hidden;
}

//継承先の二代目
.nidaime {
  @extend .ojiki;
}

コンパイル結果

//オジキと同じ熱い魂を持っている、オジキーーーー!
.ojiki, .nidaime {
  display: none;
  opacity: 0;
  visibility: hidden;
}

ご覧の通り、二代目にオジキの愛が受け継がれている…!
もっと保守性を高める書き方もできちゃうのが最高だ!
たとえば、オジキとオジキが持っている土地の権利書を、
おじき本人とは分けて管理できるイメージ。
これは便利だわぁ。使うわぁ。

エクステンドのプレースホルダーセレクタを作る

//オジキの土地の権利書
%kenrisho {
  display: none;
  opacity: 0;
  visibility: hidden;
}

//オジキ
.ojiki {
  @extend %kenrisho; //権利書GET
  width: 10rem;
}

//二代目
.nidaime {
  @extend %kenrisho; //なぜか二代目も同じ権利書GET
  height: 5rem;
}

コンパイル結果

//オジキと同じ土地の権利書を(何故か笑)二代目も持っている
.ojiki, .nidaime {
  display: none;
  opacity: 0;
  visibility: hidden;
}

//オジキ
.ojiki {
  width: 10rem;
}

//二代目
.nidaime {
  height: 5rem;
}

Sassがっす!!!

超参考にした便利な熱い魂を感じるサイト

 

やばい、すごい使える Sass

これからも、Sassさんにはお世話になります。
よろしくお願いしまーす!

辻 元気
Written by
辻 元気
Categories
Written by