Working with
CSS preprocessor
(SASS)
Ashraful Karim Miraz
I will talk about
- CSS weaknesses
- Preprocessors features
- Sass
- Workflow
CSS Weaknesses
At the office...
Product Manager:
Can we try changing our theme quickly? I think blue buttons will be more engaging!
You:
Hm.. It's not that quick. Come back in 30 min?
Product Manager 30 min later:
Ah it's ugly! an we try lighter blue and compare it to this orange and green too?
3 Major CSS weaknesses
- Lack of essential basic features
- Hard to maintain (huge messy CSS files)
- Not DRY enough - leads to mistakes
Working with multiple files
Having multiple CSS files is essential for maintainability and collaboration
But @import sucks (additional HTTP requests)
We need to use a build tool for concatenation.
... but maybe it can do more than just that?
This is what CSS preprocessor do :)
What is Css Preprocessor?
A scripting language that extends CSS and get compiled into regular CSS syntax.
3 most POPULAR Preprocessors
- SASS (http://sass-lang.com)
- LESS (http://lesscss.org)
- Stylus (http://learnboost.github.com/stylus)
They are all great :)
Title
- Cleaner code with reusable pieces
- More flaxibility to do things on the fly
- Shareable snippets and libraries
- Easily produce CSS that works across browsers
Features
About those features
Less, Sass and Stylus support them all
They don't enhance CSS, but improve your
development workflow
Variables
They are actually constants (and it's fine)
$my_blue: #4e6cb0; // Sass
@my_blue: #4e6cb0; // Less
my_blue = #4e6cb0; // Stylus
$primary_color: $my_blue;
h1 {
color: $primary_color;
}
Variables Types
Variable are not just for colors!
$fonts: Helvatica, Arial, sans-serif;
$images_path: "../img";
$font_size: 1.5em;
$margin: 20px;
$width: 100%;
Operations and Color Funtions
Math and colors options
width: 25px * 4 + 100px / 2 - 50px; // = 100px
color: #990033 + #666666; // = #FF66CC
Color functions
$light_blue: lighten($my_blue, 20%);
$flashy_blue: saturate($my_blue, 50%);
Mixins
Functions like lighten() return a value.
Mixins don't return anything but output CSS.
@mixin border-radius($radius: 10px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
.button {
@include border-radius(4px);
}
Nesting
.pop {
.pop-btn{
}
}
//======= OUTPUT =======//
.pop { }
.pop .pop-btn { }
.link {
&:hover{
}
}
//======= OUTPUT =======//
.link { }
.link:hover { }
Don't nest too much (
4 levels max
)
Imports and minification
Imports now work with no performance costs!
@import "colors";
@import "typography";
@import "layout"
CSS output can be clear or minified
#main{color:#fff;background-color:#000}#main p{width: 10em}.huge{font-size:10em;font-weight:bold;text-decoration:underline}
Syntactically Awesome StyleSheet
Sass Welcome Package
- 2 syntaxes: .sass and .scss (CSS like)
-
Twitter Bootstrap and ZURB Foundation
-
Even more crazy features (extend, if, for...)
Recomended blog:
Compass
Compass is a Sass framework, designed to make the work of styling the web smooth and efficient.
Compass is a collection of helpful tools and battle-tested best practices for Sass.
CSS3, Spriting, Grids, Typography, Data-URLs, Cross-browser, assets path, tons of helpers...
@import "compass/css3/border-radius";
.button {
@include border-radius(10px);
}
Workflow
INSTALLING and Running
Follow the instruction:
Go to http://www.sass-lang.com/install for Sass, and
http://compass-style.org/install/ for Compass
Just Sass:
> gem install sass
> sass --watch Sass + Compass:
> gem install compass
> compass create
> compass --watch Gui Compilers
Syntax Highlighting
Editors and IDEs that support Sass:
VIM, Emacs, Sublime Text 2, TextMate, Eclipse, NetBeans, WebStorm, Visual Studio, PyCharm, RadRails, RubyMine, Komodo, Coda, GEdit, [...]
Plugin for Visual Studio
Web Workbench
Developer Efficiency Chart
Example...
Thank You
Working With Css Preprocessor (SASS)
By Ashraful Karim Miraz
