Stellan introduces you to SASS and LESS witch are two types of pre-processors for CSS. The use of them allow us to make CSS fun again using variables, nestling, mathematical operations and more when we write web design code. This makes it much easier, faster and more fun to create and update our CSS-code. Stellan also brings up some dos and don'ts using CSS/SASS/LESS and some other nice tools like Sourcemaps, Autoprefixer, CSSNano together with GULP Task Runner.

1. SASS & LESS
How to make CSS fun again
Stellan Lindell

2. Anybody who doesn’t
understand Swedish?

3. How about CSS?!?!

4. CSS with superpowers
Pre-processing languages
for dynamic stylesheets
STELLAN LINDELL
&
LESS is more

5. Problems with CSS
• ”The color problem”
• Explains many different problems that occurs when we don’t have any variables, not only for colors.
• When we don’t have variables we have to repeat ourselves, often many times.
• ”The duplication problem”
• When we have to write browser specific values we repeat ourselves, making our code look messy
• ”The cascade problem”
• To be specific in CSS we have to write a many elements on one row to follow the DOM-structure
• If we do changes in the HTML-code, even smaller once, we have to change a lot in the CSS.
• ”The calculation problem”
• There aren't possible to do any mathematical calculations in CSS.
• ”The importing problem”
• The support of the import function in CSS are browser specific making it unreliable.
• When we import we want to include the whole file into our CSS, working just like INCLUDE in PHP.

6. Problems with CSS

7. How do we solve these problems
with LESS or SASS?
• Variables
• Mixins (similar to a function – should always be used to include
functionality)
• Nestled code does it easy to follow the DOM-structure
• Inherited code enables multiple elements to have the same
properties/values
• Functions (both own and language specific – should always return a value)
• Mathematical operations directly
• Smarter import makes it easy to split up large files

8. Variables in LESS / SASS
LESS
@nice-blue: #5B83AD;
@light-blue: @nice-blue + #111;
@font-stack: Helvetica, sans-serif;
.header {
font: 100% @font-stack;
color: @light-blue;
}
Outputs:
.header {
font: 100% Helvetica, sans-serif;
color: #6c94be;
}
SASS
$nice-blue: #5B83AD;
$light-blue: $nice-blue + #111;
$font-stack: Helvetica, sans-serif;
.header {
font: 100% $font-stack;
color: $light-blue;
}
Outputs:
.header {
font: 100% Helvetica, sans-serif;
color: #6c94be;
}

9. Mixins in LESS / SASS
LESS
.border-radius(@radius:5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
.menu {
border: 1px solid #111;
.border-radius(4px);
}
Outputs:
.menu {
border: 1px solid #111;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
SASS
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.menu {
border: 1px solid #111;
@include border-radius(4px);
}
Outputs:
.menu {
border: 1px solid #111;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}

10. Nestled code in LESS / SASS
LESS
body {
a {
color: #FFF;
&:hover {
color: #F00;
}
}
}
Outputs:
body a {
color: #FFF;
}
body a:hover {
color: #F00;
}
SASS (exactly the same)
body {
a {
color: #FFF;
&:hover {
color: #F00;
}
}
}
Outputs:
body a {
color: #FFF;
}
body a:hover {
color: #F00;
}

11. Inheritance in LESS / SASS
LESS
.message {
border: 1px solid #ccc; }
.success {
&:extend(.message);
border-color: green; }
.error {
&:extend(.message);
border-color: red; }
Outputs:
.message, .success, .error {
border: 1px solid #ccc; }
.success {
border-color: green; }
.error {
border-color: red; }
SASS
.message {
border: 1px solid #ccc; }
.success {
@extend .message;
border-color: green; }
.error {
@extend .message;
border-color: red; }
Outputs:
.message, .success, .error {
border: 1px solid #ccc; }
.success {
border-color: green; }
.error {
border-color: red; }

12. Own functions in LESS / SASS
LESS
.mixin (@a) when (lightness(@a) >= 50%) {
background-color: black; }
.mixin (@a) when (lightness(@a) < 50%) {
background-color: white; }
.mixin (@a) {
color: @a;
@width: 100%;
@height: 200px; }
.menu {
.mixin(#ffa);
width: @width;
height: @height; }
Outputs:
.menu {
background-color: black;
color: #ffffaa;
width: 100%;
height: 200px; }
SASS
@function getColor($color: rgb(0, 0, 0), $alpha: 0) {
$returnColor: $color;
@if $alpha != 0 {
@if $alpha > 1 {
$alpha: $alpha/100
}
$returnColor: rgba($color, $alpha);
}
@return $returnColor;
}
.menu {
color: getColor($color:rgb(25,25,25),$alpha:90) }
Outputs:
.menu {
color: rgba(25, 25, 25, 0.9); }

13. Mathematical operations in LESS /
SASS
LESS
.container {
width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%; }
aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%; }
Outputs:
.container {
width: 100%; }
article[role="main"] {
float: left;
width: 62.5%; }
aside[role="complimentary"] {
float: right;
width: 31.25%; }
SASS
.container {
width: 100%; }
article[role="main"] {
float: left;
width: 600px / 960px * 100%; }
aside[role="complimentary"] {
float: right;
width: 300px / 960px * 100%; }
Outputs:
.container {
width: 100%; }
article[role="main"] {
float: left;
width: 62.5%; }
aside[role="complimentary"] {
float: right;
width: 31.25%; }

14. Import in LESS / SASS
LESS
@import "foo.css"; //@import url(foo.css);
@import "foo.less"; //Content renders in file
@import (less) "http://foo.com/bar"; //@import
"http://foo.com/bar";
as a LESS-file
@import "foo"; //foo.less renders in file
@import
SASS
@import "foo.css"; //@import url(foo.css);
@import "foo.scss"; //Content renders in file
@import "http://foo.com/bar"; //@import "http://foo.com/bar";
@import "foo"; //_foo.scss renders in file
@import "foo", "foo2"; //Content renders in file
$family: unquote("Droid+Sans");
@import url("http://fonts.googleapis.com/css?family=#{$family}");
// Outputs:
// @import
url("http://fonts.googleapis.com/css?family=Droid+Sans");
#main {
@import "foo"; //Content renders in file
}

15. Dos and Don’ts with LESS / SASS
• Most common CSS guidelines also applies when using SASS/Less.
• Avoid inline-styling at all cost. Avoid ID and tags, use classes.
• Never use important.
• Don’t use long selectors (in SASS/LESS don’t nestle your code to far). Makes your CSS file bigger than necessary.
• Be consistent with units. Use only a few. Choose one static (px, pt, mm, cm, in) and one, maybe two, relative (%, vh, em, ).
• Don’t forget to support all browsers. Use Autoprefixer (https://css-tricks.com/autoprefixer/).
• Specific
• Mixins.
• Use DRY-principle (Do not Repeat Yourself).
• Keep your mixins simple, use KISS-principle (Keep It Simple Stupid).
• Use arguments, but only when needed. If you have no arguments, don’t use parentheses.
• Variables
• Naming – Be specific! Preferred lower-case-with-dashes.
• Use as often as possible. Easier when you change your mind.
• Use sourcemaps! But only in dev environment.
• Organize your files. Use including and preferable subfolders. Depending on project size.

16. http://tinyurl.com/swetugg-sass
Live demo!
CSS with superpowers
&
LESS is more

17. Structure in my demo project
• Uses SASS.
• Based on GULP task runner.
• Uses Sourcemaps and Autoprefixer.
• Uses live-reload for SASS, JavaScript and HTML.
• Also contains GULP-structure for JavaScript with TDD (Karma/Jasmine).
• Saves both the minified and the full version of the CSS-file.
http://tinyurl.com/swetugg-sass

19. Mail: jobb@stellanlindell.se
LinkedIn: https://se.linkedin.com/in/stellanlindell
Twitter: @stellanlindell
GitHub: https://github.com/stiltet
Länk till DEMO: http://tinyurl.com/swetugg-sass
STELLAN LINDELL