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
130
Programmer and English
spark6251
0
120
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
290
Other Decks in Technology
See All in Technology
"プロポーザルってなんか怖そう"という境界を超えてみた@TSUDOI by giftee Tech #1
shilo113
0
190
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
3
210
Simplifying Cloud Native app testing across environments with Dapr and Microcks
salaboy
0
150
ComposeではないコードをCompose化する case ビズリーチ / DroidKaigi 2025 koyasai
visional_engineering_and_design
0
110
20251007: What happens when multi-agent systems become larger? (CyberAgent, Inc)
ornew
1
260
AWS Control Tower に学ぶ! IAM Identity Center 権限設計の第一歩 / IAM Identity Center with Control Tower
y___u
0
150
ニッポンの人に知ってもらいたいGISスポット
sakaik
0
130
from Sakichi Toyoda to Agile
kawaguti
PRO
1
120
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
160
ガバメントクラウド(AWS)へのデータ移行戦略の立て方【虎の巻】 / 20251011 Mitsutosi Matsuo
shift_evolve
PRO
2
190
新規事業におけるGORM+SQLx併用アーキテクチャ
hacomono
PRO
0
220
生成AIとM5Stack / M5 Japan Tour 2025 Autumn 東京
you
PRO
0
250
Featured
See All Featured
The Cult of Friendly URLs
andyhume
79
6.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
We Have a Design System, Now What?
morganepeng
53
7.8k
Typedesign – Prime Four
hannesfritz
42
2.8k
Documentation Writing (for coders)
carmenintech
75
5.1k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
31
6.2k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Balancing Empowerment & Direction
lara
4
690
Optimizing for Happiness
mojombo
379
70k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Into the Great Unknown - MozCon
thekraken
40
2.1k
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製作を!
御清聴ありがとうございました