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
2.9k
Sassをはじめよう!
DIST.1 「Sass」 発表資料
448jp | OKI Yoshiya
February 17, 2014
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3k
合意形成のためのFigma活用術
448jp
0
65
書く・即・DONEな仕組みをNuxtで作る
448jp
0
330
神速でワイヤーフレームを作るためのライブラリ
448jp
1
800
Figmaで神速ドキュメント作成術
448jp
3
2.2k
今から始めるFigma超入門
448jp
0
1.5k
零細Web制作会社のリモートワーク事情
448jp
0
380
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
720
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
270
Other Decks in Technology
See All in Technology
家電アプリ共通PF "Linova" のAPI利用とPostman活用事例ご紹介
yukiogawa
0
130
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
『AWS Distinguished Engineerに学ぶ リトライの技術』 #ARC403/Marc Brooker on Try again: The tools and techniques behind resilient systems
quiver
0
130
7日間でハッキングをはじめる本をはじめてみませんか?_ITエンジニア本大賞2025
nomizone
2
1.4k
Bounded Context: Problem or Solution?
ewolff
1
210
Googleマップ/Earthが一般化した 地図タイルのイマ
mapconcierge4agu
1
200
開発スピードは上がっている…品質はどうする? スピードと品質を両立させるためのプロダクト開発の進め方とは #DevSumi #DevSumiB / Agile And Quality
nihonbuson
1
1.3k
Nekko Cloud、 これまでとこれから ~学生サークルが作る、 小さなクラウド
logica0419
2
730
リアルタイム分析データベースで実現する SQLベースのオブザーバビリティ
mikimatsumoto
0
950
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
トラシューアニマルになろう ~開発者だからこそできる、安定したサービス作りの秘訣~
jacopen
2
1.5k
組織貢献をするフリーランスエンジニアという生き方
n_takehata
1
1k
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.3k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
Producing Creativity
orderedlist
PRO
343
39k
Raft: Consensus for Rubyists
vanstee
137
6.8k
KATA
mclloyd
29
14k
Building Adaptive Systems
keathley
40
2.4k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.8k
A Philosophy of Restraint
colly
203
16k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Facilitating Awesome Meetings
lara
51
6.2k
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