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

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

Sponsored · Your Podcast. Everywhere. Effortlessly. Share. Educate. Inspire. Entertain. You do you. We'll handle the rest. →
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
AI時代の認知負荷との向き合い方
Avatar for OptFit Corp. optfit
0
160
要求定義・仕様記述・設計・検証の手引き - 理論から学ぶ明確で統一された成果物定義
Avatar for Kuniwak orgachem
PRO
1
220
20260127_試行錯誤の結晶を1冊に。著者が解説 先輩データサイエンティストからの指南書 / author's_commentary_ds_instructions_guide
Avatar for nash_efp nash_efp
1
990
責任感のあるCloudWatchアラームを設計しよう
Avatar for アキキー akihisaikeda
3
180
AI Agent の開発と運用を支える Durable Execution #AgentsInProd
Avatar for izumin5210 izumin5210
7
2.3k
「ブロックテーマでは再現できない」は本当か？
Avatar for Takashi Kitajima inc2734
0
1k
登壇資料を作る時に意識していること #登壇資料_findy
Avatar for konifar konifar
4
1.6k
The Past, Present, and Future of Enterprise Java
Avatar for ivargrimstad ivargrimstad
0
610
IFSによる形状設計／デモシーンの魅力 @ 慶應大学SFC
Avatar for がむ gam0022
1
310
生成AIを活用したソフトウェア開発ライフサイクル変革の現在値
Avatar for Hiroyuki Mori hiroyukimori
PRO
0
100
KIKI_MBSD Cybersecurity Challenges 2025
Avatar for ikema ikema
0
1.3k
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
Avatar for tasshi tasshi
0
210

Featured

See All Featured
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
Avatar for Sam Stephenson sstephenson
162
16k
Unlocking the hidden potential of vector embeddings in international SEO
Avatar for Frank van Dijk frankvandijk
0
170
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
170
Claude Code どこまでも/ Claude Code Everywhere
Avatar for nwiizo nwiizo
61
52k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
182
10k
How to build an LLM SEO readiness audit: a practical framework
Avatar for Nick Samuel nmsamuel
1
650
Making Projects Easy
Avatar for Brett Harned brettharned
120
6.6k
[RailsConf 2023] Rails as a piece of cake
Avatar for Vladimir Dementyev palkan
59
6.3k
How to Get Subject Matter Experts Bought In and Actively Contributing to SEO & PR Initiatives.
Avatar for Liv Day livdayseo
0
67
Believing is Seeing
Avatar for Spiro Bolos oripsolob
1
58
Intergalactic Javascript Robots from Outer Space
Avatar for Vicent Martí tanoku
273
27k
Marketing to machines
Avatar for Jono Alderson jonoalderson
1
4.6k

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