ParisJS #11 : Sass & Compass

Sass &

http://sass-lang.com/ http://compass-style.org/

Question #1

Do you write
CSS ?

Question #2

Do you love
(writing) CSS ?

Question #3

Did you love
(writing) CSS ?

Good News #1

Sass makes
CSS fun again

Good News #2

Sass will make you
love CSS again

Good News #3

Compass will make you
love CSS3 again

Who ?
Julien Cabanès
I care about Front End @ZeeAgency
I reply to julien@zeeagency.com
I tweet sometimes @JulienCabanes
I share some code to github.com/ZeeAgency

Things to remember today

#1

Things to remember today

#2

Think yourself as
Indiana Jones...

Think yourself as
Indiana Jones...

• You have to kill this son of a b... !

Think yourself as
Indiana Jones...

• You have a gun.

Think yourself as
Indiana Jones...

• You have a gun.
• Why don’t you just ... use it ?

Think yourself as
Indiana Jones...

• You have to style this website !
• You have a computer.
• Why don’t you just ... use it ?

End of the Story

Back to the Code

CSS : The Good Parts
• CSS Syntax is easy

• Selector Query Language is nice

• Cascading is nice

• Functions.Yes, CSS have functions

• CSS2 : attr(), counter(), url()

• CSS3 : calc(), translateX(), rotate()...

• Media Queries

• and more...

CSS : The Bad Parts
• Variables... come on ! (Still draft)

• Selectors vs. DRY

• Modularity : many ﬁles === many HTTP requests

• Functions : Can’t write your owns

• Separation of Concerns is almost impossible

• CSS3 is great but vendors preﬁxing, damn !

• and more !

Solution #2

Abstraction
“ It’s nothing to be scared of ” - Chris Eppstein
creator of Compass & Sass Core team member

Good Abstraction

Keep the Good Parts

Good Abstraction

Keep the Good Parts

CSS is easy, Keep it easy

Good Abstraction

Keep the Good Parts

Keep the Syntax

Good Abstraction

Forget the Bad Parts

Good Abstraction


CSS is clearly not enough

Good Abstraction


Enhance the Syntax

Good Abstraction

CSS Pre-Processors
to the rescue

Quick Overview of CSS Pre-Processors
LESS Stylus Sass/SCSS

Voluntary omitted of
Other/PHP/Python CSS preprocessors
(Turbine, CSS Cacheer...)

Written in JS JS Ruby


Context Front & Local Local / Back Local / Back



Front could be good way to go
if this was a polyfill
but CSS4 doesn’t exist yet



Syntax CSS Superset Not CSS CSS Superset



Your CSS
won’t work




Variable Syntax @color: blue; variable = blue $variable: blue;



Syntax CSS Superset JS Like CSS Superset


traction
bad abs





Mixins Syntax .foo() {} foo() @mixin foo() {}






implicit abs traction
co uld increase
learni ng cur ve






explicit
ab s traction






Import Style Style Style & Images !







Framework Roll your own Roll your own Compass

Run with JS JS Ruby


Syntax More on this later
CSS Superset Not CSS CSS Superset




Framework Roll your own Roll your own Compass

Skipping Technical Infos

gem install sass

http://sass-lang.com/tutorial.html

Sass
• One language but 2 syntaxes
• Sass : indented syntax, forget { } and ;
• SCSS : Sassy CSS === CSS3 superset
• Means Syntaxically Awesome StyleSheets
• Should run on your machine, not the server
• Is watching for folder/ﬁle changes and parse
• Shares a lot of features with LESS & Stylus

SCSS is a CSS3 Superset

• Every existing CSS will work just ﬁne !

• You love {...} and ; that’s OK !

• You want a little more ? Try it !

• You want a lot more ? Love it !

Variables
SCSS
$link-color: #b4d455;

a {
color: $link-color;
}

⌘S
CSS
a {
color: #b4d455;
}

Variables Types
// With or without unit
$number: 1.2;
$number: 10px;
$number: 20%;

// With or without quotes
$string: "Hello World";
$string: '/img/icons.png';
$string: underline;

// Any kind
$color: #b4d455;
$color: rgba(0, 0, 0, 0.5);
$color: hsl(100deg, 40%, 60%);

// Wow
$boolean: true;
$boolean: false;

// With commas or spaces
$list: 10px 5px 15px;
$list: Helvetica, Arial, sans-serif;

What can we do
with Variables ?

Number Operations
Basic Arithmetic : + - * / %
// Ever need this ?
$lightbox-width: 500px;
$lightbox-height: 400px;
$lightbox-padding: 20px;

.lightbox {
position: absolute;
top: 50%;

⌘S
left: 50%;
margin-top: -$lightbox-height / 2;
margin-left: -$lightbox-width / 2;
padding: $lightbox-padding;
width: $lightbox-width - ($lightbox-padding * 2);
height: $lightbox-height - ($lightbox-padding * 2);
}

Number Operations
Talkin’ about division...
// Division happens if.. variable, parentheses or other operation
p {
font: 10px / 8px;
$width: 1000px;
width: $width / 2;
height: (500px / 2);
margin-left: 5px + 8px / 2px;
}

Number Operations
p {
font: 10px / 8px; // Plain CSS, no division
$width: 1000px;
width: $width / 2;
}

Number Operations
p {
$width: 1000px;
width: $width / 2; // Uses a variable, does division
}

Number Operations
p {
$width: 1000px;
height: (500px / 2); // Uses parentheses, does division
}

Number Operations
p {
$width: 1000px;
height: (500px / 2); // Uses parentheses, does division
margin-left: 5px + 8px / 2px; // Uses +, does division
}

Number Operations
What about this ?
p {
$font-size: 10px;
$line-height: 8px;
font: $font-size / $line-height;
}

Number Operations
What about this ?
p {
$font-size: 10px;
$line-height: 8px;
font: $font-size / $line-height;
}

⌘S
Ouch...
p {
font: 1.25;
}

Interpolation
#{...} avoid operations
p {
$font-size: 10px;
$line-height: 8px;
font: #{$font-size} / #{$line-height};
}

Interpolation
#{...} avoid operations
p {
$font-size: 10px;
$line-height: 8px;
font: #{$font-size} / #{$line-height};
}

⌘S
Nice
p {
font: 10px / 8px;
}

Interpolation
#{...} can be used for...
$className: 'foo';
$property: 'padding';

p.#{$className} {
#{$property}: 10px;
}

⌘S
Templating ?
p.foo {
padding: 10px;
}

Color Operations
Easy to understand
p {
color: #010203 + #040506;
}
a {
color: #010203 * 2;
}
b {
color: rgba(…) + rgba(…);
}

⌘S

p {color: #050709;}
a {color: #020406;}
b {color: rgba(…);}

Number Functions
Sounds familiar
round(), ceil(), floor(), abs(), percentage()

$width: 960px;
$columns: 14;

div {
width: round($width / $columns);
}

⌘S
div {
width: 69px;
}

Color Functions
Lazy RGBA, yay !
$my-color: rgba(#b4d455, 0.5);

Mutators
$my-color: mix(red, blue);
$my-color: lighten(red, 20%);
$my-color: darken(red, 20%);
$my-color: transparentize($my-color, 0.5);
$my-color: opacify($my-color, 0.5);
$my-color: grayscale(#b4d455);
$my-color: invert(#b4d455);
$my-color: saturate(#b4d455, 10%);
$my-color: adjust-hue(#b4d455, 10%);

// And more…

Color Functions
Getters (aka Accessors)
$red-component: red($my-color);
$green-component: green($my-color);
$blue-component: blue($my-color);
$alpha-component: alpha($my-color);

$hue-component: hue($my-color);
$sat-component: saturation($my-color);
$light-component: lightness($my-color);

Setters
$my-color: adjust-color($my-color, $green: -55);
$my-color: scale-color($my-color, $green: 10%);
$my-color: change-color($my-color, $green: 255);

and more...
http://sass-lang.com/docs/yardoc/Sass/Script/Functions.html

Nesting
Properties
article {
background: {
color: transparent;
image: url("/img/bg.png");
origin: content-box;
position: right center;
repeat: no-repeat;
size: 100px 100px;
}
}

⌘S
article {
background-color: transparent;
background-image: url("/img/bg.png");
background-origin: content-box;
background-position: right center;
background-repeat: no-repeat;
background-size: 100px 100px;
}

Nesting
Rules
h1 {
font-size: 200%;

a {
text-decoration: none;

&:hover {
text-decoration: underline;
}
}
}

⌘S
h1 {font-size: 200%;}
h1 a {text-decoration: none;}
h1 a:hover {text-decoration: underline;}

Nesting
Rules
h1 {
font-size: 200%; & means this
a {
text-decoration: none;

&:hover {
}
}
}

⌘S
h1 {font-size: 200%;}
h1 a {text-decoration: none;}
h1 a:hover {text-decoration: underline;}

Warning

Rules Nesting helps you
write more typing less

Warning

Don’t forget about
Performance

Warning

Selectors doesn’t need
to reﬂect your DOM...

Nesting abuse
#wrapper {
section {
article {
h2 {
font-size: 200%;

a {
color: red;

&:hover {
}
}
}

p {
text-align: justify;
}
}
}
}

Control Directives
@if @else @for @each @while

Trivial
@if 1 + 1 == 2 {
width: 400px;
} @else {
width: 200px;
}

Grids
@for $i from 1 through 10 {
.col-#{$i} {
width: $i * 10px;
}
}

Don’t use @import
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Don’t use @import
Use @import !

@import
reset.scss
html, body, div, span, object, iframe,

style.scss h1, h2, h3, h4, h5, h6, p, blockquote,
pre, abbr...

@import "reset", "header";
header.scss
⌘S
header {
height: 100px;
font-size: 200%;
}

style.css
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote,
pre, abbr...
...
...
...

header {
height: 100px;
font-size: 200%;
}

Functions
Deﬁne with @function
@function round-by($value, $factor: 1) {
@return round($value / $factor) * $factor;
}

div {
width: round-by(1337px, 20);
}

⌘S

div {
width: 1340px;
}

Mixins
Deﬁne with @mixin, use with @include
@mixin link-hover-effect($color) {
color: $color;

&:hover {
color: darken($color, 10%);
}
}
article a {
@include link-hover-effect( blue);
}

⌘S
article a {
color: blue;
}
article a:hover {
color: #0000cc;
}

Mixins augment style

Functions return values

Fixing the Bad Parts
Variables

DRY

Modularity

Functions

Separation of Concerns

CSS3 vs.Vendor preﬁxing

Variables Yep !

DRY

Modularity

Functions



Variables Yep !

DRY Nesting & Mixins!

Modularity

Functions



Variables Yep !


Modularity Imports !

Functions



Variables Yep !



Functions Yep !



Variables Yep !



Functions Yep !

Separation of Concerns ?
CSS3 vs.Vendor preﬁxing ?

Variables Yep !



Functions Yep !

Separation of Concerns Mixins ?

CSS3 vs.Vendor preﬁxing ?

Clearﬁx example
<div class="clearfix">
<article>Lorem ipsum</article>
</div>

<div class="clearfix">
</div>

Clearﬁx example
<div>
</div>

<div>
</div>

@mixin Solution
@mixin clearfix {
zoom: 1;

&:before,
&:after {
content: "0020";
display: block;
height: 0;
visibility: hidden;
}

&:after {
clear: both;
}
}

div {
@include clearfix;
}

@mixin Solution
Style will be repeated for every mixin uses
div {
zoom: 1;
}
div:before, div:after {
content: "0020";
⌘S display: block;
height: 0;
visibility: hidden;
}
div:after {
clear: both;
}

@mixin Solution
Style will be repeated for every mixin uses
div {
zoom: 1;
}
div:before, div:after {
content: "0020";
⌘S display: block;
height: 0;
visibility: hidden;
}
div:after {
clear: both;
}

There’s a better way...

Inheritance

@extend is at selectors
what @mixin is for styles

How @extend works
.box {
border: 1px solid blue;
padding: 20px;
}
.error-message {
@extend .box;
border-color: red;
color: red;
}

⌘S
.box, .error-message {
border: 1px solid blue;
padding: 20px;
}
.error-message {
border-color: red;
color: red;
}

@extend Solution
.clearfix { zoom: 1; }
.clearfix:before, .clearfix:after { content: "0020"; display: block;...
.clearfix:after { clear: both; }

div {
@extend .clearfix;
}

⌘S

.clearfix, div { zoom: 1; }
.clearfix:before, div:before, .clearfix:after, div:after {...
.clearfix:after, div:after { clear: both; }

@extend more...
@import "_reset", "_grid", "_box";

div {
@extend .clearfix;
@extend .grid-12;
}

article {
@extend .box;
@extend .col-4;
}

Skipping Technical Infos

gem install compass

http://compass-style.org/install/

It helps you write
your own Framework

It comes with
2 frameworks

Core

Core
Provides mixins for

• CSS3 : no more vendor preﬁxes
• Typography : links, lists, text helpers
• Utilities : spriting the good way, others...

CSS3 mixins
Border radius
div {
@include border-radius(5px);
}

⌘S
div {
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;
-ms-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}

CSS3 mixins
Box Shadows
div {
@include box-shadow(rgba(black, 0.5) 0 2px 4px);
}

⌘S
div {
-moz-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px;
-webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px;
-o-box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px;
box-shadow: rgba(0, 0, 0, 0.5) 0 2px 4px;
}

CSS3 mixins
Gradients
div {
@include background(linear-gradient(top, red, green 50%, blue));
}

⌘S
div {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%,
#ff0000), color-stop(50%, #008000), color-stop(100%, #0000ff));

background: -webkit-linear-gradient(top, #ff0000, #008000 50%, #0000ff);
background: -moz-linear-gradient(top, #ff0000, #008000 50%, #0000ff);
background: -o-linear-gradient(top, #ff0000, #008000 50%, #0000ff);
background: -ms-linear-gradient(top, #ff0000, #008000 50%, #0000ff);
background: linear-gradient(top, #ff0000, #008000 50%, #0000ff);
}

CSS3 mixins
Gradients
div {
}

⌘S
div {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%,
#ff0000), color-stop(50%, #008000), color-stop(100%, #0000ff));

background: -webkit-linear-gradient(top, #ff0000, #008000 50%, #0000ff);
background: -moz-linear-gradient(top, #ff0000, #008000 50%, #0000ff);

}
Solves inconsistency
background:
background:
background:
-o-linear-gradient(top, #ff0000, #008000 50%, #0000ff);
-ms-linear-gradient(top, #ff0000, #008000 50%, #0000ff);
linear-gradient(top, #ff0000, #008000 50%, #0000ff);

CSS3 mixins
Transforms
div {
@include rotate(20deg);
}

⌘S
div {
-moz-transform: rotate(20deg);
-webkit-transform: rotate(20deg);
-o-transform: rotate(20deg);
-ms-transform: rotate(20deg);
transform: rotate(20deg);
}

More CSS3 mixins
background-clip
background-origin
background-size
box
box-sizing
columns
opacity
transform
transition
and more...

Spriting
Magic imports
@import "icons/*.png";
@include all-icons-sprites;

Spriting
Magic imports

⌘S
.icons-sprite, .icons-tick, .icons-user, .icons-wrench {
background: url('/img/icons-scc2e7acafa.png') no-repeat;
}
.icons-tick {
background-position: 0 0;
}
.icons-user {
background-position: 0 -16px;
}
.icons-wrench {
}

Spriting
Magic imports

⌘S
}
.icons-tick {

+
}
.icons-user {
}
.icons-wrench {
}

Spriting
Magic imports

⌘S
}
.icons-tick {

+
}

uses @extend
.icons-user {
}
.icons-wrench {
}

Spriting
Magic imports

.icons-sprite {
width: 16px;
height: 16px;
}

⌘S
...

width: 16px;
height: 16px;
}

Variables Yep !



Functions Yep !

Separation of Concerns Mixins & Inheritance !

CSS3 vs.Vendor preﬁxing Compass !

Save HTTP Requests

but don’t abuse

Include images
div {
background: url("icons/tick.png") no-repeat;
}

Include images
div {
background: inline-image("icons/tick.png") no-repeat;
}

Include images
div {
background: inline-image("icons/tick.png") no-repeat;
}

⌘S
base64 FTW !
div {
background: url('data:image/
png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJl
YWR5ccllPAAAAhxJREFUeNpi/P//PwMlgImBQsACIhhnCAFZjEAGkANy0B8gwQ00m5kRogpEMYHl5YF4LZBXw/D3/47/Ea/
xuOD7PwaGX1AMMvDvfwGGf/8nprkkGQPZLUAVHqR4gY3hH0Ofoby+6ZcvXxjinWL0Gf4wtMC9QAAwAjXXK0jIO8gLyUl9/
Pzx98Fjh24AXdOA7gIPoP/PwJwGdvoPoNP/MGQIcwkGq4mrKHz5+uXf0UtH7wBdMRGodgvCgP9ATX/
+tyT5JxqCaDAfIu7DwcSWJckjqfzgwQOGU5dP3f3w4cNSoJq5DL//I0Xjn38tMX4xes+ePWOK8IowAPGBmnNZ/
jPVS4vLqH7985Xl5YcXDz99+rAJGIDtQAxxIcKA/zVLViy8xM7J9uvU7VPMDnaOOkAb4sVkxTV+sPxgf/fhzdOP797vZ/
gLjD4GBojObT8gAQRKiYx9/AxADaAwaDF2NtN6+vMZpwCnAMP7b
+8Zfrz49vrj3fdHGJgZkhhYmT4w7P4J1wzWCyY8OBgY5JiBmBFsiLSdvMYP3l/cv1/+/PD57Psz/5kYEhgO/
H4K1owEEAYwQlOcAtAQc2YPBmnGFi4TfpnvFz7d+f/wXyrD8T/
XGR79w4hfZANAYcELxAJAzMdgzGTJoMOQxnDmfyfD1f9XgGIgq39AaRD+xQDyNBDADAA5gR2IOaA0MzRX/IPiP1D8F4n
+BzeAEgAQYAC7HATaTnWSLQAAAABJRU5ErkJggg==') no-repeat;
}

Less HTTP Requests
but
More Ko in your CSS

Configuration
config.rb
# You can select your preferred output style here
output_style = :compressed

style.scss
div {
@include border-radius(5px);
@include box-shadow(rgba( black, 0.5) 0 2px 4px);
@include rotate(20deg);
}

⌘S
style.css minified
div{-moz-border-radius:5px;-webkit-border-radius:5px;-o-border-radius:5px;-ms-border-radius:5px;-khtml-border-
radius:5px;border-radius:5px;-moz-box-shadow:rgba(0,0,0,0.5) 0 2px 4px;-webkit-box-shadow:rgba(0,0,0,0.5) 0 2px
4px;-o-box-shadow:rgba(0,0,0,0.5) 0 2px 4px;box-shadow:rgba(0,0,0,0.5) 0 2px 4px;background:-webkit-
gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(50%, #008000), color-stop(100%,
#0000ff));background:-webkit-linear-gradient(top, #ff0000,#008000 50%,#0000ff);background:-moz-linear-
gradient(top, #ff0000,#008000 50%,#0000ff);background:-o-linear-gradient(top, #ff0000,#008000
50%,#0000ff);background:-ms-linear-gradient(top, #ff0000,#008000 50%,#0000ff);background:linear-gradient(top,

.talk:after {
content: "Thanks";
}

More infos
http://sass-lang.com/
http://compass-style.org/
http://nex-3.com/
http://chriseppstein.github.com/
http://thesassway.com/

ParisJS #11 : Sass & Compass

Recommended

Recommended

More Related Content

Similar to ParisJS #11 : Sass & Compass

Similar to ParisJS #11 : Sass & Compass (20)

Recently uploaded

Recently uploaded (20)

ParisJS #11 : Sass & Compass