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

Front End Badassery with Sass

Jessica Eldredge
September 15, 2012
Design
9
360

Front End Badassery with Sass

An intro to the features of Sass/SCSS

Jessica Eldredge

September 15, 2012
Tweet

More Decks by Jessica Eldredge

See All by Jessica Eldredge
Prototyping Layout with CSS Grid - RevolutionConf 2018
jessabean
1
280
Prototyping Layout with CSS Grid - Refresh DC
jessabean
1
330
Sketchnoting: Creative Notes for Technical Content
jessabean
7
1.2k

Other Decks in Design

See All in Design
デザイン組織の一人目マネージャーが啜る泥水と美味しいビールに向けてTRYすること
ryoya_frst
0
210
Web 組版の課題とその解法
yamatoiizuka
0
120
AIが介在するサービスのUX設計で 考えるべきポイントとは
pkshadeck
0
120
Apple HIGのススメ
temoki
0
110
Wishing Star Comic
torije
2
1.3k
みてね デザイン組織の変遷とデザインマネージャーの振り返り
naoyawatanabe
3
690
accfes2024_torque_yamasaki
yuuyamasakiyuu
0
280
ゲームクリエイター、事業会社のデザイナーになる
satomium1
0
200
#コムデナ vol.2 「初めてのデザインカンファレンス協賛！共有したい3つのやらかし」
kiyoshifuwa
1
350
Sociotechnical design for software and human systems
xinyao
2
520
Desarrollo de Carrera en Diseño y Producto
solmesz1
2
190
デザインを誘発する「イネーブルメント」アプローチ #spectrumfest2023 / 20231203
minamitary
0
610

Featured

See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
221
21k
Ruby is Unlike a Banana
tanoku
96
10k
A designer walks into a library…
pauljervisheath
201
23k
5 minutes of I Can Smell Your CMS
philhawksworth
199
19k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
The Cost Of JavaScript in 2023
addyosmani
21
4k
Building an army of robots
kneath
300
42k
The Language of Interfaces
destraynor
151
23k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
15
1.6k
For a Future-Friendly Web
brad_frost
172
9k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k

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