LoginSignup
13
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@tsudaryo1715in株式会社エイチームライフデザイン

CSSプリプロセッサのまとめ　主にSsss(scss)とPostCSS

Posted at

そもそもCSSプリプロセッサとは?必要性は？

結論から言うと**「CSSよりも可読性と保守性をよくしたのがCSSプリプロセッサ」**だと思っています。
jQueryやAjaxなどの動的な動作への対応や、デバイス対応・レスポンシブなど、最近はより複雑なコードを書かなければいけないです。
小規模ならなんとかできますが、規模が大きくなると管理が難しく、CSS設計も行わないといけないです。

CSSの特性もあり複雑化が進むとコードが衝突したり可読性が悪くなりますが、そんなCSSを使いやすくしようと生まれたのがCSSプリプロセッサです。
CSSにはないネストや変数などが使用できより可読性が良くなります。

プリプロセッサの種類

最初に行っておくとPostCssとScssをメインに描いていきます。
理由としては、2020年ロードマップに沿って学習しているためです。

Sass (Syntactically Awesome Style Sheets)

要するに描き方がイケてるスタイルシートです。
2006年に登場しており、ベースはRubyが使用されています。

.btn
　display: block
　padding: 10px
　margin-bottom: 5px
　　span
　　　font-size: 1.2rem

のような感じで、インデントでcssを書いていくイメージ
　

Scss(Sassy CSS)

ScssはSassをベースによりCSSっぽくかけます。
CSSのようにかけるためCSSを理解していればそこまで学習コストは高くなく、導入しやすいです。
そのためScssの普及率は極めて高いです。
ちなみにSassをベースにしているのでRubyです。

.btn{
　display: block
　padding: 10px
　margin-bottom: 5px

　span{
　　font-size: 1.2rem
　}
}

書き方もSassと似ています。Sassはインデントに対してこちらはカッコを使用します。
使用していて感じたSassのメリットは以下の点です。

記述の簡略化ができる

先ほど説明したこちらの例を参考にします。

.btn{
　display: block
　padding: 10px
　margin-bottom: 5px

　span{
　　font-size: 1.2rem
　}
}

これをコンパイルすると

.btn {
	display: block
	padding: 10px
	margin-bottom: 5px
}

.btn span{
	font-size: 1.2rem
}

ネストで書くことによって毎回.btnを先頭につける必要がなくなります。
大規模なサイトだと作業効率にも影響するし、何よりグルーピングされて可読性が高くなるのがポイントだと思います。

変数が使える

$main-color: #444;
.text {
	color: $main-color
}

.text {
	color: #444;
}

このように基本的に変わらないような色や数値を呼び出すことができます。後に修正が入った場合でも一括で行えてとても便利です。
CSSでも使えるやんと僕も思っていましたが、CSSの変数はIEで対応されていないのでIEまで対応するサイトでは使えないかなと思います。その点ScssはコンパイルされるとカラーコードになるのでIE対応も気にせずいいと思います。

四則演算が使える

.test {
　width: (200px / 4);
}

.test {
　width; 50px;
}

と行った形で普段は暗算や計算機を使った面倒な計算もScssが行ってくれます。
またpx - cmなどの単位が違うのも計算できたり予め変数に数値を入れておき計算することもできます。

関数が使える

@for $value from 1 through 3 {
　.test_#{$value} {
　　margin-top: 1px * #{value}
　}
}

.test_1 {
　margin-top: 1px;
}

.test_2 {
　margin-top: 2px;
}

.test_3 {
　margin-top: 3px;
}

Forだけでなくif文やwhile・eachなども使用することが可能です。
今回の場合だと、もっと増やしたい場合は数値を変えるだけで一瞬に変更することができます。
命名規則にもよりますが、何をするのか明白に理解することができますし、生のCSSでは似たようなコードを大量生産しないといけない部分をすっきりさせることができます。

コードの再利用ができる

@mixin box {
	
　padding: 15px;
　color: #444;
}

.test {
　@include box
}

.test {
　padding: 15px;
　color: #444;
}

@mixinでミックスイン名を定義して、@includeで呼び出すことができます。
よく使われるコードなどは前もって@mixinで定義しておくと便利です。また一部分が変わる場合の引数を持たせることができるので汎用性が効くこともポイントだと思います。

1つのファイルにまとめることができる

@import “test/_color”
@import “test/_global”

このように@importを使うことによって、他のScssファイルを読み込むことができます。
コンパイルをする時には、1つのファイルとして掻き出してくれるので表示速度の面でもポイントになる部分です。
またこれがあることにより、部分でファイルを分けることができ管理がしやすくなります。

cssでもimportはできるし、linkで読み込めばいい話ですが僕は推奨しません。scssでのimportが一番読み込みが早いからです。もし興味があればこちらの記事をご覧ください。
Import,link,scssの読み込み速度を比較してくれています。
https://dev.classmethod.jp/ria/html5/css-import-no-parallel-load-sass/

Less(The Dynamic Stylesheet Language)

2009年に登場したjavaScrptベースのプリプロセッサです。
書き方はSassと似ていてるけど、機能はSassより少ないです。
Boostrapで採用されていたので、Sassと同じくらい有名ですが今はあまり使われていないと思った。
Less内にJSを記述できるので、その面では便利。

Stylus

2010年に登場したNode.jsをベースにしたプリプロセッサです。
Sassは高水準言語を作ることが目的でLESSはCSS文法を生かしたシンプルな機能をつけることができます。
この二つのいいとこ取りをしたのがStylusというイメージ。
ちなみに読み方は「スタイラス」なのでお間違えのないように。

PostCss

2013年に登場したJavaScriptがベースのプリプロセッサです。
SassやLESSなどと似ていますが、大きな特徴としてはJavaScriptの高い拡張性です。

僕が思うPostCSSのメリット

必要なものだけ追加できる（現状の課題も解決しやすい）

Scssなどと違って、機能の追加はプラグインを使って拡張することができます。
例えば、stylelintやAutoprefixer、cssnanoなど現状必要最低限な機能だけを追加することができる。
逆を言えば、必要なくなったものは設定から外すこともできScssなどと比べても依存度が低いと言える。

流行り腐りに柔軟に対応できる

PostCSS以外の紹介したプリプロセッサは利用者が減ればメンテナンスの必要性がなくなり、更新されなくなるケースもあります。

しかし、PostCSSはただのパーサーであり、機能のメンテナンスは各プラグインが役割を持ちます。
メンテナンスがされなくなった古いプリプロセッサを使うことは、現代の課題を解決できない可能性まで考えられますが、PostCSSはそこに柔軟に対応ができると思います。

Scssやstylusのコードが再利用できる

今現在でScssやstylusを使用していたとしても、postcss-scssやpoststylusを導入することでそのまま利用可能です。
　

次世代のCSS記法が使える

個人的にはあまり必要性を感じませんが、1つの特徴なので描いておきます。
将来的にCSSの仕様として入るであろうCSSの記述を行いPostCSSによって変換してくれます。
注意点としては、勧告前の仕様であり確定しているわけではないので使うプロパティがプラグインで対応しているのか確認する必要があると思います。

僕は思うPostCssのデメリット

PostCSSを入れなくても使える機能も普通に存在する。

ベンダープレフィックスがいい例。
ブラウザ対応はMixin機能で、付与することも可能であり必ずPostCSSが必要になるとは限りません。
しかし、ブラウザのアップデートによって必要がなくなる場合もあるので自動的に付与したいと思うのであれば、Autoprefixerを使う必要があるかなと思います。
このようにPostCSSのプラグインであるから入れるではなく、今の状態でも対応できるものは他にもたくさんあります。

環境構築に慣れていないと時間がかかる

僕みたいな経験がない場合は特に環境の構築に時間がかかります。また拡張性が高いのはメリットでもありますがその反面で作り込みすぎると複雑になりチームでの開発だと支障をきたす可能せもあるかなと思います。

便利だから入れちゃえ状態になる

僕のようなプラグイン追加病は特によくありがちなんですが、とりあえず便利になるんだから入れようとなる。
果たしてそれがいいのかというと否。
便利なツールを導入しても作業効率は上がらないこともあるし、そもそもそんなに使われないケースもあります。
それにその変化によってさらに状態を悪化させる可能性すら考えられるからです。
導入する前には本当に必要なのかじっくり考えてから導入する必要があると思います。

PostCssの挙動
Autoprefixerを使用するとこんな感じでコンパイルされます。

a {
　&:hover {
　　transform: scale(2);
 }
}

a:hover {
  -webkit-transform: scale(2);
      -ms-transform: scale(2);
          transform: scale(2);
}

PostCSSすごい使いやすいなと思いました。　

13
7
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
13
7

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?