Sassって必要ですか？

Sass

はじめに
Sass書いてみた
Sassを使う環境
結論

はじめに

今までSassを避けてきたのですが、今からでも導入すべきか考えてみました。

Sass書いてみた

入れ子にしたり、変数が使えたりといったところがメリットのようです。
（他にCSSから乗り換えるほどのメリットあるのかな？）

scss
#main {
  border: 1px solid #ff0000;
    .entry {
      margin: 10px;
      border: 1px solid #00a0e9;
      p {
        background-color: #e97300;
      }
    }
}

コンパイル後
↓↓↓

css
#main {
  border: 1px solid #ff0000;
}
#main .entry {
    margin: 10px;
    border: 1px solid #00a0e9;
}
#main .entry p {
    background-color: #e97300;
}

これって便利？

Sassを使う環境

エディタとコンパイラが必要みたいです。
エディタはいつもの Visual Studio Code。
コンパイラはmacの場合ターミナルでいいのかな？

ターミナル
sass style.scss:style.css

動きません。
Sassをインストールしないといけないみたいです。
ここで萎えました。
（まぁやろうと思えばできるけど・・・）

結論

Sassはいらない。（私の場合）
入れ子はそれほどメリットがあるとは思えなかった。（複雑になれば違うのかな）
変数は :root という便利なものが CSS に標準で装備されています。
また、JavascriptでCSSを書けば変数にできるし、PHPなどを埋め込めばもっと簡単にできそうです。
（そこまでする必要は今のところないかな）
ちなみに、calc を使えば計算もできちゃいます。

CSS
:root {
  --main-color: hotpink;
  --pane-padding: 5px 42px;
}

↓のように呼び出すだけです。
background-color: var(--main-color);

Sassですが、まぁ慣れたら便利なのかもしれません。
ちょっとかっこいいイメージもあったのでw、気にはなっていたんですが。

次に大規模な案件が入ってきた時に、また考え直してみたいと思います。

PROFILE

C:blanc: フリーランスのプログラマーです。

COMMENT
送信しました！コメントは承認後表示されます！
あと150文字

Sassって必要ですか？

Contents

はじめに

Sass書いてみた

Sassを使う環境

結論

PROFILE

COMMENT