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
Oracle Base Database Service 技術詳細
oracle4engineer
PRO
6
57k
RSNA2024振り返り
nanachi
0
500
10分で紹介するAmazon Bedrock利用時のセキュリティ対策 / 10-minutes introduction to security measures when using Amazon Bedrock
hideakiaoyagi
0
170
Kubernetes x k6 で負荷試験基盤を開発して 負荷試験を民主化した話 / Kubernetes x k6
sansan_randd
2
730
アジャイル開発とスクラム
araihara
0
160
まだ間に合う! エンジニアのための生成AIアプリ開発入門 on AWS
minorun365
PRO
4
580
Platform Engineeringは自由のめまい
nwiizo
4
1.9k
インフラをつくるとはどういうことなのか、 あるいはPlatform Engineeringについて
nwiizo
5
2.1k
サーバーレスアーキテクチャと生成AIの融合 / Serverless Meets Generative AI
_kensh
12
3k
APIファーストで実現する運用性の高い IoT プラットフォーム: SORACOMのアプローチ
soracom
PRO
0
240
Tech Blogを書きやすい環境づくり
lycorptech_jp
PRO
0
120
技術負債の「予兆検知」と「状況異変」のススメ / Technology Dept
i35_267
1
1k
Featured
See All Featured
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
For a Future-Friendly Web
brad_frost
176
9.5k
A Tale of Four Properties
chriscoyier
158
23k
We Have a Design System, Now What?
morganepeng
51
7.4k
Put a Button on it: Removing Barriers to Going Fast.
kastner
60
3.7k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
12
950
Building a Scalable Design System with Sketch
lauravandoore
460
33k
Building Adaptive Systems
keathley
40
2.4k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
49
2.3k
How to train your dragon (web standard)
notwaldorf
90
5.8k
Writing Fast Ruby
sferik
628
61k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
240
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