CSSだいたい覚えたのでSASSをインストールしてみる

2022年4月5日 00:35

仕事でCSSいじるにも関わらずCSSなんとなく苦手マンです。

個人開発やチーム開発でたまーにフロントエンド担当するので、構造的にやりやすいとの噂のSassをインストールしてみます。

Sassとは

Syntactically Awesome StyleSheet略してSassです。読み方はサスもしくはサースです。
なんとなく前者で呼んでます。
CSSを応用的に扱えるメタ言語（他言語を扱う言語）という位置づけです。

なんかすごいCSSくらいに覚えておけばいいんじゃないでしょうか。

ページ数が多くなったり要素やデザインが複雑になると途端にめんどくさくなるのがCSSの管理。

CSSだとこんな感じでどんどん縦に増えていく記述が

.sass {
  color: red;
}
.sass p {
  font-size: 20px;
}

こんな風に入れ子にできます。構造的に把握しやすいですね。

.sass {
  color: red;
  p {
    font-size: 20px;
  }
}

とにかく再利用できるので便利で、さらに変数を扱えたり四則演算できたり関数も扱えたりしてしまう模様。

そんな便利そうなSassですが敬遠していた理由がこのインストール。

インストールしなきゃ使えないのでめんどくさくて触らないという選択肢も当然あるとおもいます。

以下はReactやTypeScript使うと想定してnpmやyarn等パッケージマネージャーがインストールされているという体でサクサク進めます。

そういった想定の仮想環境が準備されているEnvaderを使用します。

まずはnpmの初期化です。-yオプションを付けるとすべての選択肢でyesと答えてサクサク進みます。

npm init -y

package.jsonファイルが作成されます。
依存関係やコンパイル出力先ディレクトリの設定を記述するファイルです。

開発環境で使うと思うので--save-devを指定してnode-sassをインストール。

npm install node-sass --save-dev

package.jsonに以下の設定を記述（追加）してscssファイルをコンパイルできるようにします。test~は消して構いません。

"scripts": {
   "compile:sass": "node-sass sass/main.scss css/style.css"
}

sassディレクトリ配下のmain.scssをcssディレクトリ配下のstyle.cssにコンパイルする感じです。

sass記法ってのもあるようですが余り使ってるのを見たことありません。最初に紹介したネストする書き方もscss記法です。

npm run compile:sass

CSSファイルにコンパイルされます。

* SassとはなんかすごいCSSだよ
* コンパイルするとCSSとして出力されるよ
* Sassのインストール方法

実際に開発で何回か使ってみて使い方に慣れていこうと思います。

この記事が気に入ったらサポートをしてみませんか？