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
kanekenl
August 29, 2017
Programming
0
100
爆速コーディング〜Sass入門〜
今更ながらSassの良さを。
kanekenl
August 29, 2017
Tweet
Share
More Decks by kanekenl
See All by kanekenl
圭のお別れ会
kanekenl
0
15
弾幕JS.pdf
kanekenl
0
15
エンジニアからみるデザイナーの凄さ
kanekenl
0
340
jQuery_lesson01
kanekenl
0
31
Other Decks in Programming
See All in Programming
どうしてこうなった命名集 ~🔥編~ / OOC 2024 LT
pictiny
4
2.8k
Data Contracts In Practice With Debezium and Apache Flink (Kafka Summit London)
gunnarmorling
2
280
オブジェクト指向コードレビューの新しいアプローチ
akkie76
3
1.5k
Honoとhtmx
yusukebe
6
1.2k
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
1
1.4k
document.write再考
brn
5
2.5k
フロントエンドパフォーマンス 入門
shouta2
7
1.5k
[スクリプト] Swiftの型推論を学ぼう
omochi
0
110
ONE WEDGE_Company_Information
1wedge
0
170
クソコード動画『カプセル化 Mk-II』 で考える 上手くカプセル化できない理由 / encapsulation2
minodriven
11
7.8k
The Future of C++ Interoperability: Insights from Porting a Game to Swift
teamhimeh
0
270
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
101
6.6k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
153
14k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Teambox: Starting and Learning
jrom
126
8.4k
Rebuilding a faster, lazier Slack
samanthasiow
72
8.2k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
Building Flexible Design Systems
yeseniaperezcruz
317
37k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
18
1.7k
The Straight Up "How To Draw Better" Workshop
denniskardys
227
130k
Practical Orchestrator
shlominoach
180
9.7k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
Transcript
爆速コーディング 〜Sass入門〜
1. 開発のスピードが飛躍的に上がる 2. 保守性が高まる 3. バグの量が減る Sassのメリット
具体的に見ていきましょう
ネスト構造 (入れ子構造) .box 何回書かなあかんねん! .box の名前を変更したら。。。
SCSS CSS
変数 background: #f00; color: #fff; 一元管理したい (一箇所で管理)
SCSS CSS
mixin なんと関数が使える!! background color の指定を関数化してみよう。
SCSS CSS 関数名 引数
インポート ・変数やmixinは、別ファイルにして外部ファイルと して読み込むことができる。 ・「style.css」「about.css」のようにCSSファイルを 複数持つ場合に、共通で使い回すことができます
1. ネスト構造 (入れ子構造) 2. 変数 3. mixin 4. インポート Sassのまとめ(一部)