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
100
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
240
Introduction to HTML5
spark6251
0
240
Other Decks in Technology
See All in Technology
Prisma ORMを2年運用して培ったノウハウを共有する
tockn
19
5.1k
Blazor WASM × Code-first gRPC で始める C# ⼤統⼀理論
sansantech
PRO
1
920
#phpconkagawa レガシーコードにもオブザーバビリティを 〜少しずつ始めるサービス監視〜
yamato_sorariku
0
570
TypescriptでのContextualな構造化ロギングと社内全体への導入
leveragestech
3
620
1Q86
kawaguti
PRO
2
190
OpenID Foundation updates
fujie
0
240
シンプルなHITL機械学習と様々なタスクにおけるHITL機械学習
naohachi89
0
340
TDD - Test Driven Drupal
opdavies
0
3k
20240509 CloudWatch でいろいろなものを監視してみよう
masaruogura
1
120
Security Hubのセキュリティスコアはどうやって計算されるか
toru_kubota
0
110
拓展QA日常工作的邊界
line_developers_tw
PRO
0
650
令和版ソフトウェアエンジニアの情報収集術 PHPカンファレンス香川2024
ysknsid25
4
910
Featured
See All Featured
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
The Cost Of JavaScript in 2023
addyosmani
21
4k
Designing Experiences People Love
moore
136
23k
Fantastic passwords and where to find them - at NoRuKo
philnash
39
2.5k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.7k
Building Adaptive Systems
keathley
32
1.9k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
Learning to Love Humans: Emotional Interface Design
aarron
268
39k
Large-scale JavaScript Application Architecture
addyosmani
504
110k
Into the Great Unknown - MozCon
thekraken
15
1.1k
A Modern Web Designer's Workflow
chriscoyier
689
190k
What’s in a name? Adding method to the madness
productmarketing
PRO
17
2.7k
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製作を!
御清聴ありがとうございました