Sass 導入と記法など

前に1回やって忘れました

 

主にまたこれにお世話になります。

• コーダー必見、SCSS・Compassで開発効率アップ｜Sublime Text 2でコンパイル編 ｜ Developers.IO

 

ただ、
7, config.rbの作成
をつくってみたけどうまくいかず
おそらく昨日入れた SublimeOnSaveBuild が原因のよう

 

なので config.rb は作らず、scssファイル作って
Sublime Text のメニュー Tools > Build System > SASS – Compressed
として保存すると 圧縮版のcssファイルが同階層に出力された。

 

// 変数
$color1: #000;
$color2: #333;
$color3: #666;
$color4: red;
$color5: #fff;
// mixin
@mixin fontSet1 {
font-size: 14px;
line-height: 1.7;
}
@mixin fontSet2 {
font-size: 16px;
line-height: 1.6;
}
@mixin fontSet3 {
font-size: 20px;
line-height: 1.4;
}
@mixin link1 {
color: $color4;
text-decoration: none;
}
@mixin link1_hover {
color: $color5;
background: $color4;
}
// コンテンツ
h1 {
color: $color1;
@include fontSet3;
}
h2 {
color: $color2;
@include fontSet2;
}
li {
color: $color3;
@include fontSet1;
a {
@include link1;
}
a:hover {
@include link1_hover;
}
}
section.mainArea {
p {
color: $color3;
@include fontSet1;
a {
@include link1;
}
a:hover {
@include link1_hover;
}
}
}

こんな感じかな…
計算とかループとか使わなそうだ
このSCSSでいくとコンテンツの部分には極力数字書かずに変数とかミックスイン入れるのが良い子ってことかなー