More Related Content Similar to まだやれる Css preprocesser
Similar to まだやれる Css preprocesser (20) まだやれる Css preprocesser9. CSS Preprocesser あるある
● ファイル構成どうすればいいの...?
● 自動化だけで満足しちゃった
● ソースコードの中にエベレストが沢山ある...
● 結局便利なCSSだよね
● CSSのガイドラインはあるけど...
● 機能沢山あって覚えられない
● Compass 便利だけどなんか違う
12. 迷わずファイル分割する
ファイルの中身は 5 〜 300行くらいで
css
│ components
│ └ components.scss
│ └ components.form.scss
└ lib
└ require.scss
└ mixins.scss
17. 迷ったら mixin にする
mixin を普段使いする。コンポーネントと思ったら
共通のCSSを書くよりも安全
.foo (@) { … mixin … }
#header {
.foo; }
18. mixin に RWD の Breakpoint を集約
@mixin applyDeviceWidth1280 {
@media screen and (max-width: 1280px) {
@content; }}
.foo {
@include applyDeviceWidth1280 {
li { … } } }
19. mixin に スプライト画像 を集約
@mixin SpritesIconBasic {
background: url(/img/sprites/icon_basic.png);
background-size: 500px auto;
}
.foo i { @include SpritesIconBasic;
… }
20. mixin で名前空間を整理する 1 / 2
mixin は一箇所ですべて定義する
// mixins.component.foo.scss
@mixin ComponentFoo { … }
// mixins.component.bar.scss
@mixin ComponentBar { … }
21. mixin で名前空間を整理する 2 / 2
mixin を使う時は必ず include してから
// pages.home.list.scss
.home_list { @include ComponentFoo; }
// pages.sitemap.list.scss
.sitemap_list { @include ComponentBar; }