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

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

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for kanekenl kanekenl
August 29, 2017
Programming
110
0

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

今更ながらSassの良さを。

Avatar for kanekenl

kanekenl

August 29, 2017

More Decks by kanekenl

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

Other Decks in Programming

See All in Programming
我々はなぜ「層」を分けるのか〜「関心の分離」と「抽象化」で手に入れる変更に強いシンプルな設計〜 #phperkaigi / PHPerKaigi 2026
Avatar for shogogg shogogg
2
890
Go_College_最終発表資料__外部公開用_.pdf
Avatar for xe-pc23 xe_pc23
0
160
「話せることがない」を乗り越える 〜日常業務から登壇テーマをつくる思考法〜
Avatar for ShoheiMitani shoheimitani
4
640
Nuxt Server Components
Avatar for wattanx wattanx
0
260
車輪の再発明をしよう！PHP で実装して学ぶ、Web サーバーの仕組みと HTTP の正体
Avatar for H1R0 h1r0
3
520
10 Tips of AWS ～Gen AI on AWS～
Avatar for matsukada licux
5
200
YJITとZJITにはイカなる違いがあるのか？
Avatar for yamanao nakiym
0
180
ふりがな Deep Dive try! Swift Tokyo 2026
Avatar for watura watura
0
180
iOS機能開発のAI環境と起きた変化
Avatar for Ryu-nakayama ryunakayama
0
170
AIエージェントで業務改善してみた
Avatar for takumi taku271
0
500
RSAが破られる前に知っておきたい 耐量子計算機暗号(PQC)入門 / Intro to PQC: Preparing for the Post-RSA Era
Avatar for mackey0225 mackey0225
3
130
VueエンジニアがReactを触って感じた_設計の違い
Avatar for kouki.miura koukimiura
0
170

Featured

See All Featured
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
870
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
10
1.1k
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
Avatar for soudai sone soudai
PRO
64
53k
SEO in 2025: How to Prepare for the Future of Search
Avatar for Michael King ipullrank
3
3.4k
ピンチをチャンスに：未来をつくるプロダクトロードマップ #pmconf2020
Avatar for Aki / @LoveIdahoBurger aki_iinuma
128
55k
Raft: Consensus for Rubyists
Avatar for Patrick Van Stee vanstee
141
7.4k
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
110
Ten Tips & Tricks for a 🌱 transition
Avatar for Manu Carrasco Molina stuffmc
0
97
The Mindset for Success: Future Career Progression
Avatar for Greg Gifford greggifford
PRO
0
310
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
1.1k
Gemini Prompt Engineering: Practical Techniques for Tangible AI Outcomes
Avatar for Mfonobong Umondia mfonobong
2
360
Jamie Indigo - Trashchat’s Guide to Black Boxes: Technical SEO Tactics for LLMs
Avatar for Tech SEO Connect techseoconnect
PRO
0
99

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のまとめ（一部）