Knowledge BBQ VOL.3

Transcript

1. SASS とCOMPASS でCSS をもう少し楽に書こう
2. 自己紹介 青森県八戸市出身( 港と鯖とイカと工場の町です) アラフォー Twitter @_takwat Qiita 仙台市内某社社内SE https://qiita.com/khirose
3. 社内SE ？ 自社のシステムやクライアントPC のお守りがメインです ただし自社の事業サイトや一部受託開発もやってます どうせ自社でやるんだしってことで色々と取り入れてま す
4. サイトが育って増大してきたCSS に ありがちな辛いところ
5. クラス名が他とかぶって困惑 まあこれは命名規則でなんとかするしかない？ → そうして長くなっていくクラス名 .top-navi-some-class
6. ネストが深くなってきて見通しがしにくい section > div { ... } section > div > div { ... } section > div > div > ul > li { ... }
7. 何か同じコードを何度もコピペしてる気が する .picture1{...} .picture2{...} .picture3{...} .picture4{...} .picture5{...} .picture6{...} 6 個ならまだいいけど100 個あったら？
8. ベンダープレフィックスつきのプロパティ 指定するのがつらい -webkit だけならともかくfilter:progid:DXImageTranform と か何だよって話
9. そこでSASS やってみませんか？
10. SASS とは？ Syntactically Awesome Stylesheets 構文的に素晴らしいスタイルシート・・・？
11. もともとインデントで構文でした $blue: #3bbfce $margin: 16px .content-navigation border-color: $blue color: darken($blue, 10%) .border padding: $margin/2 margin: $margin/2 border-color: $blue 厳密にSass といえば↑ みたいな書き方のことらしく ※Python やYAML みたい
12. 見慣れたブロック構文にスクリプ ト言語みたいな要素も入れて $blue: #3bbfce; $margin: 16px; .content-navigation { border-color: $blue; color: darken($blue, 10%); } .border { padding: $margin / 2; margin: $margin / 2; border-color: $blue; } 現在の.scss に落ち着く
13. 以上、WIKIPEDIA さんから
14. SASS の利点になりそうなコード例 を色々見てみよう 実質scss ですが 基本的に素のCSS を書いてもとくに文句は言わず、ほぼ そのまま出力してくれます
15. SASS のコード例(1) 入れ子 /* 感 書 */ .items{ font-size: 1vw; h2{ font-size: 4vw; strong{ font-weight: bold; } } }
16. SASS のコード例(2) プロパティ /* font-* 書 */ h1{ font:{ family: '......'; size: 1vw; weight: normal; } } セレクタは .example{} で まとめる場合のプロパティは font: {} とJSON 記法になるのがはまりどころ ※ 個人的にはあんまりオススメはしないですがmargin や padding 指定したいときは便利かも
17. SASS のコード例(3) 疑似要素 /* a 設定 疑似要素 含 感 */ a{ text-decoration: none; /* 自分自身 指 "&" */ &:hover{ text-decoration: underline; } }
18. SASS のコード例(4) 変数 /* 共通部分 変数化 */ $small-font-size: 1vw; $medium-font-size: 2vw; $larger-font-size: 4vw; $large-font-size: 8vw; h1{ font-size: $large-font-size; }
19. SASS のコード例(5) 継承 $mycolor: rgb(31,31,31); .alpha{ font-size: 2vw; color: $mycolor; } .beta{ @extend .alpha; border: 1px solid $mycolor; } .alpha の中身(font-size とcolor) を.beta にそっくりそのまま 引き継いだ上でborder を追加指定 ※ これも意外とハマるのであまりオススメしないです （後述の@mixin のほうが使い勝手がよさげなんで）
20. SASS のコード例(6) 条件分岐 /* 当然if文 */ $type: ocean; p{ @if $type == ocean { color: blue; } @else { color: black; } } /* if/else 1対 書 方 (Excel MySQL IF関数 近 ) */ h1{ /* type ocean blue, ocean以外 black */ color: if($type == ocean, blue, black); }
21. ( 余談) 変数と条件分岐をメディアク エリと組み合わせ /* 組 合 */ $device-display: wide; @media only screen and (max-width: 60rem) { $device-display: narrow; } /** 後 */ h1{ font-size: if($device-display == narrow, 8vw, 2vw); }
22. SASS のコード例(7) ループ /* 使 */ /* <li> 1～6番目 連番 名 別 背景 適用 */ li{ @for $i from 1 through 6{ &:nth-child(#{$i}){ background: linear-gradient( to bottom, rgba(255, 255, 255, 0.6), rgba(0, 0, 239, 0.1)), url('./img/button#{$i}.png' ) no-repeat; background-size: contain; background-position: center center; } } }
23. SASS のコード例(8) 関数(MIXIN) /* 一部 違 共通部分 */ /* $width: 1px, $color: #000 値 */ @mixin text-border($width: 1px, $color:#000){ text-shadow: 0 $width 0 $color, $width 0 0 $color, 0 (-$width) 0 $color, (-$width) 0 0 $color, (-$width) (-$width) 0 $color, $width (-$width) 0 $color, (-$width) $width 0 $color, $width $width 0 $color; } h1{ @include text-border(2px, #fff); /* 周辺2 白 縁取 */ }
24. SASS のコード例(9) PARTIAL と IMPORT 例えば、共通で使う変数やmixin などを $box-large-size: 40vw; $color-normal: black; $color-warning: orange; $color-danger: red; のように定義し、_variables.scss として保存しておいて @import "variables"; .content{ width: $box-large-size; } のように複数の.scss で使いまわしができる
25. PARTIAL 関連 _ ではじまるファイル名はpartial として扱われる partial は他のファイルから@import される前提のファ イルで単独では変換処理の対象にはされない つまり、_variables.css みたいなものは生成されない @import は拡張子不要 partial の場合、_ も不要 _variables.scss とvariables.scss が同時にあったら @import はどうなるんでしょうね→ 警告出ました
26. でもよく使うアレやアレをMIXIN と かで定義しなおすの辛い
27. もしかしてCOMPASS にない？
28. COMPASS http://compass-style.org/ Sass の「あるある」をまとめたライブラリ
29. 例) 角丸のボックス(BEFORE) @import 'compass'; .radius { @include border-radius; }
30. 例) 角丸のボックス(AFTER) .radius { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }
31. 大きな利点 ベンダープレフィックスもバッチリ compass じゃなくてもSass 単体でやれる方法もある 今回はcompass は深掘りしないので単体での方法でやり ます
32. 他 シャドウやグラデーション、スプライトの作成まで @ なんちゃら( ちょっとしたパラメータ) で色々やってくれるのでドキュメント参照 compass までやると今回の尺が足りないので今回は入り 口の紹介のみ
33. では環境を作ろう ruby のインストール sass コマンドをインストールする
34. ・・・敷居高杉内？
35. そこでKOALA http://koala-app.com/
36. やること GUI で設定して ソースの入ったディレクトリをドラッグ＆ドロップ あとはKoala が立ち上がっている間は↑ のディレクトリに ある.scss なファイルが更新されたら自動で同じディレク トリにcss まで作ってくれる
37. 設定(1) UI の日本語化
38. 設定(2) SASS の設定 SourceMap 出力( このCSS はどのSass から変換されたか がわかるのでデバッグ時にはかどります) ベンダープレフィックスの自動付与
40. 設定(3) CSS の設定 ぐしゃっと1 行にまとめてmin.css を作るとかもありま すが今回はあまりさわらないほうがいいかも
42. SCSS を書いて動かしてみよう