SCSS + COMPASS 入門

2013.5.18 @姫路IT系勉強会vol. 17 @spark6251 （N@N）

自己紹介 • N@N（@spark6251） • N@N→NOaN→NOAN→ノアン • 明石高専 電気情報工学科四年生 • プログラミングあんまりしてない • たぶんWeb屋

進行中のお仕事 • 明石高専

内容 • SCSSの概要 • SCSSの文法 • SCSS + COMPASS • COMPASSのコマンド • まとめ

1. SCSSの概要 • CSSをHamlの文法で拡張したのがSass • SassをCSSの文法で記述したのがSCSS

参考：Hamlの文法 !!! %html %head %title Haml %body

SCSS • SCSSはRubyで実装されている • 変数・関数・ループ・条件分岐が使える • COMPASSで.scssの監視ができる • Ruby 1.8.7以上

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

インストール $ sudo gem update ––system $ sudo gem install sass $ sudo gem install compass

インストール $ sudo gem update ––system $ sudo gem install sass $ sudo gem install compass WindowsでRubyのインストールができなかったのでDebianとかで考えてます[てきとう]

2. SCSSの文法 SCSSつおい

ネスト ul { hoge li {fuga} > ul {piyo} } ul {hoge} ul li {fuga} ul > ul {piyo}

参照 a { hoge &:hover {fuga} &.Class {piyo} } a {hoge} a:hover {fuga} a.Class {piyo}

変数 $main-color: #ABCDEF; $list-font-size: 18px; $a: 1; $d: 1px black solid; border: $d; => border: 1px black solid;

演算 $a: 6px; $b: 7; $c: 3px; $a – 5 => 1px $a – 5px => 1px $a – 5em => error $a / $b => 0.85714px $a / $c => 2

挿入 $a: top; border-#{$a}: 1px black solid; => border-top: 1px black solid; #{}でくくらないとエラー $b: 15px; $c: 3px; font-size: #{$b} / #{$c}; => Font-size: 15px / 3px; セレクタ、プロパティで使うときは#{}でくくる

関数 @mixin f {hoge} a { @include f; }

a {hoge}

引数 @mixin f($a: 10px) { width: $a; } ul { @include f; } li { @include f(5px); }

ul { width: 10px; } li { width: 5px; }

for文 @for $i from 1 through 3 { .item-#{$i} { width: 2em * $i; } }

.item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; }

if文 $a: red; p { @if true {hoge} @if false {fuga} @if null {piyo} @if $a == red {foo} } 使うのかなこれ

p { hoge foo }

3. SCSS + COMPASS • COMPASSつおい • .scssを監視して自動でコンパイルしよう • COMPASSの機能を使おう

使い方 $ compass create $ compass watch compass createでCOMPASSが使えるように compass watchで保存される度自動でcssファイルを生成

設定を変えよう 自動でconfig.rbが生成される いじって使いやすいようにしよう

config.rb http_path = "/" css_dir = "stylesheets" sass_dir = "sass" images_dir = "images" javascripts_dir = "javascripts"

config.rb改変1 http_path = "/" css_dir = "css" sass_dir = "css" images_dir = "img" javascripts_dir = "js" という一例 まあCSSとSCSSのファイルは分けたほうが削除するときとか楽

config.rb改変2 # output_style = :expanded or ... 出力ファイルの形式 :expanded そのまま :nested ネストする :compact セレクタと属性を一行に :compressed 圧縮

config.rb改変3 # relative_assets = true trueなら相対パス falseなら絶対パス

config.rb改変4 # line_comments = false falseなら /* line n, style.scss */ というコメントが付かない

リリース用とかに？ $ compass compile -e production config.rb output_style = (environment == :production) ? :compressed : :expanded -e productionをつければ圧縮、付けなければそのままに

@import "COMPASS"; @import "COMPASS"; COMPASSのすべての機能が使える 公式サイトで内部実装が見れる 参考：Compass Reference

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; }

4. COMPASSのコマンド * = compassとする ただの$ compass --helpの日本語化 * create - 新規COMPASSプロジェクト * watch - .scssの監視 * clean - キャッシュ等の削除 普通に使うならこれだけで間に合う 他はhelpからの抜粋だったり内部実装を見るためだったり

5. まとめ

SCSS + COMPASSで 楽しく、楽なCSS製作を！

御清聴ありがとうございました