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

Other Decks in Programming

See All in Programming
その面倒な作業、「Dart」にやらせませんか？ Flutter開発者のための業務効率化
Avatar for YomEngine yordgenome03
1
130
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
Avatar for Oliver Drotbohm olivergierke
3
910
CSC509 Lecture 04
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
300
Building, Deploying, and Monitoring Ruby Web Applications with Falcon (Kaigi on Rails 2025)
Avatar for Samuel Williams ioquatix
4
2.3k
テーブル定義書の構造化抽出して、生成AIでDWH分析を試してみた / devio2025tokyo
Avatar for kasacchiful kasacchiful
0
190
Cursorハンズオン実践！
Avatar for Ikko Eltociear Ashimine eltociear
2
1.1k
実践Claude Code：20の失敗から学ぶAIペアプログラミング
Avatar for 武田隆志 takedatakashi
15
5.8k
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
Avatar for aokirishima aokswork3
0
250
他言語経験者が Golangci-lint を最初のコーディングメンターにした話 / How Golangci-lint Became My First Coding Mentor: A Story from a Polyglot Programmer
Avatar for uMa uma31
0
250
CSC305 Lecture 06
Avatar for Javier Gonzalez-Sanchez javiergs
PRO
0
250
品質ワークショップをやってみた
Avatar for Nealle nealle
0
540
なぜGoのジェネリクスはこの形なのか？ Featherweight Goが明かす設計の核心
Avatar for Ryotaro ryotaros
7
1.1k

Featured

See All Featured
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
Gamification - CAS2011
Avatar for David Bonilla davidbonilla
81
5.5k
Learning to Love Humans: Emotional Interface Design
Avatar for Aarron Walter aarron
274
41k
Why You Should Never Use an ORM
Avatar for John Nunemaker jnunemaker
PRO
59
9.6k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Stop Working from a Prison Cell
Avatar for Chris Michel hatefulcrawdad
271
21k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.2k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.5k
How To Stay Up To Date on Web Technology
Avatar for Chris Coyier chriscoyier
791
250k
The Invisible Side of Design
Avatar for Vitaly Friedman smashingmag
302
51k
For a Future-Friendly Web
Avatar for Brad Frost brad_frost
180
10k
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
13
910

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