![Screw-Axis｜[css] @importを使うべきでない理由
ひとつずつCSSを
DLしちゃう](https://image.slidesharecdn.com/wbt-2014spring-public-140330210910-phpapp02/85/WordPress-CSS-36-320.jpg)
WordPressでCSSプリプロセッサ入門
- 2. 自己紹介
- 5. Ustもやるよ
- 11. コンパイル？
- 12. CSS Preprocessor しかし、そのままではブラウザで動かないので、 CSSにコンパイル(ビルド)する必要がある。 compile!! ※Lessはjsを読み込むことでそのままでも動く
- 14. 今回はこれ使います
- 16. なんでSass？
- 18. 巨人の肩に乗れ
- 22. なんでCodeKit？
- 27. Sassの基本機能紹介
- 28. デモ
- 31. 一行コメント
- 32. .site-header { background-color: #000; //max-width: 1260px; position: relative; width: 100%; z-index: 4; } .header-main { min-height: 48px; //padding: 0 10px; } 一行コメント 地味に便利
- 33. パーシャル
- 34. /* Theme Name: Hoge Theme Theme URI: http://hoge.com/ Author: hogeyama */ ! @import url('common.css'); @import url('module.css'); @import url('style.css'); @import url('print.css'); ダメよ〜 ダメダメ とあるテーマファイル
- 37. パーシャル @importするのはCSSと同じだが、 最終的に一つのCSSにコンパイルする。 @import "module; @import "mixin"; @import "form"; @import "reset";
- 40. ループ
- 41. @for $i from 1 through 10 { .mb-#{$i*10} { margin-bottom: #{$i*10}px; } } @for for文で繰り返し
- 42. @for $i from 1 through 10 { .mb-#{$i*10} { margin-bottom: #{$i*10}px; } } @for for文で繰り返し ループは他にも @whileや@eachも あるんだ
- 43. .mb-10 { margin-bottom: 10px; } .mb-20 { margin-bottom: 20px; } .mb-30 { margin-bottom: 30px; } .mb-40 { margin-bottom: 40px; } .mb-50 { margin-bottom: 50px; } .mb-60 { margin-bottom: 60px; } .mb-70 { margin-bottom: 70px; } .mb-80 { margin-bottom: 80px; } .mb-90 { margin-bottom: 90px; } .mb-100 { margin-bottom: 100px; } @for コンパイルすると...
- 45. Jetpack
- 50. WP-SCSSってのもある
- 52. 便利そう！！ ※試してない
- 53. まとめ
- 54. WordPressとか関係なく
- 55. 使ったほうがいいよ！
- 56. 使ったほうがいいよ！ いいよ！！