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
ノーコードからの脱出 -地獄のデスロード- / Escape from Base44
Avatar for Keisuke69 keisuke69
0
710
Java_プロセスのメモリ監視の落とし穴_NMT_で見抜けない_glibc_キャッシュ問題_.pdf
Avatar for NTTドコモソリューションズ　Java担当 ntt_dsol_java
0
200
Register is more than clipboard
Avatar for Satoru Kitaguchi satorunooshie
1
480
モビリティSaaSにおけるデータ利活用の発展
Avatar for Nealle nealle
0
460
問題の見方を変える「システム思考」超入門
Avatar for panda_program panda_program
0
270
自動テストのアーキテクチャとその理由ー大規模ゲーム開発の場合ー
Avatar for SEGADevTech segadevtech
2
1k
自動テストを活かすためのテスト分析・テスト設計の進め方/JaSST25 Shikoku
Avatar for Hiroki Iseri goyoki
3
690
目的で駆動する、AI時代のアーキテクチャ設計 / purpose-driven-architecture
Avatar for MinoDriven minodriven
6
1.3k
What's New in Web AI?
Avatar for Christian Liebel christianliebel
PRO
0
130
Vueで学ぶデータ構造入門 リンクリストとキューでリアクティビティを捉える / Vue Data Structures: Linked Lists and Queues for Reactivity
Avatar for konkarin konkarin
1
300
Phronetic Team with AI - Agile Japan 2025 closing
Avatar for Kenji Hiranabe hiranabe
2
620
Eloquentを使ってどこまでコードの治安を保てるのか？を新人が考察してみた
Avatar for ito_kohhh itokoh0405
0
3.2k

Featured

See All Featured
Statistics for Hackers
Avatar for Jake VanderPlas jakevdp
799
220k
Product Roadmaps are Hard
Avatar for C. Todd Lombardo iamctodd
PRO
55
12k
Bash Introduction
Avatar for André Augusto Costa Santos 62gerente
615
210k
Principles of Awesome APIs and How to Build Them.
Avatar for Keavy McMinn keavy
127
17k
GraphQLの誤解/rethinking-graphql
Avatar for sonatard sonatard
73
11k
The Art of Programming - Codeland 2020
Avatar for Erika Heidi erikaheidi
56
14k
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
46
2.6k
A Modern Web Designer's Workflow
Avatar for Chris Coyier chriscoyier
697
190k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
333
22k
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
7.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
9
980
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
340
57k

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