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
390
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
520
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
550
Breaking Down Stereotypes About Computing
juliepagano
0
400
Speaker Support of Awesomeness - Open Source Bridge 2014
juliepagano
3
380
It's Dangerous to Go Alone: Battling the Invisible Monsters in Tech - OSBridge 2014
juliepagano
0
600
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
社内で最大の技術的負債のリファクタリングに取り組んだお話し
kidooonn
1
550
iOS/Androidで同じUI体験をネ イティブで作成する際に気をつ けたい落とし穴
fumiyasac0921
1
110
マルチプロダクトな開発組織で 「開発生産性」に向き合うために試みたこと / Improving Multi-Product Dev Productivity
sugamasao
1
300
EventHub Startup CTO of the year 2024 ピッチ資料
eventhub
0
110
TanStack Routerに移行するのかい しないのかい、どっちなんだい! / Are you going to migrate to TanStack Router or not? Which one is it?
kaminashi
0
590
Terraform未経験の御様に対してどの ように導⼊を進めていったか
tkikuchi
2
430
Amplify Gen2 Deep Dive / バックエンドの型をいかにしてフロントエンドへ伝えるか #TSKaigi #TSKaigiKansai #AWSAmplifyJP
tacck
PRO
0
380
スクラム成熟度セルフチェックツールを作って得た学びとその活用法
coincheck_recruit
1
140
AGIについてChatGPTに聞いてみた
blueb
0
130
Amazon CloudWatch Network Monitor のススメ
yuki_ink
1
200
第1回 国土交通省 データコンペ参加者向け勉強会③- Snowflake x estie編 -
estie
0
130
iOSチームとAndroidチームでブランチ運用が違ったので整理してます
sansantech
PRO
0
130
Featured
See All Featured
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k
How to Think Like a Performance Engineer
csswizardry
20
1.1k
Automating Front-end Workflow
addyosmani
1366
200k
Code Reviewing Like a Champion
maltzj
520
39k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
RailsConf 2023
tenderlove
29
900
GitHub's CSS Performance
jonrohan
1030
460k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
Measuring & Analyzing Core Web Vitals
bluesmoon
4
120
Facilitating Awesome Meetings
lara
50
6.1k
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