狠狠撸

CSS Preprocessor:
Why and How
M. Mizanur Rahman

Frustrations with CSS
? It looks messy
? Repetitive
? Tendency of copy pasting over and over
? Big chunk of codes
? Vendor specific prefixes
? Not DRY Enough

What if CSS gets a new look
? It becomes re-usable
? It becomes scalable
? It becomes smart
? It understand a programmers mind

What is a Preprocessor?
? Have you heard the word “Preprocessor” for first time?
? CSS preprocessors take code written in the preprocessed
language and then convert that code into the same old css
we’ve been writing for years
? Preprocessors are not CSS, so CSS weaknesses do not belong
to them
? At the end, the output will be pure CSS files. So it does not
matter what Preprocessor you use in your project

Some Popular Preprocessors
? SASS
? LESS
? Stylus

Which one to Choose
? 80% of the SASS, LESS and Stylus are same
? 20% are different based on their advanced features and usage
? The similar features are
? Variables
? Color Transformation
? Mixings
? Nesting
? Loops and conditions
? Import

Let’s Focus on SASS
? SASS - Syntactically Awesome StyleSheets
? Sass is an extension of CSS that adds power and elegance to the basic
language. It allows you to use variables, nested rules, mixins, inline
imports, and more, all with a fully CSS-compatible syntax.
? Features
? Fully CSS3-compatible
? Language extensions such as variables, nesting, and mixins
? Many useful functions for manipulating colors and other values
? Advanced features like control directives for libraries
? Well-formatted, customizable output
? Firebug integration

SASS or SCSS??
? There are two syntaxes available for Sass.
? First and latest one known as SCSS (Sassy CSS) and is an extension of
the syntax of CSS3. This means that every valid CSS3 stylesheet is a
valid SCSS file with the same meaning.
? Files have .scss extension
? It uses brackets and semi-colons just like CSS
? Easy to pickup by the developers
? SASS is the old style syntax.
? Focus on indented syntax
? Have .sass file extension
? Not so well picked by developers for different syntax from CSS

SASS & SCSS samples
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
H1
color: $primary-color
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
H1 {
color: $primary-color;
}

How to Install SASS
? Requires Ruby to be installed on developer machine (Not
server)
gem install sass
sass -v
You can also use the following applications
? Compass
? Koala
? Scout

SASS Features: Variables
? Starts with $ sign
? allows you to assign a value to an easy-to-
remember placeholder name
? Allows:
? numbers (e.g. 1.2, 13, 10px)
? strings of text, with and without quotes
(e.g. "foo", 'bar', baz)
? colors (e.g. blue, #04a3f9, rgba(255, 0, 0, 0.5))
? booleans (e.g. true, false)
? nulls (e.g. null)
? lists of values, separated by spaces or commas
(e.g. 1.5em 1em 0 2em, Helvetica, Arial, sans-serif)
? maps from one value to another (e.g. (key1: value1,
key2: value2))
$width: 5em;
#main { width: $width; }
.label {font-size: $width;}
Converts to
#main {width: 5em; }
.label {font-size: 5em; }

Nesting
/* -- scss -- */
$background: #f0f0f0;
#navbar {
width: 100%;
height: 30px;
padding: 10px;
background: $background;
ul {
list-style: none;
}
li {
float: left;
a { text-decoration: none; }
&:hover { text-decoration: underline; } }
}
/* -- resulting css -- */
#navbar {width: 100%; height:
30px;padding:10px; background:
#f0f0f0}
#navbar ul {list-style: none;}
#navbar li {float: left;}
#navbar li a {text-decoration: none;}
#navbar li a:hover {text-decoration:
underline;}

Interpolation
? You can also use SASS variables in
selectors and property names using
#{} interpolation syntax
$name: foo;
$attr: border;
p.#{$name} {
#{$attr}-color: blue;
}
Outputs
p.foo { border-color: blue; }

Operations
? Number Operations
? Color Operations
? String Operations
? Boolean Operations
? List Operations
? Parentheses
$navbar-width: 950px;
$items: 5;
#navbar li {
width: $navbar-width/$items - 10px;}
p { color: #010203 + #040506; }
p { cursor: e + -resize; }
p { width: 1em + (2em * 3); }
--------------------- Output ------
-----------------
#navbar li {width: 180px}
p { color: #050709; }
p { cursor: e-resize; }
p { width: 7em; }

Mixins
? Mixins allow you to chunk up CSS
declarations (block of rules) to be reusable
with one reference
? Mixins are included in the document with
the @include directive. It also takes optional
arguments.
@mixin rounded-corners {
$radius: 5px;
border-radius: $radius;
-webkit-border-radius: $radius;
-moz-border-radius: $radius; }
#header { @include rounded-corners; }
#footer { @include rounded-corners; }
---------------- Output ------------------------
#header {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}
#footer {
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

Mixins (With Argument)
@mixin my-border($color, $width) {
border: {
color: $color;
width: $width;
style: dashed; }
}
p { @include my-border(red, 1px); }
p {
border-color: red;
border-width: 1px;
border-style: dashed;
}

Converting SASS files to CSS files
sass input.scss output.css

Partials & Imports
? Divide a big SASS file to
smaller SASS files
? Start with a underscore
_example.scss
? Can be reused in different
projects (eg: _table.scss,
_form.scss etc)
? When converted to CSS,
partials files are not
generated to any css files.
? @import “form"; will
import _form.scss

Extend/Inheritance
? One of the most important feature of SASS
? @extend lets you share a set of CSS properties from one
selector to another
? It helps to prevent repetition in our SASS files.
.message {
border: 1px solid #ccc;
padding: 10px;
color: #444; }
.success {
@extend .message;
border-color: green;}
.error {
@extend .message;
border-color: red; }
.warning {
@extend .message;
border-color: orange; }
-------------- Output -------------------------
.message, .success, .error, .warning {
border: 1px solid #cccccc;
padding: 10px;
color: #444; }
.success { border-color: green; }
.error { border-color: red; }
.warning { border-color: orange; }

Looking for More?
? Go through SASS based frameworks
? Compass
? Bourbon
? Susy
? OOCSS (Object Oriented CSS)
? There are some great paid apps for SASS
? CodeKit
? Hammer
? Mixture
? LiveReload
? Prepros

About Me ?
M. Mizanur Rahman
Development Manager, TrustPilot Bangladesh
GraphicPeople
Moderator PHPXperts
Email: mizanur.rahman@gmail.com
Blog: http://booleandreams.wordpress.com

狠狠撸

Css preprocessor-140606115334-phpapp01

More Related Content

Css preprocessor-140606115334-phpapp01