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
36

Other Decks in Programming

See All in Programming
Porting a visionOS App to Android XR
Avatar for Akio Itaya akkeylab
0
240
“いい感じ“な定量評価を求めて - Four Keysとアウトカムの間の探求 -
Avatar for Nealle nealle
1
5.7k
明示と暗黙 ー PHPとGoの インターフェイスの違いを知る
Avatar for shimabox shimabox
2
470
新メンバーも今日から大活躍！SREが支えるスケールし続ける組織のオンボーディング
Avatar for HonMarkHunt honmarkhunt
3
4k
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
Avatar for Hayato OKUMOTO falcon8823
5
1.1k
なぜ適用するか、移行して理解するClean Architecture 〜構造を超えて設計を継承する〜 / Why Apply, Migrate and Understand Clean Architecture - Inherit Design Beyond Structure
Avatar for shiro seike seike460
PRO
3
740
Team topologies and the microservice architecture: a synergistic relationship
Avatar for Chris Richardson cer
PRO
0
1.2k
GitHub Copilot and GitHub Codespaces Hands-on
Avatar for Kento.Yamada ymd65536
2
140
Goで作る、開発・CI環境
Avatar for Shinpei Mine sin392
0
190
プロダクト志向なエンジニアがもう一歩先の価値を目指すために意識したこと
Avatar for Nealle nealle
0
120
技術同人誌をMCP Serverにしてみた
Avatar for 74th(Atsushi Morimoto) 74th
1
600
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
Avatar for uutan1108 ohmori_yusuke
2
260

Featured

See All Featured
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
231
18k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
35
2.4k
Producing Creativity
Avatar for Steve Smith orderedlist
PRO
346
40k
What's in a price? How to price your products and services
Avatar for Michael Herold michaelherold
246
12k
[RailsConf 2023 Opening Keynote] The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
29
9.5k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
512
110k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
2.7k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
126
17k
Dealing with People You Can't Stand - Big Design 2015
Avatar for Cassini Nazir cassininazir
367
26k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
94
6.1k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
107
19k

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