Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Why I <3 SASS & Compass ...and you should too
Search
Julie Pagano
February 08, 2013
Technology
1
440
Why I <3 SASS & Compass ...and you should too
Lightning talk about why I love SASS and Compass.
Julie Pagano
February 08, 2013
Tweet
Share
More Decks by Julie Pagano
See All by Julie Pagano
PSU February 2018
juliepagano
0
570
It's Dangerous to Go Alone: Battling the Invisible Monsters in Tech - CUSEC 2015
juliepagano
2
200
Speaking at Tech Events for Beginners
juliepagano
2
700
Breaking Down Stereotypes About Computing
juliepagano
0
590
Speaker Support of Awesomeness - Open Source Bridge 2014
juliepagano
3
420
It's Dangerous to Go Alone: Battling the Invisible Monsters in Tech - OSBridge 2014
juliepagano
0
720
It's Dangerous to Go Alone: Battling the Invisible Monsters in Tech - PyCon 2014
juliepagano
7
1.7k
It's Dangerous to Go Alone: Battling the Invisible Monsters in Tech - Nickel City Ruby 2013
juliepagano
4
7.4k
I Am a Front-End Web Dev (and so can you!) - SCRC 2013
juliepagano
6
1.1k
Other Decks in Technology
See All in Technology
リセラー企業のテクサポ担当が考える、生成 AI 時代のトラブルシュート 2025
kazzpapa3
1
370
ビズリーチ求職者検索におけるPLMとLLMの活用 / Search Engineering MEET UP_2-1
visional_engineering_and_design
1
160
Codexとも仲良く。CodeRabbit CLIの紹介
moongift
PRO
1
250
それでも私が品質保証プロセスを作り続ける理由 #テストラジオ / Why I still continue to create QA process
pineapplecandy
0
130
Introduction to Sansan for Engineers / エンジニア向け会社紹介
sansan33
PRO
5
43k
Biz職でもDifyでできる! 「触らないAIワークフロー」を実現する方法
igarashikana
1
460
AI時代こそ求められる設計力- AWSクラウドデザインパターン3選で信頼性と拡張性を高める-
kenichirokimura
3
350
Findy Team+ QAチーム これからのチャレンジ!
findy_eventslides
0
450
能登半島災害現場エンジニアクロストーク 【JAWS FESTA 2025 in 金沢】
ditccsugii
0
900
「最速」で Gemini CLI を使いこなそう! 〜Cloud Shell/Cloud Run の活用〜 / The Fastest Way to Master the Gemini CLI — with Cloud Shell and Cloud Run
aoto
PRO
0
110
20251014_Pythonを実務で徹底的に使いこなした話
ippei0923
0
210
Geospatialの世界最前線を探る [2025年版]
dayjournal
1
240
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Rebuilding a faster, lazier Slack
samanthasiow
84
9.2k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Designing Experiences People Love
moore
142
24k
Gamification - CAS2011
davidbonilla
81
5.5k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
132
19k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
35
6.1k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.5k
The Invisible Side of Design
smashingmag
302
51k
Thoughts on Productivity
jonyablonski
70
4.9k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
37
2.6k
Transcript
Why I <3 SASS & Compass ...and you should too
Julie Pagano @juliepagano
Software Engineers
Software Engineering Principles
Software Engineering Principles Don’t repeat yourself
Software Engineering Principles Don’t repeat yourself Make it easy to
reuse
Software Engineering Principles Don’t repeat yourself Make it easy to
reuse Don’t reinvent the wheel
CSS Don’t repeat yourself Make it easy to reuse Don’t
reinvent the wheel
+
+ extend CSS
+ readable CSS
+ reusable CSS
+ maintainable CSS
+ awesome CSS
Syntactically Awesome Stylesheets
CSS meta-language
3 uses
3 uses 1. Command-line tool
3 uses 1. Command-line tool 2. Standalone Ruby module
3 uses 1. Command-line tool 2. Standalone Ruby module 3.
Plugin for any Rack-enabled framework, including Ruby on Rails*
3 uses 1. Command-line tool 2. Standalone Ruby module 3.
Plugin for any Rack-enabled framework, including Ruby on Rails* * included in the asset pipeline in Rails 3.1+
Variables $width: 800px; $font: 'Open Sans'; $color: #fff;
Mixins Reusable chunks of CSS that take arguments @mixin fn($arg1,
$arg1) { ... } div { @include fn(1, 2); } Functions in your CSS!
Math Operations + -‐
* / % yay, arithmetic!
String operations Concatenation font-‐family: 'Open ' + 'Sans'; font-‐family: 'Helvetica,
#{$fallback}'; Interpolation
Conditionals @if (condition) { ... } @else if (condition) {
... } @else { ... }
Loops @for $i from 1 through 6 { ... }
@each $item in $list { ... } @while $i > 0 { ... $i: $i - 1; }
Nesting nav { margin: 20px; }
nav ul { width: 100%; } nav ul li { float: left; } nav ul li a { padding: 1em; }
Nesting nav { margin: 20px;
ul { width: 100%; li { float: left; a { padding: 1em; } } } }
the rule
Don’t go more than 4 levels deep
colors #ff0000;
lighten lighten(#ff0000, 10%)
darken darken(#ff0000, 20%)
and even more... • More useful helper functions • Inheritance
• Output formatting • Extensions in Ruby
SASS-based framework
web’s best reusable patterns
Cross-browser @include inline-block; @include has-layout;
CSS3 -webkit- -moz- -ms- -o-
CSS3 @include border-radius(10px);
Hacks @include clearfix; @include text-replacement;
Sprites!
+ make CSS feel like a real programming language <3