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
ブランドパーソナリティ言語化における生成AI活用の実際
Avatar for Hiroki Hosaka h0sa
0
160
オルタナUX | AIで高速化するのもいいけど品質も大事なんじゃない？というお話
Avatar for なつ iflection
4
1.2k
バイアスを凌ぐデザインとコード ―異動直後にどうふるまうか―
Avatar for kkaru kkaru
0
450
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
Avatar for 山口哲弘 t2yamaguchi429
0
430
なぜプレイドにデザインエンジニアが必要だったのか？
Avatar for t32k t32k
0
520
harutaka Vision Deck
Avatar for ZENKIGEN,Inc. zenkigenforrecruit
0
150
株式会社デイトラ様│コーポレートサイト│コンセプトシート
Avatar for Haruka_CAPEO haruka_capeo
0
2.1k
誰もがAIエージェントを"操作"したがる〜AIエージェントに求められるUX〜
Avatar for Shota Ikeyatsu ikeyatsu
2
1.8k
線で考える画面構成
Avatar for natsuume natsuume
1
880
【PoCで終わらない】運用フェーズまで見据えたAI駆動UIデザイン/フロントエンド開発実践
Avatar for 北見海貴 kitami
1
200
21 Ways to Call American Airlines Customer Care Full Guide USA
Avatar for Sonny americanhub
0
180
Haley's adventure chase
Avatar for Ivette Molina ivettetwin
0
230

Featured

See All Featured
We Have a Design System, Now What?
Avatar for Morgane Peng morganepeng
53
7.7k
The Power of CSS Pseudo Elements
Avatar for Geoffrey Crofte geoffreycrofte
77
5.8k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
130
19k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
Avatar for panda_program panda_program
107
19k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
10
950
The Pragmatic Product Professional
Avatar for Laura Van Doore lauravandoore
35
6.7k
Save Time (by Creating Custom Rails Generators)
Avatar for Garrett Dimon garrettdimon
PRO
31
1.3k
The MySQL Ecosystem @ GitHub 2015
Avatar for Sam Lambert samlambert
251
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
Avatar for Eileen M. Uchitelle eileencodes
45
7.5k
Optimising Largest Contentful Paint
Avatar for Harry Roberts csswizardry
37
3.3k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
Avatar for Eileen M. Uchitelle eileencodes
26
2.9k
Building Better People: How to give real-time feedback that sticks.
Avatar for Will Jessup wjessup
367
19k

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