Download as PDF, PPTX
![Screw-Axis｜[css] @importを使うべきでない理由
ひとつずつCSSを
DLしちゃう](https://image.slidesharecdn.com/wbt-2014spring-public-140330210910-phpapp02/75/WordPress-CSS-36-2048.jpg)
![Webっちゃ vol.01 [Wordpressでできること]](https://cdn.slidesharecdn.com/ss_thumbnails/webccha-wordpress01-130527043932-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
WordPressでCSSプリプロセッサ入門
- 1.
- 2.
- 3.
- 5.
- 6.
- 7.
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17.
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 26.
- 27.
- 28.
- 29.
- 30.
- 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: HogeTheme Theme URI: http://hoge.com/ Author: hogeyama */ ! @import url('common.css'); @import url('module.css'); @import url('style.css'); @import url('print.css'); ダメよ〜 ダメダメ とあるテーマファイル
- 36.
- 37. パーシャル @importするのはCSSと同じだが、 最終的に一つのCSSにコンパイルする。 @import "module; @import "mixin"; @import"form"; @import "reset";
- 38.
- 39.
- 40.
- 41. @for $i from1 through 10 { .mb-#{$i*10} { margin-bottom: #{$i*10}px; } } @for for文で繰り返し
- 42. @for $i from1 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 コンパイルすると...
- 44.
- 45.
- 46.
- 47.
- 48.
- 49.
- 50.
- 52.
- 53.
- 54.
- 55.
- 56.
- 57.