CSS拡張メタ言語を使い始めたので備忘録「SCSS（Sass）とLESSのどちらを導入するか」　　- はじめに -

2013.09.17 Category:CSS Tag:Sass

ものすごく今更感が拭えないのですが、これに手を出したら、人間が堕落すると思っていたのでなかなか手を出せずにいたのです。(CSSを忘れてしまうかなという不安が。。)

ですが、手を出してみた感想としては、やはり人間が堕落する以上のものがそこにはありました。

CSS拡張メタ言語ってなに？

メタ言語（またはプリプロセッサ）と呼ばれます。

CSSをベースにした独自の記法でコーディングし、それをコンパイラでCSSに展開するというものです。

「計算したいな」や「変数使えたらな」という願いを叶えてくれます。

よくみかけるのがこの3つかと思います。

言語	コンパイラ	拡張子
SCSS (Sass)	Ruby	.sass .scss
Less	JavaScript(node.js)	.less
Stylus	JavaScript(node.js)	.styl

Sass ≠ SCSS

もともとはSassというプロジェクトが存在し、そこから派生したのが SCSSだそうです。

どれから学べばいいのかな？

とてつもなく便利らしいという認識しかなかったのですが、調べてみるうちによく目にしたのが、SCSS (Sass)とLESSでした。

ということで、SCSS (Sass)とLESSの二択に。

SCSS (Sass)とLESS？どう違うの？？

比較項目としては以下の3つ。

開発環境
機能
記法

開発環境

項目	SCSS(Sass)	LESS
動作OS	Linux / Mac OS X / Windows等 (Rubyが動作する環境)	サーバーサイド: Linux / Mac OS X等 (「node.js」が動作する環境)
動作OS	Linux / Mac OS X / Windows等 (Rubyが動作する環境)	クライアントサイド: Linux / Mac OS X / Windows等 (JavaScriptが動作する環境)

機能

これは使い込まれている方のものを参考にしたほうがいいと思いますので、リンクから詳細を見てみてください。

参考記事

LESS と SCSS（Sass）、どっちを選ぶ？各CSSプリプロセッサのメリットを比較｜ Stack Stack!

こちらは、書かれた年月が少し前ですが基本的なところは抑えられているので参考になります。

参考記事

CSS拡張メタ言語「SCSS(Sass)」と「LESS」の比較｜ Day by Day Infinity

SassとLESSはそれぞれ別のものですが、その機能はほぼ同等（ややSassの方が多機能）という印象。

記法

Mixinを使ってみます。

//変数
@line_color: #000;

//Mixin
//引数に初期値が使える
.box(@line: #444) {
	margin: 10px;
	padding: 8px;
	border: 1px solid @line;
}

/**
 * box style
 */
div {
	//Mixinの呼び出し
	.box();
}

/**
 * Article section
 */
#Article {
	//セレクタのネスト
	div {
		.box(@line_color);
	}
}

//変数

@line_color: #000;

//Mixin

//引数に初期値が使える

.box(@line: #444) {

margin: 10px;

padding: 8px;

border: 1px solid @line;

}

/**

* box style

div {

//Mixinの呼び出し

.box();

}

/**

* Article section

#Article {

//セレクタのネスト

div {

.box(@line_color);

}

//変数
$line_color: #000;

//Mixin
//引数に初期値が使える
@mixin box($line: #444) {
	margin: 10px;
	padding: 8px;
	border: 1px solid $line;
}

/**
 * box style
 */
div {
	//Mixinの呼び出し
	@include box();
}

/**
 * Article section
 */
#Article {
	//セレクタのネスト
	div {
		@include box($line_color);
	}
}