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
320
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
業務効率化だけじゃ物足りない AIと一緒にプロトタイプ開発
Avatar for Shingo Suzuki shingo2000
1
1.6k
Liquid Iron
Avatar for Brynn McDucky P. mcduckyart
1
120
エンジニアでも捗る デザイナー的思考入門
Avatar for Tsubasa SEKIGUCHI tinykitten
1
1.2k
Tools for Design Engineers other than LLM in the LLM era
Avatar for takanorip takanorip
1
410
Yahoo!フリマ：生成AI利用機能ならではのインターフェース設計について / Yahoo! JAPAN Flea Market: Interface Design Specific to Generative AI Utilization Features
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
380
8_8_リサーチカンファレンスプレイベント.pdf
Avatar for Muture muture
PRO
1
130
mento Design Team Portfolio
Avatar for mento _official mento0fficial
0
530
1920*1080pxに設定したケース / Google Slide Size Test
Avatar for Arthur arthur1
0
3.1k
「描く」という衝動に立ち返る〜Figma Drawがひらく思考のかたち〜
Avatar for Miwa Kuramitsu transit_kix
1
1.1k
UXデザインはなぜ定着しないのか？
Avatar for Inside Design Studio designstudiopartners
0
850
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
0
440
Light My Fire/ハートに火をつけるコミュニティ
Avatar for kgsi kgsi
1
150

Featured

See All Featured
Site-Speed That Sticks
Avatar for Harry Roberts csswizardry
10
770
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
Making the Leap to Tech Lead
Avatar for Ryan Cromwell cromwellryan
134
9.5k
KATA
Avatar for Megan Lloyd mclloyd
32
14k
Designing Dashboards & Data Visualisations in Web Apps
Avatar for Des Traynor destraynor
231
53k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
Avatar for Eileen M. Uchitelle eileencodes
36
2.5k
Being A Developer After 40
Avatar for Adrian Kosmaczewski akosma
90
590k
Easily Structure & Communicate Ideas using Wireframe
Avatar for Afnizar Nur Ghifari afnizarnur
194
16k
Bootstrapping a Software Product
Avatar for Garrett Dimon garrettdimon
PRO
307
110k
No one is an island. Learnings from fostering a developers community.
Avatar for Antonio thoeni
21
3.4k
Six Lessons from altMBA
Avatar for Skipper Chong Warson skipperchong
28
3.9k
How GitHub (no longer) Works
Avatar for Zach Holman holman
314
140k

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