Introduction to SCSS+COMPASS

姫路IT系勉強会 Vol.17で発表した内容です．

Transcript

1. SCSS + COMPASS 入門 2013.5.18 @姫路IT系勉強会vol. 17 @spark6251 （N@N）
2. 自己紹介 • N@N（@spark6251） • N@N→NOaN→NOAN→ノアン • 明石高専 電気情報工学科四年生 • プログラミングあんまりしてない • たぶんWeb屋 進行中のお仕事 • 明石高専
3. 内容 • SCSSの概要 • SCSSの文法 • SCSS + COMPASS • COMPASSのコマンド • まとめ
4. 1. SCSSの概要 • CSSをHamlの文法で拡張したのがSass • SassをCSSの文法で記述したのがSCSS 参考：Hamlの文法 !!! %html %head %title Haml %body
5. SCSS • SCSSはRubyで実装されている • 変数・関数・ループ・条件分岐が使える • COMPASSで.scssの監視ができる • Ruby 1.8.7以上
6. Rubyのインストール $ sudo apt-get install libssl-dev zlib1g- dev libreadline6-dev $ wget ftp://ftp.ruby- lang.org/pub/ruby/ruby-2.0- stable.tar.gz $ tar xfvz ruby-2.0-stable.tar.gz $ cd ruby-2.0.0-p0 $ ./configure $ make $ sudo make install
7. インストール $ sudo gem update ––system $ sudo gem install sass $ sudo gem install compass
8. インストール $ sudo gem update ––system $ sudo gem install sass $ sudo gem install compass WindowsでRubyのインストールができなかった のでDebianとかで考えてます[てきとう]
9. 2. SCSSの文法 SCSSつおい
10. ネスト ul { hoge li {fuga} > ul {piyo} } ul {hoge} ul li {fuga} ul > ul {piyo}
11. 参照 a { hoge &:hover {fuga} &.Class {piyo} } a {hoge} a:hover {fuga} a.Class {piyo}
12. 変数 $main-color: #ABCDEF; $list-font-size: 18px; $a: 1; $d: 1px black solid; border: $d; => border: 1px black solid;
13. 演算 $a: 6px; $b: 7; $c: 3px; $a – 5 => 1px $a – 5px => 1px $a – 5em => error $a / $b => 0.85714px $a / $c => 2
14. 挿入 $a: top; border-#{$a}: 1px black solid; => border-top: 1px black solid; #{}でくくらないとエラー $b: 15px; $c: 3px; font-size: #{$b} / #{$c}; => Font-size: 15px / 3px; セレクタ、プロパティで使うときは#{}でくくる
15. 関数 @mixin f {hoge} a { @include f; } a {hoge}
16. 引数 @mixin f($a: 10px) { width: $a; } ul { @include f; } li { @include f(5px); } ul { width: 10px; } li { width: 5px; }
17. for文 @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } } .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
18. if文 $a: red; p { @if true {hoge} @if false {fuga} @if null {piyo} @if $a == red {foo} } 意外とあると便利 p { hoge foo }
19. 3. SCSS + COMPASS • COMPASSつおい • .scssを監視して自動でコンパイルしよう • COMPASSの機能を使おう
20. 使い方 $ compass create $ compass watch compass createでCOMPASSが使えるように compass watchで保存される度自動でcssファイ ルを生成
21. 設定を変えよう 自動でconfig.rbが生成される いじって使いやすいようにしよう
22. config.rb http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts"
23. config.rb改変1 http_path = "/" css_dir = "css" sass_dir = "css" images_dir = "img" javascripts_dir = "js" という一例 まあCSSとSCSSのファイルは分けたほうが削除 するときとか楽
24. config.rb改変2 # output_style = :expanded or ... 出力ファイルの形式 :expanded そのまま :nested ネストする :compact セレクタと属性を一行に :compressed 圧縮
25. config.rb改変3 # relative_assets = true trueなら相対パス falseなら絶対パス
26. config.rb改変4 # line_comments = false falseなら /* line n, style.scss */ というコメントが付かない
27. リリース用とかに？ $ compass compile -e production config.rb output_style = (environment == :production) ? :compressed : :expanded -e productionをつければ圧縮、付けなければそ のままに
28. @import "COMPASS"; @import "COMPASS"; COMPASSのすべての機能が使える 公式サイトで内部実装が見れる 参考：Compass Reference
29. border-radius .Class { @include border-radius; } #Id { @include border-radius(2px); } • $default-border-radius を変更すればデフォルトの 値が変更できる • 自動でベンダープレフィク スを追加 • 他はリファレンス見てね☆ .Class { -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; } #Id { -moz-border-radius: 2px; -webkit-border-radius: 2px; -o-border-radius: 2px; -ms-border-radius: 2px; border-radius: 2px; }
30. 4. COMPASSのコマンド * = compassとする ただの$ compass --helpの日本語化 * create - 新規COMPASSプロジェクト * watch - .scssの監視 * clean - キャッシュ等の削除 普通に使うならこれだけで間に合う 他はhelpからの抜粋だったり内部実装を見るため だったり
31. 5. まとめ SCSS + COMPASSで 楽しく、楽なCSS製作を！
32. 御清聴ありがとうございました