Code Log

Sassを使ってみる。

古い記事

スポンサーリンク

GUIでSassを使う

Scoutをインストールします。

以下でDownload For Windows
https://mhs.github.io/scout-app/

GUIの左下の「+」をクリックして、プロジェクトのルートフォルダを指定します。

input folderにsassフォルダを、output folderにcssフォルダを指定します。

CUIでSassを使う

Rubyで

gem install sass

プロジェクトのフォルダに移動して、以下のコマンドを実行。

sass --watch sass:css --style expanded

XXXX.scssのコンパイル結果として、XXXX.cssが生成されます。

Sassのアップデート

gem update sass

基本的な使い方

こんな出力をSCSS記法で表現するには・・・

@charset "utf-8"

body {
	background-color: #BDB76B;
}

h2 {
	color: #FF0000;
	font-size: 50px;
}

こうやる。

@charset "utf-8";

$bk_color: #BDB76B;
$h2_color: #FF0000;
$h2_font: 50px;

body {
	background-color: $bk_color;
}

h2 {
	color: $h2_color;
	font-size: $h2_font;
}

border-bottom-width

@charset "utf-8"

body {
	background-color: #BDB76B;
}

h2 {
	color: #FF0000;
	font-size: 50px;
	border-bottom-width: 2px;
	border-bottom-style: dotted;
	border-bottom-color: #442220;
}

これは、こう。

@charset "utf-8";

$bk_color: #BDB76B;
$h2_color: #FF0000;
$h2_font: 50px;

body {
	background-color: $bk_color;
}

h2 {
	color: $h2_color;
	font-size: $h2_font;
	border:{
		bottom:{
			witdh: 2px;
			style: dotted;
			color: #442220;
		}
	}
}