今週のASCIIcasts - SASS Basics

ASCIIcasts - “Episode 268 - SASS Basics”を見て。

SCSSの仕様

ネストが出来る
a:hover みたいなやつは &:hover のように & にするとネストできる
$main-color: #FFFFFF; みたいに $ 使うと変数として使える
関数が用意されている。例えば darken(#FFFFFF, 10%) のようにすると、第一引数として与えられた色を10%暗くした色を返してくれる。

mixin

よく使う設定を @mixinで外だしできる。

@mixin rounded-corners {  
  border-radius: 5px;  
  -moz-border-radius: 5px;  
  -webkit-border-radius: 5px;  
} 

.new_project {  
  background-color: $main-color;  
  color: #FFF;  
  padding: 5px 12px;  
  margin: 10px 0;  
  font-size: 16px;  
  @include rounded-corners;  
}

引数もとれる

@mixin rounded-corners($radius) {  
  border-radius: $radius;  
  -moz-border-radius: $radius;  
  -webkit-border-radius: $radius;  
} 
.project {  
  border: solid 1px #777;  
  margin: 20px 0;  
  padding: 7px 12px;  
  @include rounded-corners(10px);  
}

引数のデフォルトも設定できる

@mixin rounded-corners($radius: 5px) {  
  border-radius: $radius;  
  -moz-border-radius: $radius;  
  -webkit-border-radius: $radius;  
}

}

複数ファイルへの分割

railsは複数のCSS(SCSS)ファイルを結合するので、設定が長くなったファイルを分割することができる。ただ、通常は変数を共有できない。

application.css を application.scss にリネーム
requre_tree . の行を削除
下記のようにimport文を追加(変数設定している方を先にする)

@import "layout.css.scss";  
@import "projects.css.scss";

のようにすると、複数ファイルで変数を共有できる

SCSS と SASS の違い

SCSSはSASS3でサポートされたものでCSSと互換性がある。SASSだと {} や ; が省略できて便利だけど、CSSから移行するにはSCSSを使った方がよさげ。sassも.sass の拡張子をつければ扱えるみたい。

コントローラごとに扱うスタイルを分ける

コントローラ毎に読み込むcssが変わったりはしないので、

<body id="<%= params[:controller].parameterize %>_controller">

のようにして、scssファイル側で切り分けることで自動で適用されるcssを変更するライフハック。

maeshimaの日記

メモ書きです