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
Sassをはじめよう!
Search
448jp | OKI Yoshiya
February 17, 2014
Technology
0
3k
Sassをはじめよう!
DIST.1 「Sass」 発表資料
448jp | OKI Yoshiya
February 17, 2014
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
人はなぜコミュニティとつながると幸せを感じるのか
448jp
3
290
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.7k
合意形成のためのFigma活用術
448jp
0
120
書く・即・DONEな仕組みをNuxtで作る
448jp
0
370
神速でワイヤーフレームを作るためのライブラリ
448jp
1
850
Figmaで神速ドキュメント作成術
448jp
3
2.4k
今から始めるFigma超入門
448jp
0
1.6k
零細Web制作会社のリモートワーク事情
448jp
0
420
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
750
Other Decks in Technology
See All in Technology
250627 関西Ruby会議08 前夜祭 RejectKaigi「DJ on Ruby Ver.0.1」
msykd
PRO
2
360
低レイヤを知りたいPHPerのためのCコンパイラ作成入門 完全版 / Building a C Compiler for PHPers Who Want to Dive into Low-Level Programming - Expanded
tomzoh
4
3.4k
作曲家がボカロを使うようにPdMはAIを使え
itotaxi
0
350
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
290
モバイル界のMCPを考える
naoto33
0
280
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1k
「良さそう」と「とても良い」の間には 「良さそうだがホンマか」がたくさんある / 2025.07.01 LLM品質Night
smiyawaki0820
1
420
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
1.2k
フィンテック養成勉強会#54
finengine
0
200
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
310
Model Mondays S2E03: SLMs & Reasoning
nitya
0
230
AWS テクニカルサポートとエンドカスタマーの中間地点から見えるより良いサポートの活用方法
kazzpapa3
2
570
Featured
See All Featured
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
What’s in a name? Adding method to the madness
productmarketing
PRO
23
3.5k
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
720
How to Think Like a Performance Engineer
csswizardry
24
1.7k
Transcript
Sassをはじめよう! 沖 良矢(世路庵) 2014.2.14 (Fri) DIST.1 「Sass」
自己紹介 沖 良矢 / OKI Yoshiya @448jp インタラクションデザイナー UNIQLO HAPPY
GIFT (2013) Web Designing (2009~) McCANN WG JAPAN (2012)
お品書き Sassとは何か 制作環境のセットアップ 実用テクニック
Sassについて、 一番知りたいことって なんですか? What do you want to know most
about Sass?
Sassとは何か Chapter.1 | What’s Sass ?
Sass is the most mature, stable, and powerful professional grade
CSS extension language in the world. http://sass-lang.com/
Sassは、世界で最も成熟し安定 した、かつパワフルなプロ級の CSSの拡張言語である。 http://sass-lang.com/
とりあえずどんなもんか #content { background-color: #ff0000; } #content h1 { margin-bottom:
1em; } #content p { line-height: 2em; }
とりあえずどんなもんか #content { background-color: #ff0000; } #content h1 { margin-bottom:
1em; } #content p { line-height: 2em; } #content { background-color: #ff0000; h1 { margin-bottom: 1em; } p { line-height: 2em; } }
サス【Sass】 ≪Syntactically Awesome Style Sheets≫ 構文的に イケてる スタイルシート CSSを効率よく記述するための拡張言語 CSSプリプロセッサ、CSSメタ言語とも
他のCSSプリプロセッサ LESS Bootstrapで採用 機能はSassより少ない クライアントサイドで動的 にCSSを生成 Stylus Node.jsのモジュールとし て誕生 簡素化した記述
Sassの ここがイイ! すべてのバージョンのCSSとの互換性 機能が豊富 7年以上に渡る開発、サポート 採用企業が多い
(LINE, COOKPAD, CyberAgent, NHN Japan…) ユーザー数が多い フレームワークの充実
SASS記法とSCSS記法 #content background-color: #ff0000 h1 margin-bottom: 1em p line-height: 2em
#content { background-color: #ff0000; h1 { margin-bottom: 1em; } p { line-height: 2em; } } SASS記法 SCSS記法
Sassの利用手順 1. Sassファイルを記述する なお、拡張子は「.scss」(SASS記法では「.sass」) 2. 直接Webブラウザに読み込めないので、コンパイルし てCSSに変換 3. CSSとしてWebブラウザに読み込む
ルールのネスト #content { background-color: #ff0000; h1 { margin-bottom: 1em; }
p { line-height: 2em; } } #content { background-color: red; } #content h1 { margin-bottom: 1em; } #content p { line-height: 2em; } Sass CSS
親セレクタの参照 #content a { background-color: #ff0000; &:hover { background-color: #ffff00;
} } #content a { background-color: #ff0000; } #content a:hover { background-color: #ffff00; } Sass CSS
プロパティのネスト #content .book { border: { left: 5px solid #ff0000;
bottom: { width: 5px; style: solid; color: #ff0000; } } } #content .book { border-left: 5px solid #FF0000; border-bottom-width: 5px; border-bottom-style: solid; border-bottom-color: #FF0000; } Sass CSS
1行コメント // イケてるスタイル #content { background-color: #ff0000; } #content {
background-color: #ff0000; } Sass CSS
通常のコメント /* イケてるスタイル */ #content { background-color: #ff0000; } /*
イケてるスタイル */ #content { background-color: #ff0000; } Sass CSS
通常のコメント(compressedフォーマットの場合) /* イケてるスタイル */ #content { background-color: #ff0000; } #content{background-color:#ff0000;}
Sass CSS
絶対に残るコメント(compressedフォーマットの場合も) /*! 絶対にイケてるスタイル */ #content { background-color: #ff0000; } /*!
絶対にイケてるスタイル */#content{background-color:#ff0000;} Sass CSS
変数 $niceColor: #ff0000; #content { background-color: $niceColor; h1 { border-bottom:
1px solid $niceColor; } } #content { background-color: red; } #content h1 { border-bottom: 1px solid red; } Sass CSS
変数のスコープ #content { $niceColor: #ff0000; background-color: $niceColor; } h1 {
border-bottom: 1px solid $niceColor; } error screen.scss (Line 6: Undefined variable: "$niceColor".) Sass CSS
四則演算 #content { background-color: #ff0000; width: 980px – 40px; }
#content { background-color: #ff0000; width: 940px; } Sass CSS
関数 #content { background-color: lighten(#ff0000, 20%); } #content { background-color:
#ff6666; } Sass CSS
独自の関数 @function getDouble($value) { @return $value * 2; } #content
{ background-color: #ff0000; width: getDouble(200px); } #content { background-color: #ff0000; width: 400px; } Sass CSS
インターポレーション(補間) $imageBasePath: "images/"; #content { background-image: url(#{$imageBasePath}hoge.png); } #content {
background-image: url(images/hoge.png); } Sass CSS
スタイルの継承 .content { background-color: #ff0000; border: 1px solid #000000; }
.sub { @extend .content; } .content, .sub { background-color: #ff0000; border: 1px solid #000000; } Sass CSS
ミックスイン @mixin clearfix { &:after { content: ""; clear: both;
display: block; } } .content { @include clearfix; background-color: #ff0000; } .content { background-color: #ff0000; } .content:after { content: ""; clear: both; display: block; } Sass CSS
ミックスイン(引数) @mixin myBorder($width) { border: $width solid #00ff00; } .content
{ @include myBorder(5px); background-color: #ff0000; } .content { border: 5px solid lime; background-color: #ff0000; } Sass CSS
その他の機能 @import パーシャル プレースホルダーセレクタ 変数のデフォルト値 可変長引数 コンテンツブロック コントロールディレクティブ コマンドオプション 他、多数
制作環境のセットアップ Chapter.2 | Setup the production environment
Sassの利用環境 Webサービス GUI CUI IDE
デモ
実用テクニック Chapter.3 | Practical technique
時間の都合で省略… 別の機会で。
まとめ At the end
まとめ Sassは、CSSを効率的に書くための拡張言語 制作環境は自分にあったものを
Thank you ! Photo Credit: mak1e Nathan O'Nions
*christopher* Brett Jordan