• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
SCSS + COMPASS 入門
 

SCSS + COMPASS 入門

on

  • 1,323 views

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

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

Statistics

Views

Total Views
1,323
Views on SlideShare
1,214
Embed Views
109

Actions

Likes
3
Downloads
9
Comments
0

3 Embeds 109

http://d.hatena.ne.jp 68
http://spark6251.hatenablog.com 38
https://twitter.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    SCSS + COMPASS 入門 SCSS + COMPASS 入門 Presentation Transcript

    • 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 compassWindowsでRubyのインストールができなかったのでDebianとかで考えてます[てきとう]
    • 2. SCSSの文法SCSSつおい
    • ネストul {hogeli {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 {hogefoo}
    • 3. SCSS + COMPASS• COMPASSつおい• .scssを監視して自動でコンパイルしよう• COMPASSの機能を使おう
    • 使い方$ compass create$ compass watchcompass createでCOMPASSが使えるようにcompass watchで保存される度自動でcssファイルを生成
    • 設定を変えよう自動でconfig.rbが生成されるいじって使いやすいようにしよう
    • config.rbhttp_path = "/"css_dir = "stylesheets"sass_dir = "sass"images_dir = "images"javascripts_dir = "javascripts"
    • config.rb改変1http_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 = truetrueなら相対パスfalseなら絶対パス
    • config.rb改変4# line_comments = falsefalseなら/* line n, style.scss */というコメントが付かない
    • リリース用とかに?$ compass compile -e productionconfig.rboutput_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製作を!
    • 御清聴ありがとうございました