$30 off During Our Annual Pro Sale. View Details »

爆速コーディング〜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
22
弾幕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
tsgolintはいかにしてtypescript-goの非公開APIを呼び出しているのか
Avatar for syumai syumai
7
2.3k
まだ間に合う！Claude Code元年をふりかえる
Avatar for nogu nogu66
5
880
クラウドに依存しないS3を使った開発術
Avatar for しめさば simesaba80
0
140
AI時代を生き抜く 新卒エンジニアの生きる道
Avatar for coconala_engineer coconala_engineer
1
390
Pythonではじめるオープンデータ分析〜書籍の紹介と書籍で紹介しきれなかった事例の紹介〜
Avatar for Ryo YOSHI welliving
2
450
脳の「省エネモード」をデバッグする ～System 1（直感）と System 2（論理）の切り替え～
Avatar for HideyukiKitao panda728
PRO
0
110
TerraformとStrands AgentsでAmazon Bedrock AgentCoreのSSO認証付きエージェントを量産しよう！
Avatar for neruneruo neruneruo
4
1.5k
Rediscover the Console - SymfonyCon Amsterdam 2025
Avatar for Robin Chalas chalasr
2
190
Jetpack XR SDKから紐解くAndroid XR開発と技術選定のヒント / about-androidxr-and-jetpack-xr-sdk
Avatar for にー兄さん drumath2237
1
180
SwiftUIで本格音ゲー実装してみた
Avatar for 蛋白（たんぱく・TANPACT） hypebeans
0
470
AIコーディングエージェント（Manus）
Avatar for kondai kondai24
0
210
Deno Tunnel を使ってみた話
Avatar for すずとも kamekyame
0
210

Featured

See All Featured
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
37
7.1k
Joys of Absence: A Defence of Solitary Play
Avatar for Sebastian Deterding codingconduct
1
250
Money Talks: Using Revenue to Get Sh*t Done
Avatar for Nikki Halliwell nikkihalliwell
0
120
Mobile First: as difficult as doing things right
Avatar for Swwweet swwweet
225
10k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
0
710
Fireside Chat
Avatar for paigeccino paigeccino
41
3.8k
30 Presentation Tips
Avatar for Ian Lurie portentint
PRO
1
170
Pawsitive SEO: Lessons from My Dog (and Many Mistakes) on Thriving as a Consultant in the Age of AI
Avatar for David Carrasco davidcarrasco
0
33
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
73
5k
The Curse of the Amulet
Avatar for Matthew Lei leimatthew05
0
4.6k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
370
20k
Skip the Path - Find Your Career Trail
Avatar for Mark Kilby mkilby
0
24

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