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
410
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
530
It's Dangerous to Go Alone: Battling the Invisible Monsters in Tech - CUSEC 2015
juliepagano
2
180
Speaking at Tech Events for Beginners
juliepagano
2
590
Breaking Down Stereotypes About Computing
juliepagano
0
450
Speaker Support of Awesomeness - Open Source Bridge 2014
juliepagano
3
390
It's Dangerous to Go Alone: Battling the Invisible Monsters in Tech - OSBridge 2014
juliepagano
0
630
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.3k
I Am a Front-End Web Dev (and so can you!) - SCRC 2013
juliepagano
6
1k
Other Decks in Technology
See All in Technology
2.5Dモデルのすべて
yu4u
2
610
The 5 Obstacles to High-Performing Teams
mdalmijn
0
270
スクラムのイテレーションを導入してチームの雰囲気がより良くなった話
eccyun
0
110
君はPostScriptなウィンドウシステム 「NeWS」をご存知か?/sunnews
koyhoge
0
720
Building Products in the LLM Era
ymatsuwitter
10
4.4k
現場で役立つAPIデザイン
nagix
29
10k
SCSAから学ぶセキュリティ管理
masakamayama
0
140
技術的負債解消の取り組みと専門チームのお話 #技術的負債_Findy
bengo4com
1
1.2k
株式会社EventHub・エンジニア採用資料
eventhub
0
4.2k
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.7k
開発者が自律的に AWS Security Hub findings に 対応する仕組みと AWS re:Invent 2024 登壇体験談 / Developers autonomously report AWS Security Hub findings Corresponding mechanism and AWS re:Invent 2024 presentation experience
kaminashi
0
190
エンジニアのためのドキュメント力基礎講座〜構造化思考から始めよう〜(2025/02/15jbug広島#15発表資料)
yasuoyasuo
15
5.5k
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
Building Applications with DynamoDB
mza
93
6.2k
Large-scale JavaScript Application Architecture
addyosmani
510
110k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
YesSQL, Process and Tooling at Scale
rocio
171
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
99
18k
RailsConf 2023
tenderlove
29
1k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
We Have a Design System, Now What?
morganepeng
51
7.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
540
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
10
1.3k
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