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

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

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
26
弾幕JS.pdf
Avatar for kanekenl kanekenl
0
24
エンジニアからみるデザイナーの凄さ
Avatar for kanekenl kanekenl
0
420
jQuery_lesson01
Avatar for kanekenl kanekenl
0
40

Other Decks in Programming

See All in Programming
ふつうのFeature Flag実践入門
Avatar for irof irof
6
3.2k
権限チェックの一貫性を型で守る TypeScript による多層防御
Avatar for aster-mnch (kitagawa) mnch
4
900
Zod v4 Codec でスキーマに型変換を埋め込む REST API 設計 #TSKaigi2026
Avatar for Ryutaro Yako ryutaro_yako
0
160
AIエージェントの隔離技術の徹底比較
Avatar for kawayu kawayu
0
440
Talking to terminals (and how they talk back) (KotlinConf 2026)
Avatar for Jake Wharton jakewharton
PRO
1
150
技術記事、AIに書かせるか、自分で書くか？ 〜それでも私が自分の手で書く理由〜 / #QiitaConference
Avatar for Junichi Ito jnchito
2
1.1k
Old Dog, New Tricks: The Java 25 Reinvention - JNation
Avatar for A N M Bazlur Rahman bazlur_rahman
0
130
Why Laravel apps break—Mastering the fundamentals to keep them maintainable
Avatar for 武田 憲太郎 kentaroutakeda
1
300
[BalkanRuby 2026] Drop your app/services!
Avatar for Vladimir Dementyev palkan
3
710
関係性から理解する"同一性"の型用語たち
Avatar for pvcresin pvcresin
2
590
CSC307 Lecture 17
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
250
AI駆動開発で崩れていくコードベースを立て直す
Avatar for Kyoko NR kyoko_nr_nr
1
390

Featured

See All Featured
GraphQLとの向き合い方2022年版
Avatar for Yosuke Kurami quramy
50
15k
Designing for humans not robots
Avatar for Tammie Lister tammielis
254
26k
WENDY [Excerpt]
Avatar for Tessa Abrams tessaabrams
11
38k
The AI Revolution Will Not Be Monopolized: How open-source beats economies of scale, even for LLMs
Avatar for Ines Montani inesmontani
PRO
3
3.5k
AI Search:
Where Are We & What Can We Do About It?
Avatar for Aleyda Solis aleyda
0
7.5k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
79
6.9k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
300
Embracing the Ebb and Flow
Avatar for Simon Collison colly
88
5.1k
Prompt Engineering for Job Search
Avatar for Mfonobong Umondia mfonobong
0
320
SEOcharity - Dark patterns in SEO and UX: How to avoid them and build a more ethical web
Avatar for Sara Fernández Carmona sarafernandez
0
190
Claude Code のすすめ
Avatar for schroneko schroneko
67
220k
Exploring the relationship between traditional SERPs and Gen AI search
Avatar for Ray Grieselhuber raygrieselhuber
PRO
2
4k

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