Software programming tools for creating/managing

CSS files

Dinu Suman

What kind of software tools can be?

• IDE• Tools for generating templates• CSS Frameworks with existing plugins, …• Languages that extend css

(will be covered in this presentation)

Some Languages that extend css:

• Less (http://lesscss.org/)• xCSS (http://xcss.antpaw.org)• Sass/Scss (http://sass-lang.com/)• Hss (http://ncannasse.fr/projects/hss)• CleverCss (

http://sandbox.pocoo.org/clevercss/)

Why simple css isn’t enough?Why do we need extending languages?

What do we get?• Variables• Mixins• Nested Rules• Functions & Operations

Variables

// LESS @color: #4D926F; #header {

color: @color;} h2 {

color: @color; }

/* Compiled CSS */ #header {

color: #4D926F; } h2 {

color: #4D926F; }

Mixins// LESS .rounded-corners (@radius: 5px) {

border-radius: @radius; -webkit-border-radius: @radius; -moz-border-radius: @radius;

} #header {

.rounded-corners; } #footer {

.rounded-corners(10px); }

/* Compiled CSS */ #header {

border-radius: 5px; -webkit-border-radius: 5px; -moz-border-radius: 5px;

} #footer {

border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px;

}

Nested Rules// LESS #header {

h1 { font-size: 26px; font-weight: bold;

} p { font-size: 12px;

a { text-decoration: none; &:hover {

border-width: 1px ;}

}}

}

/* Compiled CSS */ #header h1 {

font-size: 26px; font-weight: bold;

} #header p {

font-size: 12px; } #header p a {

text-decoration: none; } #header p a:hover {

border-width: 1px; }

Functions & Operations // 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%);

}

/* Compiled CSS */ #header {

color: #333; border-left: 1px; border-right: 2px;

} #footer {

color: #114411; border-color: #7d2717;

}

Other Operations:

@base: 5%; @filler: @base * 2; @other: @base + @filler; color: #888 / 4; background-color: @base-color + #111; Height: 100% / 2 + @filler;

@var: 1px + 5;

width: (@var + 5) * 2;border: (@width * 2) solid black;

Functions:lighten(@color, 10%); // return a color which is 10% *lighter* than @color darken(@color, 10%); // return a color which is 10% *darker* than @color

saturate(@color, 10%); // return a color 10% *more* saturated than @color desaturate(@color, 10%); // return a color 10% *less* saturated than @color

fadein(@color, 10%); // return a color 10% *less* transparent than @color fadeout(@color, 10%); // return a color 10% *more* transparent than @color

spin(@color, 10); // return a color with a 10 degree larger in hue than @color spin(@color, -10); // return a color with a 10 degree smaller hue than @color

hue(@color); // returns the `hue` channel of @color saturation(@color); // returns the `saturation` channel of @color lightness(@color); // returns the 'lightness' channel of @color

Other://Scope@var: red; #page {

@var: white; #header { color: @var; // white }

} #footer { color: @var; // red }

//importing@import "lib.less"; //or@import "lib";

//if css@import "lib.css";

Usage

Client:CSS + JS:<link rel="stylesheet/less" type="text/css" href="styles.less"><script src="less.js" type="text/javascript"></script>

Server:$ npm install less

Command-line usage:$ lessc styles.less$ lessc styles.less > styles.cssOptions: -x (minified)

vs/* CSS */.selector {

background-image: url(../img/tmpl1/png/head_bg.png); background-color: #FF00FF; border-top: 1px solid #FF00FF;

}

Variables:vars {

$path = ../img/tmpl1/png; $color1 = #FF00FF; $border = border-top: 1px solid

$color1; }.selector {

background-image: url($path/head_bg.png); background-color: $color1; $border;

}

vsNested selectors:.selector {

self { margin: 20px;

} a {

display: block; } strong {

color: blue; }

}

/* CSS */.selector { margin: 20px; }.selector a { display: block; } .selector strong { color: blue; }

vsExtending Objects:.basicClass {

padding: 20px; background-color: #FF0000;

} .specialClass extends .basicClass {

padding: 10px; font-size: 14px;

}

/* CSS */.specialClass, .basicClass {

padding: 20px; background-color: #FF0000;

} .specialClass {

padding: 10px; font-size: 14px;

}

vsMath Operations:.selector {

padding: [5px * 2]; color: [#ccc * 2]; // lets assume $color is '#FFF555' background-color: [$color - #222 +

#101010]; }

.selector { padding: [5px - 3em + 5px]cm; margin: [20 - 10] [30% - 10];

}

/* CSS */.selector {

padding: 10px; color: #ffffff; background-color: #ede343;

}

.selector { padding: 7cm; margin: 10px 20%;

}

vsUsage:Download xCSS archive.Add this lines:<script type="text/javascript" src="path_to_xcss/"></script><link rel="stylesheet“ type="text/css“ href=“/css/master.css”/>

Edit the configuration file config.php as needed.$config['path_to_CSS_dir']$config['xCSS_files']$config['use_master_file']$config['master_filename']$config['reset_files']$config['minify_output']…Done!

vs &Variables:$blue: #3bbfce $margin: 16px .content-navigation

border-color: $blue color: darken($blue, 9%)

.border padding: $margin / 2 margin: $margin / 2 border-color: $blue

/* CSS */.content-navigation {

border-color: #3bbfce; color: #2b9eab;

} .border {

padding: 8px; margin: 8px; border-color: #3bbfce;

}

vs &Nesting rules:table.hl

margin: 2em 0 td.ln

text-align: right li

font: family: serif weight: bold size: 1.2em

/* CSS */table.hl {

margin: 2em 0; } table.hl td.ln {

text-align: right; } li {

font-family: serif; font-weight: bold; font-size: 1.2em;

}

vs &Mixins:@mixin table-base

th text-align: center font-weight: bold

td, th padding: 2px

@mixin left($dist) float: left margin-left: $dist

#data @include left(10px)@include table-base

/* CSS */#data {

float: left; margin-left: 10px;

} #data th {

text-align: center; font-weight: bold;

} #data td, #data th {

padding: 2px; }

vs &Selector Inheritance:.error

border: 1px #f00background: #fdd

.error.intrusion font-size: 1.3em font-weight: bold

.badError @extend .errorborder-width: 3px

/* CSS */.error, .badError {

border: 1px #f00; background: #fdd;

} .error.intrusion, .badError.intrusion {

font-size: 1.3em; font-weight: bold;

} .badError {

border-width: 3px; }

vs &Control Directives:p {

@if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; }

}@for $i from 1 through 3 {

.item-#{$i} { width: 2em * $i; } }$i: 6; @while $i > 0 {

.item-#{$i} { width: 2em * $i; } $i: $i - 2;

}

/* CSS */

p { border: 1px solid; }

.item-1 { width: 2em; }

.item-2 { width: 4em; }

.item-3 { width: 6em; }

.item-6 { width: 12em; }

.item-4 { width: 8em; }

.item-2 { width: 4em; }

vs &

Usage:$ gem install haml $ sass input.sass output.css$ sass --watch style.sass:style.css$ sass --watch app/sass:public/stylesheetsOptions: --style (:nested, :expanded, :compact, :compressed)

# Convert Sass to SCSS $ sass-convert style.sass style.scss # Convert SCSS to Sass $ sass-convert style.scss style.sass

Q&A?

Thanks.