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
410
9

Front End Badassery with Sass

An intro to the features of Sass/SCSS

Avatar for Jessica Eldredge

Jessica Eldredge

September 15, 2012

More Decks by Jessica Eldredge

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

Other Decks in Design

See All in Design
デザインワークフローの最前線。 ログラスでのAI活用の現在地
Avatar for Kaori Ueda ukaoli
1
1.7k
UI生成の鍵は要件整理 -デザインプロセスのエッセンスを プロンプト作成に取り入れよう-
Avatar for 都村　美帆 abokadotyann
4
990
図面資産×AI 眠れる資産を起こす挑戦
Avatar for 青野正寛 aonomasahiro
0
180
つくり方を変えていく | change-how-we-build
Avatar for mottox2 mottox2
2
1.4k
デザインツールを開く前に その画面は誰に何と言わせたい？受託UIデザイナーが顧客解像度を高める 「打ち合わせの場での確かめ方」
Avatar for @Garyuten garyuten
1
130
「惜しいデザイン」 を生み出さないための AIレビューループ
Avatar for Kazuhiro Tobita 0b1tk
3
2.6k
CULTURE DECK／Frontend Engineer
Avatar for M-HAND,Inc. mhand01
0
1.4k
Accelerating performance improvement based on a software review evaluation matrix
Avatar for kitanosirokuma kitanosirokuma
0
270
Understanding Branding
Avatar for Rany Fardiany ranyfardiany
0
240
組織で働く大人が「知らないままにやってみる」を取り戻す方法とその意味〜企業で働く実務家による実践知の言語化を事例とした考察〜
Avatar for ChiemiTaki chiemitaki
1
240
Signull 団体説明資料
Avatar for Signull signull
0
720
情報を翻訳する-伝わる可視化３原則とオープンデータ活用-
Avatar for Hajime Kato hjmkth
1
310

Featured

See All Featured
B2B Lead Gen: Tactics, Traps & Triumph
Avatar for Sophie Logan marketingsoph
0
180
Testing 201, or: Great Expectations
Avatar for Joseph Mastey jmmastey
46
8.2k
Code Review Best Practice
Avatar for Trisha Gee trishagee
74
20k
エンジニアに許された特別な時間の終わり
Avatar for watany watany
108
250k
Docker and Python
Avatar for Tania Allard trallard
47
4k
Breaking role norms: Why Content Design is so much more than writing copy - Taylor Woolridge
Avatar for UX Y'all uxyall
0
350
Are puppies a ranking factor?
Avatar for Jono Alderson jonoalderson
1
3.7k
How GitHub (no longer) Works
Avatar for Zach Holman holman
316
150k
Build your cross-platform service in a week with App Engine
Avatar for Jose L jlugia
234
18k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
Avatar for Tammy Everts tammyeverts
55
3.4k
Building Flexible Design Systems
Avatar for Yesenia Perez-Cruz yeseniaperezcruz
330
40k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.1k

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