@oeg87

PREPROCESSORS CSS

//How to improve your workflow@import improve-css

16.04.20122nd Meeting

FrontEnders Ticinowww.frontenders.ch

Web designer

@oeg87

3

@oeg87 4

CSS is good …

@oeg87 5

Preprocessor are better

@oeg87 6

Everybody use CSS

@oeg87 7

Everybody use CSS is limited

But

@oeg87 8

Everybody use CSS is limited

If you have used a preprocessor

But

@oeg87 9

Some preprocessors

http://www.catswhocode.com/blog/8-css-preprocessors-to-speed-up-development-time

@oeg87 10

What is “SASS”?Syntactically Awesome StyleSheets

@oeg87 11

Few words to describe SASS

• Variables• Mixins• Selector

inheritance

• Calculations• Functions• Conditionals• Loops

@oeg87 12

Install and use

gem install sass

sass --watch file.scss:file.css

@oeg87 13

SASS Takes everything that’s missing from css

@oeg87 14

SASS Takes everything that’s missing from css and puts it into CSS

@oeg87 15

SASS Takes everything that’s missing from css and puts it into CSS“SASS is as powerful as you want it to be”

@oeg87 16

Thinking that …

.class {color: #ffdd00;font: 16/1.4 Arial;margin: 0;

}

@oeg87 17

How many people have used that?

@oeg87 18

Variables

SASS$brand-color: #ffdd00;

.class {color: $brand-color;font: 16/1.4 Arial;margin: 0;

}

CSS

.class {color: #ffdd00;font: 16/1.4 Arial;margin: 0;

}

@oeg87 19

Nesting

SASS.class {

color: #ffdd00;font: 16/1.4 Arial;margin: 0;a {

display: block;width: 100px;height: 50px;

}}

CSS.class {

color: #ffdd00;font: 16/1.4 Arial;margin: 0;

}.class a {

display: block;width: 100px;height: 50px;

}

@oeg87 20

The Ampersand

SASS.class {

color: $brand-color;font: 16/1.4 Arial;margin: 0;

&.new-class {color: $sub-color;

}}

CSS.class {

color: #ffdd00;font: 16/1.4 Arial;margin: 0;

}

.class.new-class {color: #000;

}

@oeg87 21

Selector Inheritance

SASS.class {

color: $brand-color;font: 16/1.4 Arial;margin: 0;

}

.new-class {@extend .class;padding: 10px;

}

CSS.class, .new-class {

color: $brand-color;font: 16/1.4 Arial;margin: 0;

}.new-class {

padding:10px;}

@oeg87 22

Calculations

SASS$grid-margin: 10px;

.class {color: $brand-color;font: 16/1.4 Arial;margin: $grid-margin * 2;

}

CSS

.class {color: $brand-color;font: 16/1.4 Arial;margin: 20px;

}

@oeg87 23

Color Manipulation

SASS

.class {color: darken(#fd0,30%);font: 16/1.4 Arial;margin: 0;

}

CSS

.class {color: #665800;font: 16/1.4 Arial;margin: 0;

}

@oeg87 24

Mixins

@mixin border-radius($radius) { -webkit-border-radius: $radius;

-moz-border-radius: $radius; -khtml-border-radius: $radius; border-radius: $radius;

}

.class {color: #ffdd00;font: 16/1.4 Arial;margin: 0;@include border-radius(4px);

}

@oeg87 25

Cycles

SASS$list: #000, #999, #ccc;

@for $i from 1 through length($list){.class-#{$i} {

color: nth($list, $i);}

}

CSS.class-1 {

color: #000;}

.class-2 {color: #999;

}

.class-3 {color: #ccc;

}

@oeg87 26

And a lot more

@oeg87 27

Preprocessor does not replace a css…

@oeg87 28

Preprocessor does not replace a css…the preprocessors makes css better

@oeg87 29

To knowMore things

@oeg87 30

compass

SASS living without compass, but compass does not living without SASS

@oeg87 31

• A framework/extensions of CSS3 that uses Sass

• Open-source project• A collection of patterns, rules, variables,

mixins, and more

@oeg87 32

Two syntaxesSASS e SCSS

@oeg87 33

SCSS.class {

color: $brand-color;

font: 16/1.4 Arial;margin: 0;

.new-class {@extend class;

margin: 10px;}

}

SASS.class

color: $brand-color

font: 16/1.4 Arialmargin: 0

.new-class @extend class

margin: 10px

@oeg87 34

The compression types

@oeg87 35

//Compact.wrap{ /*comment*/ margin:0 auto; }.wrap .inside {width:500px; margin:0 auto}

//Compressed.wrap{margin:0 auto}.wrap .inside{width:500px;margin:0 auto}

//Expanded.wrap {

/*comment*/margin:0 auto;

}.wrap .inside {

width:500px;margin:0 auto

}

sass --watch --style compact file.scss:file.css

@oeg87 36

Positive aspects//Obviously, there are

@oeg87 37

+

• Save time• @import• Help to reduce HTTP request• DRY principle (Don’t Repeat Yourself)• Re-use• Easy learning curve• // comments

@oeg87 38

Negative aspects//Yes, we found negative aspects here, too

@oeg87 39

–

• Losing semplicity concepts of CSS• Need to have Ruby• You want not go back to traditional CSS

• Documentation isn’t always clear (SASS), LESS is better in this way

@oeg87 40

Let’s code<code> <code> <code>

http://codepen.io/Geo87/pen/EJvrb

@oeg87 41

“They can be a great people, $Kal-El, they wish to be. They only lack the light to show the way. For this reason above all, their capacity for good, I have sent them you… my only $son”

Jor-El

$son: preprocessor;$Kal-El: SASS;

@oeg87 42

@if $questions == $true {//please ask

}

@oeg87 43

{ Thank you }//and …

@oeg87 44

Bibliography• http

://www.comicvine.com/forums/battles-7/who-can-beat-superman-744764

• http://www.imdb.com/title/tt0348150 • http://www.slideshare.net/adarowski/sassive-aggressive-using-sass

-to-make-your-life-easier-7366267