SCSS

基本的な使い方

ネスト

CSS

.parent{
  color: red;
}
.parent .child{
  color: blue;
}

SCSS

.parent{
  color: red;
  .child{
    color: blue;
  }
}

CSSの書き方でも認識されるためCSSファイルをとりあえずコピペして少しづつ直していける。

hoverなどの修飾への対応

a:hoverのような形への対応は&を使うことで親要素を表すことができる。a.checkedのような形も&.checkedとして書くことができる。

a{
  &:hover{

  }
}

変数

よく使う項目は変数にしておくことができる。

$text_normal: #ff0000;
a{
  color:$text_normal;
}

RAILS関連

画像パス

assets内の画像パスを指定するにはimage-pathを使用する。他のアセットはasset-pathで指定する。

background-image: url(image-path("back.jpg"));
rubyonrails/other/scss.txt · 最終更新: 2012/10/19 14:13 (外部編集)
www.chimeric.de Valid CSS Driven by DokuWiki do yourself a favour and use a real browser - get firefox!! Recent changes RSS feed Valid XHTML 1.0