This document discusses CSS preprocessors, specifically Less and Sass, highlighting their capabilities in extending CSS through features like variables, mixins, and nesting. It outlines the benefits of using preprocessors, such as reduced complexity and increased maintainability, while providing installation instructions and code examples for both Less and Sass. Additionally, it touches on modular structures and responsive design patterns, emphasizing the advantages these tools offer to web developers.

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!