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
250
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
130
Finite Automaton equivalents to Regular Expression
spark6251
0
98
Programmer and English
spark6251
0
100
Let's go to the study session
spark6251
0
84
Quantum Computation
spark6251
0
250
Introduction to use Grunt
spark6251
0
77
Introduction to Regular Expression
spark6251
0
320
Introduction to Psychology
spark6251
1
230
Introduction to HTML5
spark6251
0
240
Other Decks in Technology
See All in Technology
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
5
37k
require(ESM)とECMAScript仕様
uhyo
4
980
[新卒向け研修資料] テスト文字列に「うんこ」と入れるな(2024年版)
infiniteloop_inc
5
18k
TechFeed Experts Night#27 〜 フロントエンドフレームワーク最前線 (Svelte)
baseballyama
2
590
EMとして2023年度に頑張ったこと / What we did well in FY2023 as a EM
pauli
1
250
【SORACOM UG 東海】あらゆるモノがつながる社会へ、IoT と SORACOM
soracom
PRO
1
140
Python と Snowflake はズッ友だょ!~ Snowflake の Python 関連機能をふりかえる ~
__allllllllez__
2
140
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
330
認知症フレンドリーテックとスタックチャン
naokiuc
0
260
ワールドカフェI /チューターを改良する / World Café I and Improving the Tutors
ks91
PRO
0
150
20分で完全に理解するGrafanaダッシュボード
hamadakoji
5
890
Building Dashboards as a Hobby
egmc
0
370
Featured
See All Featured
Become a Pro
speakerdeck
PRO
13
4.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
Designing for Performance
lara
601
67k
The Cult of Friendly URLs
andyhume
74
5.7k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
8
1.3k
StorybookのUI Testing Handbookを読んだ
zakiyama
13
4.6k
Web Components: a chance to create the future
zenorocha
306
41k
Making Projects Easy
brettharned
109
5.5k
The Language of Interfaces
destraynor
151
23k
Principles of Awesome APIs and How to Build Them.
keavy
121
16k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
79
43k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
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製作を!
御清聴ありがとうございました