Introduction to
Meetup
About me ?
Lead Frontend developer @
Thomas Roux
+
@spartdev
What is a preprocessor ?
What is a Preprocessor ?
- The answer is in the name
- Preprocessors take code written in the preprocessed language and then convert that code into CSS
Famous
preprocessors
Why use a preprocessor ?
Why use a preprocessor ?
- More productivity
- Maintainable CSS
- CSS has its limitations
- Variables
- Mixins
- Functions
- Partials
Sass
Sass
Born in ruby on rails community
Designed by Hampton Catlin
Maintained by Nathan Weizenbaum et Chris Eppstein
How Do Sass Work?
Write your sass script
Preprocess
Generated css
Before install it !
Install Ruby
Install Sass Ruby Gem
+
Then use it !
sass --watch <source>:<destination>
- sass input.scss output.css
- sass --watch input.scss:output.css
- sass --watch input.scss:output.css --style compressed
.sass
- Haml-style indentation
- No brackets
- No semi-colons
- Based on indentation
.scss
- Semi-colon and bracket syntax
- Normal css is also valid scss
- Recomanded
2 available syntaxes
.sass
.scss
2 available syntaxes
.main
font-size: 10px
margin: 5px
text-align: center
label
color: green.main {
font-size: 10px;
margin: 5px;
text-align: center;
}
label {
color: green;
}Features
7 Principal features
- Variables
- Nesting
- Mixins
- Function
- Operators
- Partial
- Extend Directive
Variables
Variables
Variables allow you to assign a value and reuse them anywhere !
Can assign boolean, color, text, string …
// Assign Variables
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
// Use it
body {
font: 100% $font-stack;
color: $primary-color;
}body {
font: 100% Helvetica, sans-serif;
color: #333;
}Sass
Css
Compile phase
Nesting
Nesting
.nav.tabbed-navigation {...}
.nav.tabbed-navigation a {...}
.nav.tabbed-navigation a span {...}- Hard to read
- Multiple line
- Descendant selectors dependence
If .nav class change you will have to rewrite the three CSS selectors...
Nesting
.nav {
margin: 10px;
.tabbed-navigation {
padding: 5px;
width: 20%;
a {
font-size: 1,8rem;
color: red;
span {
color: green;
}
}
}
}
Clear hierarchy
Mixins
Mixins
- Define styles then reuse !
- You can pass params
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
.myClassname {
@include border-radius(10px);
}.myClassname {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}Sass
Css
Compile phase
Function
Function
function shade($color + $percent) {
@return mix(#000, $color, $percent);
}
body {
background: shade(grey, 50%);
}
Function
Native Functions...
- quote
- unquote
- percentage
- lenght
- nth
- unit
- unitless
- mix
- ....
Operators
Operators
- Numbers (1.2, 15, 50px)
- Strings (foo, bar, baz)
- Colors (red, #04A3F9, rgba(255,255,0,15)...)
- Booleans (true, false)
body {
font-size: 1px + 10px +3px; // 14px
background-color: #777 + #888 // white
}
.myDivClass {
height: (1000px/2) // 500px
}
$var: full;
.mySecondDiv {
@if $var === full {
width: 100%;
} @else {
width: 50%;
}
}Partials
Partials
Load different modules to make css !
Partials
@import '_header';
@import '_page';
@import '_sidebar';Extend Directive
Extend Directive
You can share css declaration with @extend
.error {
color: red;
}
.serious-error {
@extend .error;
font-weight: bold;
}
.error, .serious-error {
color: red;
}
.serious-error {
font-weight: bold;
}
Sass
Css
Compile phase