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
150
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
マネジメントって難しい、けどおもしろい / Management is tough, but fun! #em_findy
ar_tama
7
1.1k
Sansanのデータプロダクトマネジメントのアプローチ
sansantech
PRO
0
160
Tokyo_reInforce_2025_recap_iam_access_analyzer
hiashisan
0
190
Reach American Airlines®️ Instantly: 19 Calling Methods for Fast Support in the USA
flyamerican
1
170
OPENLOGI Company Profile for engineer
hr01
1
34k
Zero Data Loss Autonomous Recovery Service サービス概要
oracle4engineer
PRO
2
7.8k
AI時代の開発生産性を加速させるアーキテクチャ設計
plaidtech
PRO
3
160
PO初心者が考えた ”POらしさ”
nb_rady
0
210
FOSS4G 2025 KANSAI QGISで点群データをいろいろしてみた
kou_kita
0
400
Operating Operator
shhnjk
1
590
データグループにおけるフロントエンド開発
lycorptech_jp
PRO
1
110
開発生産性を測る前にやるべきこと - 組織改善の実践 / Before Measuring Dev Productivity
kaonavi
10
4.6k
Featured
See All Featured
Done Done
chrislema
184
16k
Bash Introduction
62gerente
613
210k
YesSQL, Process and Tooling at Scale
rocio
173
14k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
The Cult of Friendly URLs
andyhume
79
6.5k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
138
34k
GitHub's CSS Performance
jonrohan
1031
460k
Embracing the Ebb and Flow
colly
86
4.7k
Practical Orchestrator
shlominoach
189
11k
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製作を!
御清聴ありがとうございました