SCSS + COMPASS 入門

1,257
-1

Published on

姫路IT系勉強会で発表した内容です。

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,257
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
14
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

SCSS + COMPASS 入門

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

    Clipping is a handy way to collect important slides you want to go back to later.

×