Sassの始め方2022年版
この記事はアンテクアドベントカレンダー2022の18日目の記事です。
https://adventar.org/calendars/7821
みなさまこんにちは。とうとう私めの今年最後のアドベントカレンダー記事になります。
いろいろ考えてみたはみたのですが、そういえばアンテク正社員になる前に書いたこの記事、もう内容が古いなー、アップデートしたいなと思っていたのを思い出したので今回は新しいやり方を書きますね。
https://qiita.com/layzy_glp/items/e053796e6a81cb222375
改めてSassとはなんぞや
アンテク技術ブログに以前あったこの記事を読んで頂くと割と詳しくわかりますが、ササッと説明しますね。
ここではSCSSと言っていますが、SCSSはSassの書き方の一つで、今日日純粋なSassを書く人を見かけたことがないのでSass = SCSSの認識でいいとは思いますが、細かくはちょっと違います。
ごくごく簡単に言うと「中括弧（今どきは波括弧と言うらしいが‥‥）を使わないcss」です。
Sass公式ページの例を使うのですが、まずcssでこんな書き方するじゃないですか。
body {
font: 100% Helvetica, sans-serif;
color: #333;
}で、それがSassだとこんな感じにかけますよ、ってことです。
body
font: 100% Helvetica, sans-serif
color: #333ご覧の通り中括弧とセミコロンがないものになります。
これだと何が便利なのかわかりづらいと思いますが、ネスト（入れ子）したCSSを書くときに絶大な威力を発揮します。
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}CSSだとこんな感じですが、Sassだとこうですね。
nav
ul
margin: 0
padding: 0
list-style: none
li
display: inline-block
a
display: block
padding: 6px 12px
text-decoration: noneおわかりになられるでしょうか？
nav要素の子要素をまとめて指定しているわけですね。Bootstrap.cssだとかtailwindcssがなかった時代はゴリゴリネストさせまくったCSSが流行っていたので重宝されてたんですよ。
ただ、この書き方、CSSしか書いたことない人には頭に入ってきづらいのでちょっとCSS寄りに書けるようにしたのがSCSSってわけですね。
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li { display: inline-block; }
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}この方がCSSみがあって親しみを覚えやすいんじゃないでしょうか？ 結局市民権を得たのはこっちの書き方なので、こっちのほうが主流になっていくことになります。
あとは変数使えたり、mix-inできたりとか特徴的な機能があるのですが、CSS側にもその機能が取り込まれたのであんまりSassならでは！って感じでもなくなりました……
そろそろはじめ方の話をしてくれ
以前書いた記事では「ruby sassを使うやり方」と「node-sassを使うやり方」を紹介したんですが、node-sass自体がオワコンになってしまいました……
なので今は「dart-sass」を使う方法が推奨されています。
https://github.com/sass/dart-sass/releases/tag/1.57.0
とはいえ、これもnpmを使うのでnode-sassと導入方法はだいたい同じというか、よりシンプルになりました。
Node.jsのインストールはNode.jsのインストーラー使うなり、各パッケージマネージャーを使うなりすればすんなり入ると思います。
https://nodejs.org/ja/download/
Node.jsのインストールが済むとコマンドラインで npm というコマンドが使えるようになっているはずです。そこで、
$ npm install -g sassとするだけです。
うまくいくと sass というコマンドが使えるようになるので
$ sass input.scss output.cssで input.scss に書いたSCSSが output.css にCSSとして変換して出力されます。
つーても、今はwebpackなりLaravel-mixなりでまとめてトランスパイルすることがほとんどなので実際の現場ではあまりこのやり方使わないかもですね……
おわりに
というわけで過去の訂正記事でした！
アンテクではフロントエンドエンジニアやフロントエンドもできるサーバーサイドエンジニアをどしどし募集しています！
「え、フロントエンドちょっと興味あるけど自信ないな〜」って方もアンテクで働いているうちになんとなくフロントエンドできるようになったり、AWSできるようになったりすると思うので、成長したいと思っている人はぜひお声がけください！
