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
@Environment(\.keyPath)那么好我不允许你们不知道！ / atEnvironment keyPath is so good and you should know it!
Avatar for Elvis Shi lovee
0
120
さようなら Date。 ようこそTemporal！ 3年間先行利用して得られた知見の共有
Avatar for 8-beeeaaat!!! 8beeeaaat
3
1.5k
How Android Uses Data Structures Behind The Scenes
Avatar for HyunWoo Lee l2hyunwoo
0
470
より安全で効率的な Go コードへ： Protocol Buffers Opaque API の導入
Avatar for shoyan shwatanap
2
360
HTMLの品質ってなんだっけ？ “HTMLクライテリア”の設計と実践
Avatar for una unachang113
4
2.9k
ユーザーも開発者も悩ませない TV アプリ開発 ~Compose の内部実装から学ぶフォーカス制御~
Avatar for Daichi Takeya taked137
0
190
Android端末で実現するオンデバイスLLM 2025
Avatar for Masayuki Suda masayukisuda
1
170
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
Avatar for Takeshi Hagikura thagikura
0
170
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
Avatar for Naoki Kishida kishida
22
5.8k
旅行プランAIエージェント開発の裏側
Avatar for Ippo Matsui / 令和トラベル ippo012
2
920
意外と簡単！？フロントエンドでパスキー認証を実現する WebAuthn
Avatar for teamLab teamlab
PRO
2
770
Amazon RDS 向けに提供されている MCP Server と仕組みを調べてみた/jawsug-okayama-2025-aurora-mcp
Avatar for Takahashi Ikki takahashiikki
1
110

Featured

See All Featured
CSS Pre-Processors: Stylus, Less & Sass
Avatar for Bermon Painter bermonpainter
358
30k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
Avatar for Tammy Everts tammyeverts
8
530
Building a Scalable Design System with Sketch
Avatar for Laura Van Doore lauravandoore
462
33k
Scaling GitHub
Avatar for Zach Holman holman
463
140k
Speed Design
Avatar for Sergey Chernyshev sergeychernyshev
32
1.1k
Unsuck your backbone
Avatar for Amy Palamountain ammeep
671
58k
Designing for humans not robots
Avatar for Tammie Lister tammielis
253
25k
Thoughts on Productivity
Avatar for Jon Yablonski jonyablonski
70
4.8k
How to train your dragon (web standard)
Avatar for Monica Dinculescu notwaldorf
96
6.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
131
19k
Building a Modern Day 
E-commerce SEO Strategy
Avatar for Aleyda Solis aleyda
43
7.6k
Rails Girls Zürich Keynote
Avatar for Gregor Martynus gr2m
95
14k

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