Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Introduction to SCSS+COMPASS
Search
N@N
May 18, 2013
Technology
0
280
Introduction to SCSS+COMPASS
姫路IT系勉強会 Vol.17で発表した内容です.
N@N
May 18, 2013
Tweet
Share
More Decks by N@N
See All by N@N
introduction to modern numerical analysis
spark6251
0
160
Finite Automaton equivalents to Regular Expression
spark6251
0
120
Programmer and English
spark6251
0
110
Let's go to the study session
spark6251
0
100
Quantum Computation
spark6251
0
270
Introduction to use Grunt
spark6251
0
86
Introduction to Regular Expression
spark6251
0
340
Introduction to Psychology
spark6251
1
270
Introduction to HTML5
spark6251
0
280
Other Decks in Technology
See All in Technology
shake-upを科学する
rsakata
7
1k
AI Ready API ─ AI時代に求められるAPI設計とは?/ AI-Ready API - Designing MCP and APIs in the AI Era
yokawasa
6
1.9k
All About Sansan – for New Global Engineers
sansan33
PRO
1
1.2k
セキュアな社内Dify運用と外部連携の両立 ~AIによるAPIリスク評価~
zozotech
PRO
0
120
american aa airlines®️ USA Contact Numbers: Complete 2025 Support Guide
aaguide
0
500
Snowflake Intelligenceという名のAI Agentが切り開くデータ活用の未来とその実現に必要なこと@SnowVillage『Data Management #1 Summit 2025 Recap!!』
ryo_suzuki
1
160
本当にわかりやすいAIエージェント入門
segavvy
1
340
全部AI、全員Cursor、ドキュメント駆動開発 〜DevinやGeminiも添えて〜
rinchsan
10
5.1k
ClaudeCodeにキレない技術
gtnao
1
860
サイバーエージェントグループのSRE10年の歩みとAI時代の生存戦略
shotatsuge
4
1k
安定した基盤システムのためのライブラリ選定
kakehashi
PRO
3
130
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
3
1.9k
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Navigating Team Friction
lara
187
15k
For a Future-Friendly Web
brad_frost
179
9.8k
How to train your dragon (web standard)
notwaldorf
96
6.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
The Straight Up "How To Draw Better" Workshop
denniskardys
235
140k
The Cost Of JavaScript in 2023
addyosmani
51
8.6k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
Making Projects Easy
brettharned
116
6.3k
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 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製作を!
御清聴ありがとうございました