Posted at

1行も書かずにはじめるSCSS

More than 1 year has passed since last update.

SCSS、以前から名前は聞いていたんですが敬遠してました。


  • だって仕事のスコープ違うし。デザインしないし。

  • CSSはデザイナーさんがいじってるからいいんじゃないの? そこのアーキテクチャに自分がからむの違うんじゃないの?

  • ほら習得コストもかかるっていうか、デザイナーさんに教える責任もしかして自分にふりかかってくるのいやっていうか。労多くして実り少ないっていうか

  • つまりはめんどくさい

  • だいたい、SCSS導入するとして、既存のこの大量のCSSをどうするの。全部SCSSに移行? 正気ですか?

と思ってたんですけど自分間違ってた。

SCSS最高だった。

控えめに言って、最高だった。

むしろ既存CSSたくさん抱えているサービスにこそ導入をおすすめしたい。

そんなわけで以下に簡単な導入手順を書きます。

SCSSのコードなんか1行もかかずに導入できますよ。


1. SCSSのコンパイルツール入れる

なんでもいいです。とにかくいれます。

心当たりがなければこのサイトを参考にどうぞ。


2. 既存の.cssファイルをコピペし、拡張子を.scssに変える

なんでもいいです。全部でもいいです。でもここで挫折しないよう、まずは1ファイルだけにしておこう!


3. 1. でインストールしたツールで、2.で作成した.scssファイルをコンパイルする

なんでもいいです。コンパイルします。cssファイルできました?


4. SCSS導入完了

コンパイルされたcssファイルのパスがおかしい場合には(※)とりあえずコピペで正しい場所に配置しましょう。

これで導入完了です。

.cssファイルを.scssからコンパイルして作成した時点で大体導入完了です。

※コンパイルの設定次第で正しい場所への配置ももちろんできますが、それはまた後で考えましょう。


だましてない

SCSSで最大にいいな!と思ったのはCSSの構文そのままを許容してくれるところ。

CSSファイルの内容そのままでも、なにもSCSS構文を含まなくても、SCSSファイルとして管理できる。ここは設定の共通化しておきたい、とか、ここはSCSSの構文使うと楽に管理できそう、みたいなところを見つけたら順次対応していくということでね。まずはSCSSからCSSにコンパイルできる仕組みを入れてみる。あとはそれから考える。

設計面倒くさいと思ってたんですけど、一度導入してしまうと、既存コードを構造化していくの超楽しいですし(私見)。

変更前後のCSSが同じであるかどうかのチェックツールとか作って、まかせるお仕事がない新人さんあたりに設計のお勉強がてらやらせてみるのもいいかなあ、とか思いました。

いろいろ考えると面倒くさくなっちゃうので、導入時のスコープはなるべく小さくしてやってみるのがいいよね、という話。


おまけ:ちょっとくらいは書いてみる

例えばこんなところを

p {

color: #000;
}

こう変更

$p_color: #000;

p {
color: $p_color;
}

あるいはこんなところを

.special-list ul{

color: #000;
}
.special-list ul .title{
color: #f00;
}

こう変更してもいい

.special-list{

ul{
color: #000;
.title{
color: #f00;
}
}
}

そしてコンパイル

導入完了!(二回目)