Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Front End Badassery with Sass

Avatar for Jessica Eldredge Jessica Eldredge
September 15, 2012
Design
9
390

Front End Badassery with Sass

An intro to the features of Sass/SCSS
Avatar for Jessica Eldredge

Jessica Eldredge

September 15, 2012
Tweet

More Decks by Jessica Eldredge

See All by Jessica Eldredge
Prototyping Layout with CSS Grid - RevolutionConf 2018
Avatar for Jessica Eldredge jessabean
1
310
Prototyping Layout with CSS Grid - Refresh DC
Avatar for Jessica Eldredge jessabean
1
420
Sketchnoting: Creative Notes for Technical Content
Avatar for Jessica Eldredge jessabean
7
1.3k

Other Decks in Design

See All in Design
もうひとつのアーキテクチャ #kichijojipm
Avatar for kondoyuko kondoyuko
0
240
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
Avatar for Shingo Suzuki shingo2000
1
1.5k
クライアントワークにおける UXリサーチの実践
Avatar for Kozo Taira kozotaira
0
680
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
Avatar for 山口哲弘 t2yamaguchi429
0
410
Echoes Boomerang
Avatar for Cloud Yu artcloudyu
PRO
0
240
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
Avatar for Miwa Kuramitsu transit_kix
1
940
Saudade typeface
Avatar for Tiago Porto tiagoporto
0
320
A brief & incomplete history of 
UX Design for the World Wide Web: 1989–2019
Avatar for Jason CranfordTeague jct
1
200
NAHO SHIMONO_Portfolio2025
Avatar for Naho nahohphp
0
830
CMS管理画面のアクセシビリティ
Avatar for Rikiya Ihara / magi magi1125
5
1.7k
エンジニアでも捗る デザイナー的思考入門
Avatar for Tsubasa SEKIGUCHI tinykitten
PRO
1
1.1k
Building foundations 堅牢なデザイントークンの設計
Avatar for Hiroki Tani hilokifigma
2
3.5k

Featured

See All Featured
10 Git Anti Patterns You Should be Aware of
Avatar for Lemi Orhan Ergin lemiorhan
PRO
657
60k
Building an army of robots
Avatar for Kyle Neath kneath
306
45k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
YesSQL, Process and Tooling at Scale
Avatar for Rocio Delgado rocio
173
14k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
22k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.3k
VelocityConf: Rendering Performance Case Studies
Avatar for Addy Osmani addyosmani
330
24k
Keith and Marios Guide to Fast Websites
Avatar for Keith Pitt keithpitt
411
22k
A designer walks into a library…
Avatar for Paul Jervis Heath pauljervisheath
206
24k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.8k
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
337
57k

Transcript

  1. FRONT END BADASSERY WITH SASS Jessica Eldredge RailsGirls DC 2012

  2. “I don’t like the green. Can we change it?”

  3. CSS IS A PAIN

  4. it lacks VARIABLES it lacks FUNCTIONS it’s LONG it’s REPETITIVE

  5. ENTER SASS a front end developer’s dream

  6. SASS OR SCSS?

  7. TWO DIFFERENT SYNTAXES

  8. VARIABLES

  9. NESTING

  10. MIXINS

  11. EXTEND

  12. COLOR FUNCTIONS

  13. MATH

  14. HELPFUL TIPS

  15. LIMIT YOUR NESTING no more than 2 levels

  16. USE @IMPORT no extra HTTP requests!

  17. SEPARATE MIXINS keep a mixin library

  18. USE PARTIALS think in terms of MODULES build up your

    LIBRARY

  19. NEXT STEPS

  20. FRAMEWORKS, LIBRARIES Compass compass-style.org Bourbon thoughtbot.com/bourbon

  21. LEARN MORE SCSS Sass Documentation thesassway.com Chris Eppstein @chriseppstein github.com/chriseppstein

  22. OTHER PREPROCESSORS LESS lesscss.org Stylus learnboost.github.com/stylus

  23. GO FORTH, BADASS

  24. KEEP IN TOUCH! [email protected] @jessabean github.com/jessabean