Introduction to CSS Preprocessors, exploring RWD approach and tools to help optimise developer workflow

1. CSS preprocessor
LESS is more or look SASS-y trying

2. Intro
• Web Developer
• Mobile Developer
• .net magazine
• @jrcryer

3. Definition
CSS preprocessors extend CSS, allowing
designers and developers create dynamic, module
and re-usable CSS

4. So...

5. Benefits
• Reduces complexity
• Increase maintainability
• Frameworks
• Optimized CSS output
• Simplifies RWD implementation

6. Key Features
• Variables
• Mixins
• Nesting
• Operations
• Modular

7. LESS
• Inspired by original SASS
• Firstly written in Ruby, converted to JavaScript
• Client side (via less.js)
• Server side with NodeJs
<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="less.js" type="text/javascript"></script>
npm install -g less
lessc styles.less

8. SASS / SCSS
• Implemented in Ruby
• Two Syntaxes
• SASS - Indent based, similar to HAML
• SCSS - CSS block
• Installation
gem install sass
sass --watch style.scss:style.css

9. Variables
/* style.scss */
$color: #4D926F;
#header {
color: $color;
}
h2 {
color: $color;
}
/* style.less */
@color: #4D926F;
#header {
color: @color;
}
h2 {
color: @color;
}

10. MIXINS
/** style.scss **/
@mixin rounded-corners ($radius: 5px) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
-o-border-radius: $radius;
border-radius: $radius;
}
#header {
@include rounded-corners;
}
#footer {
@include rounded-corners(10px);
}
/** style.less **/
.rounded-corners (@radius: 5px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
-ms-border-radius: @radius;
-o-border-radius: @radius;
border-radius: @radius;
}
#header {
.rounded-corners;
}
#footer {
.rounded-corners(10px);
}

11. Nesting
/** style.scss **/
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}
/** style.less **/
#header {
h1 {
font-size: 26px;
font-weight: bold;
}
p { font-size: 12px;
a { text-decoration: none;
&:hover { border-width: 1px }
}
}
}

12. Operations
/** style.scss **/
$the-border: 1px;
$base-color: #111;
$red: #842210;
#header {
color: ($base-color * 3);
border-left: $the-border;
border-right: ($the-border * 2);
}
#footer {
color: ($base-color + #003300);
border-color: desaturate($red, 10%);
}
/** style.less **/
@the-border: 1px;
@base-color: #111;
@red: #842210;
#header {
color: (@base-color * 3);
border-left: @the-border;
border-right: (@the-border * 2);
}
#footer {
color: (@base-color + #003300);
border-color: desaturate(@red, 10%);
}

13. Modules
/** _variables.scss **/
@base-color: #111;
/** style.scss **/
@import “variables”
#header {
color: @base-color;
}
/** variables.less **/
@base-color: #111;
/** style.less **/
@import-once ‘variables.less’
#header {
color: @base-color;
}

14. Responsive Pattern
modules/
header/
_base.scss
_responsive-320px-min.scss
_responsive-768px-min.scss
_responsive-1024px-min.scss
_variables.scss
_mixins.scss
_responsive.scss
app.scss
/** app.less **/
@import “variables”;
@import-once “mixins”;
@import-once “modules/header/base”;
@import-once “responsive”;
/** _responsive.less **/
@media (min-width:320px) {
@import-once “modules/header/responsive-
320px-min”;
}
modules/
header/
_base.less
_responsive-320px-min.less
_responsive-768px-min.less
_responsive-1024px-min.less
_variables.less
_mixins.less
_responsive.less
app.less
/** app.less **/
@import-once “_variables.less”;
@import-once “_mixins.less”;
@import-once “modules/header/_base.less”;
@import-once “_responsive.less”;
/** _responsive.less **/
@media (min-width:320px) {
@import-once
“modules/header/_responsive-320px-
min.less”;
}

15. CSS Frameworks

16. Other tools

17. Features Not Covered...
• GUARDED MIXINS
• NAMESPACES & SCOPE
• CONTROL DIRECTIVES
• DEBUGGING
• SOURCE MAPS

18. Demo Time!

19. Fin!