Sassか刺されるか、仁義なき戦い（初めてCSSのSass使ったら便利だった）
こんにちは、幾度となく修羅場を潜り抜けてきた、二代目の辻元気です。
さて、うちの事務所のコーディング環境では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: Syntactically Awesome Style Sheets
https://sass-lang.com/ - Sass
Wikipedia
https://ja.wikipedia.org/wiki/Sass - Sass（SCSS）でCSSコーディングを効率化・メリットと使い方を知る
Qookie Tech
https://tech.qookie.jp/posts/info-sass-scss-feature/ - これからはcssはSassで書こう。
@m0nch1氏
https://qiita.com/m0nch1/items/b01c966dd2273e3f6abe - 【初心者向け】ここから始める「Sass」の使い方まとめ
Web Design Trends
https://webdesign-trends.net/entry/9323 - Sassを使うメリットとよく使う機能を５つだけ厳選！
HPcode
https://haniwaman.com/sass/ - Web制作者のためのSassの教科書 改訂2版 Webデザインの現場で必須のCSSプリプロセッサ
平澤 隆(著), 森田 壮(著)
https://www.amazon.co.jp/dp/4295002356/
これからも、Sassさんにはお世話になります。
よろしくお願いしまーす！
