Upgrade to Pro — share decks privately, control downloads, hide ads and more …

爆速コーディング〜Sass入門〜

Avatar for kanekenl kanekenl
August 29, 2017
Programming
0
110

 爆速コーディング〜Sass入門〜

今更ながらSassの良さを。

Avatar for kanekenl

kanekenl

August 29, 2017
Tweet

More Decks by kanekenl

See All by kanekenl
圭のお別れ会
Avatar for kanekenl kanekenl
0
23
弾幕JS.pdf
Avatar for kanekenl kanekenl
0
22
エンジニアからみるデザイナーの凄さ
Avatar for kanekenl kanekenl
0
410
jQuery_lesson01
Avatar for kanekenl kanekenl
0
39

Other Decks in Programming

See All in Programming
QAフローを最適化し、品質水準を満たしながらリリースまでの期間を最短化する #RSGT2026
Avatar for shibayu36 shibayu36
2
4.4k
組織で育むオブザーバビリティ
Avatar for ryotaro kobayashi ryota_hnk
0
180
dchart: charts from deck markup
Avatar for Anthony Starks ajstarks
3
1k
AtCoder Conference 2025
Avatar for shindannin shindannin
0
1.1k
Fluid Templating in TYPO3 14
Avatar for Simon Praetorius s2b
0
130
それ、本当に安全？ ファイルアップロードで見落としがちなセキュリティリスクと対策
Avatar for ikechi penpeen
7
3.9k
AIと一緒にレガシーに向き合ってみた
Avatar for nyafunta9858 nyafunta9858
0
250
CSC307 Lecture 02
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
1
780
AI時代のキャリアプラン「技術の引力」からの脱出と「問い」へのいざない / tech-gravity
Avatar for MinoDriven minodriven
21
7.4k
AIフル活用時代だからこそ学んでおきたい働き方の心得
Avatar for shinoyu shinoyu
0
140
Grafana：建立系統全知視角的捷徑
Avatar for Blueswen blueswen
0
330
ノイジーネイバー問題を解決する 公平なキューイング
Avatar for Shoichi Ochi occhi
0
110

Featured

See All Featured
AI in Enterprises - Java and Open Source to the Rescue
Avatar for ivargrimstad ivargrimstad
0
1.1k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
29
4.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
38
2.7k
A Guide to Academic Writing Using Generative AI - A Workshop
Avatar for Kenji Saito ks91
PRO
0
210
Building Experiences: Design Systems, User Experience, and Full Site Editing
Avatar for Michelle Schulp Hunt marktimemedia
0
410
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
128
17k
The Hidden Cost of Media on the Web [PixelPalooza 2025]
Avatar for Tammy Everts tammyeverts
2
200
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
120k
Measuring & Analyzing Core Web Vitals
Avatar for Philip Tellis bluesmoon
9
760
We Analyzed 250 Million AI Search Results: Here's What I Found
Avatar for Josh Blyskal joshbly
1
750
StorybookのUI Testing Handbookを読んだ
Avatar for Shingo Yamazaki zakiyama
31
6.6k
Game over? The fight for quality and originality in the time of robots
Avatar for Wayne Barker wayneb77
1
120

Transcript

  1. 爆速コーディング 〜Sass入門〜

  2. 1. 開発のスピードが飛躍的に上がる 2. 保守性が高まる 3. バグの量が減る Sassのメリット

  3. 具体的に見ていきましょう

  4. ネスト構造 (入れ子構造) .box 何回書かなあかんねん！ .box の名前を変更したら。。。

  5. SCSS CSS

  6. 変数 background: #f00; color: #fff; 一元管理したい （一箇所で管理）

  7. SCSS CSS

  8. mixin なんと関数が使える！！ background color の指定を関数化してみよう。

  9. SCSS CSS 関数名 引数

  10. インポート ・変数やmixinは、別ファイルにして外部ファイルと して読み込むことができる。 ・「style.css」「about.css」のようにCSSファイルを 複数持つ場合に、共通で使い回すことができます

  11. 1. ネスト構造 (入れ子構造) 2. 変数 3. mixin 4. インポート Sassのまとめ（一部）