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

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. 御清聴ありがとうございました