Downloaded 16 times
![インストール
$ sudo gem update ––system
$ sudo gem install sass
$ sudo gem install compass
WindowsでRubyのインストールができなかった
のでDebianとかで考えてます[てきとう]](https://image.slidesharecdn.com/scsscompass-130518060355-phpapp02/85/SCSS-COMPASS-8-320.jpg)
SCSS + COMPASS 入門
- 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-getinstall 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 gemupdate ––system $ sudo gem install sass $ sudo gem install compass
- 8. インストール $ sudo gemupdate ––system $ sudo gem install sass $ sudo gem install compass WindowsでRubyのインストールができなかった のでDebianとかで考えてます[てきとう]
- 9.
- 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}: 1pxblack 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 from1 through 3 { .item-#{$i} { width: 2em * $i; } } .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }
- 18. if文 $a: red; p { @iftrue {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.
- 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.
- 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.