Top Banner
SCSS + COMPASS 入門 2013.5.18 @姫路IT系勉強会vol. 17 @spark6251 (N@N)
32

SCSS + COMPASS 入門

May 14, 2015

Download

Technology

NOAN

姫路IT系勉強会で発表した内容です。
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: SCSS + COMPASS 入門

SCSS + COMPASS 入門

2013.5.18 @姫路IT系勉強会vol. 17 @spark6251 (N@N)

Page 2: SCSS + COMPASS 入門

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

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

Page 3: SCSS + COMPASS 入門

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

Page 4: SCSS + COMPASS 入門

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

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

Page 5: SCSS + COMPASS 入門

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

Page 6: SCSS + COMPASS 入門

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

Page 7: SCSS + COMPASS 入門

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

Page 8: SCSS + COMPASS 入門

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

Page 9: SCSS + COMPASS 入門

2. SCSSの文法 SCSSつおい

Page 10: SCSS + COMPASS 入門

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

Page 11: SCSS + COMPASS 入門

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

Page 12: SCSS + COMPASS 入門

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

Page 13: SCSS + COMPASS 入門

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

Page 14: SCSS + COMPASS 入門

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

Page 15: SCSS + COMPASS 入門

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

a {hoge}

Page 16: SCSS + COMPASS 入門

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

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

Page 17: SCSS + COMPASS 入門

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

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

Page 18: SCSS + COMPASS 入門

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

p { hoge foo }

Page 19: SCSS + COMPASS 入門

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

Page 20: SCSS + COMPASS 入門

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

Page 21: SCSS + COMPASS 入門

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

Page 22: SCSS + COMPASS 入門

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

Page 23: SCSS + COMPASS 入門

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

Page 24: SCSS + COMPASS 入門

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

Page 25: SCSS + COMPASS 入門

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

Page 26: SCSS + COMPASS 入門

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

Page 27: SCSS + COMPASS 入門

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

Page 28: SCSS + COMPASS 入門

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

Page 29: SCSS + COMPASS 入門

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

Page 30: SCSS + COMPASS 入門

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

Page 31: SCSS + COMPASS 入門

5. まとめ

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

Page 32: SCSS + COMPASS 入門

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