ゆずめも

メモ的なブログです。主に勉強した事について書いてます。

数年振りにcssについて調べてsassを書いてみた

CSS

久しぶりにWebページを作る仕事が来て js関連は調べてるけど、css関連は全く知らないのでcss周りについてちょっと調べた

情報収集

とりあえずパイが多いやつってなんなんだろうと思って調べた

ashleynolan.co.uk

PostCSSはなんかbabel的なやつでしょという理解はあったけどSass, Lessは全くわからなくてtwitterで聞いたら教えてもらえた

教えてもらったしsass使ってみることにしました

sassについて

なんでsass(scss)って書かれてるのかと思ったら記法が２つあるみたいで

インデントでブロックを表すもの（Sass）と、cssのように{}でブロックを表すもの（Scss）がある

sassを使ってみる

（sassというか書いてるのscssですが） そもそもはsassはrubyで動かすツールみたいですが、フロントエンドなんだからNode.js使いたいですね

というわけでnode-sassを使うことにしました

www.npmjs.com

インストール

適当にプロジェクトのディレクトリを作ってnpmからツールを取ってくる

yarn add -D node-sass

使ってみる

scssはセレクタを入れ子にできるみたい

// src/style.scss
div {
  color: red;
  p {
    color: blue;
  }
}

これをnpx node-sass src/style.scss dist/style.cssでコンパイルすると下みたいな感じになるらしい

/* dist/style.css */
div {
  color: red; }
  div p {
    color: blue; }

アウトプット見るとclassを入れ子にしていくことでnamespaceっぽいことができるイメージなんだろうな

まとめ

とりあえず動かせることはできた
sassを使うことで入れ子にしたり、変数使ったり、forでコード生成したりもできるらしい

最初に貼ったsurvey見ても、結構生css使ってる人とか多いっぽいしbemで書けばなんとかなるなと考えている

なのでもうちょっと触ってみてプロジェクトに導入するかどうかを決めようと思ってる

もしこれ読んだらSassの素晴らしさがわかるみたいなのあれば教えていただけると嬉しいです