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

Front End Badassery with Sass

Jessica Eldredge
September 15, 2012
Design
9
370

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
300
Prototyping Layout with CSS Grid - Refresh DC
jessabean
1
370
Sketchnoting: Creative Notes for Technical Content
jessabean
7
1.3k

Other Decks in Design

See All in Design
デザインシステム構築の進め方　基本から実践まで、具体的な手順を徹底解説
ncdc
1
210
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.1k
Bridging the Design Gap: How Collaborative Modelling removes blockers to flow between stakeholders and teams @FastFlow conf
baasie
0
160
ピクシブにおける「ビジョン」の取り扱われ方 #pixivdevmeetup / 20240920
minamitary
1
1.3k
管理画面の全体UXは利用時品質モデルで考える
readymadegogo
2
2k
AIと創る広告の未来 ― タップルと極AIお台場スタジオの最新事例― / ai-tapple-odaiba
cyberagentdevelopers
PRO
1
360
アクセシビリティのはじめかた デザイナー編
tokimari
3
1.4k
ABEMAの進化 – 複雑化したコンテンツ構造とUI改善への道 – / abema-ui-improve
cyberagentdevelopers
PRO
2
420
Personal Story Sequence(WIP) - Younghoon Park
elrns88
0
260
共創するのはモノではなく価値 ── 日本の「はたらく」を変える挑戦 / Designship2024 MainStage
visional_engineering_and_design
1
490
Designship2024 Panel Discussion インハウスデザイナーは 何をデザインしているか、するべきか で使用したスライドを公開します。
kiyoshifuwa
0
2.1k
FANCL×CA流アプリリニューアルPJ 成功の秘訣とそのプロセス / dx-fancl-renewal
cyberagentdevelopers
PRO
2
370

Featured

See All Featured
Making Projects Easy
brettharned
115
5.9k
The Cost Of JavaScript in 2023
addyosmani
45
6.8k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
Intergalactic Javascript Robots from Outer Space
tanoku
269
27k
What's in a price? How to price your products and services
michaelherold
243
12k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Faster Mobile Websites
deanohume
305
30k
Writing Fast Ruby
sferik
627
61k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
229
52k
Embracing the Ebb and Flow
colly
84
4.5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.3k
Designing for Performance
lara
604
68k

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