今更ですが・・・。
sassの基本とsassをつかったときの基本的な設計の仕方を教えて貰ったのでメモ。
おすすめされたコンパイラ→
Prepros :: Compile Less, Sass, CoffeeScript and much more with live browser refreshing.
BEMは命名ルールが厳格なので納期の短いものやメンバーのスキル状態によっては向かないことも。 oocssやsmacssはBEMにくらべて自由度が高いため取り入れやすい。
sass基本構文
- ネスト
.header { background-color: #999; .logo{ width: 100px; height: 200px; > a{ color: red; } } }
変数
カラーコードなど名前を決めておくとよい。
$color-default : #333; a{ color: $color-default; }
&
親を継承できる。擬似クラス、複合クラスで使用すると便利。
.buton{ display: block; &.button-primary{ background-color: yellow; } &.button-secondary{ background-color: orange; } }
@import
読み込まれるscssはアンダーバーから始まる名前にする。
そうするとコンパイル対象でなくなるのでインポートするファイルは_から始めると良い。
@import '_base';
- コメント
cssでも残したい場合は /*コメント*/ cssでは残さない場合は //コメント
OOCSS
まず機能によって切り分ける。 似た機能の中で使いまわせるものを使い回す。
ストラクチャーとスキンに分ける
少ない記述でクラスを組み合わせて、たくさんのバリエーションを作ることができる。
ストラクチャー(構造 共通するパーツ)
スキン(カラーやサイズ)
<button type="button" name="button" class="button button-defalut">ボタン</button> <button type="button" name="button" class="button button-blue button-large">ボタン</button> <button type="button" name="button" class="button button-red">ボタン</button>
//ストラクチャー .button{ display: block; border-radius: 3px; border : 0; text-align: center; padding: 10px 30px; font-size: 15px; color: #fff; cursor: pointer; } //スキン .button-defalut{ background-color: #000; } .button-blue{ background-color: blue; } .button-red{ background-color: red; } .button-large{ font-size: 24px; }
より厳しく書くなら
//ストラクチャー .button{ display: inline-block; border-radius: 3px; border : 0; text-align: center; padding: 10px 30px; font-size: 15px; color: #fff; cursor: pointer; //スキン &.button-defalut{ background-color: #000; } &.button-blue{ background-color: blue; } &.button-red{ background-color: red; } &.button-large{ font-size: 24px; } }
コンテナとコンテンツに分ける
<!--検索フォーム--> <form class="search" action="index.html" method="post"> <input class="input" type="text" name="name" value=""> <button class="button">search</button> </form> <!--ログインフォーム--> <form class="login" action="index.html" method="post"> <input class="input" type="button" name="name" value=""> <input class="input" type="button" name="name" value=""> <button class="button" type="button" name="button">login</button> </form>
//コンテナ .search{ display: inline-block; padding: 10px; border : 1px solid #000; } .login{ display: inline-block; padding: 10px; border : 1px solid #000; width: 230px; text-align: center; .input{ margin-bottom: 10px; width: 100%; } } //コンテンツ .input border-radius: 3px; background-color: #fff; font-size: 16px; padding: 10px 30px; }
SMACSS
カテゴライズする。
- base
- layout
- module
- state
- theme
カテゴライズしたものをディレクトリ構成に活かす。 それにsassの機能をつかうときにつかう分のディレクトリ(settingやtoolなど)を足してつくるといい。
layout、stateなどはSMACSSの推奨命名ルール通り.l-や.is~などつけて命名するとわかりやすくなる。
stateはmoduleディレクトリの各モジュールのscssファイルの中で書いていくといい。 読み込みの順番に気をつける。
. ├── css │ └── style.css ├── index.html ├── js ├── layout │ └── _l-header.scss ├── prepros.cfg └── sass ├── base │ ├── _generic.scss │ └── _normalize.scss ├── layout │ ├── _l-contents.scss │ └── _l-header.scss ├── module │ ├── _botton.scss │ ├── _card.scss │ └── _mainVisual.scss ├── setting │ └── _settings.scss ├── style.scss └── tool └── _keyframes.scss
style.scss内
//setting @import "setting/_settings.scss"; @import "tool/_keyframes.scss"; // base @import "base/_normalize.scss"; @import "base/_generic.scss"; // layout @import "layout/_l-contents.scss"; @import "layout/_l-header.scss"; // module @import "module/_botton.scss"; @import "module/_card.scss"; @import "module/_mainVisual.scss"
- 作者: 堀口誠人
- 出版社/メーカー: SBクリエイティブ
- 発売日: 2015/10/24
- メディア: 単行本
- この商品を含むブログ (1件) を見る