Objective: Cascading Style Sheets. Why use CSS? Where to use it?
CSS preprocessor: why and how
-
Upload
mirahman -
Category
Technology
-
view
124 -
download
0
description
Transcript of CSS preprocessor: why and how
CSS Preprocessor: Why and How
M. Mizanur Rahman
A love letter from CSS
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 csswe’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: [email protected]
Blog: http://booleandreams.wordpress.com