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
400
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
580
Breaking Down Stereotypes About Computing
juliepagano
0
430
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
620
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
商品レコメンドでのexplicit negative feedbackの活用
alpicola
1
340
GoogleのAIエージェント論 Authors: Julia Wiesinger, Patrick Marlow and Vladimir Vuskovic
customercloud
PRO
0
130
今から、 今だからこそ始める Terraform で Azure 管理 / Managing Azure with Terraform: The Perfect Time to Start
nnstt1
0
220
デジタルアイデンティティ技術 認可・ID連携・認証 応用 / 20250114-OIDF-J-EduWG-TechSWG
oidfj
2
670
Godot Engineについて調べてみた
unsoluble_sugar
0
380
機械学習を「社会実装」するということ 2025年版 / Social Implementation of Machine Learning 2025 Version
moepy_stats
5
970
DMMブックスへのTipKit導入
ttyi2
1
110
新卒1年目、はじめてのアプリケーションサーバー【IBM WebSphere Liberty】
ktgrryt
0
100
2025年の挑戦 コーポレートエンジニアの技術広報/techpr5
nishiuma
0
140
The future we create with our own MVV
matsukurou
0
2k
GeometryReaderやスクロールを用いた表現と紐解き方
fumiyasac0921
0
100
あなたの人生も変わるかも?AWS認定2つで始まったウソみたいな話
iwamot
3
850
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
328
38k
Agile that works and the tools we love
rasmusluckow
328
21k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.1k
Testing 201, or: Great Expectations
jmmastey
41
7.2k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
127
18k
Building Better People: How to give real-time feedback that sticks.
wjessup
366
19k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.3k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
We Have a Design System, Now What?
morganepeng
51
7.3k
Producing Creativity
orderedlist
PRO
343
39k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.9k
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