Software programming tools for creating/managing CSS files

Software programming tools for creating/managing CSS files DinuSuman

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 */ • #headerh1 { • 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) solidblack;

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: <linkrel="stylesheet/less" type="text/css"href="styles.less"> <scriptsrc="less.js" type="text/javascript"></script> Server: $npm install less Command-line usage: $lesscstyles.less $lesscstyles.less > styles.css Options: -x (minified)

Blank slide

vs 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; } • /* CSS */ • .selector { • background-image: url(../img/tmpl1/png/head_bg.png); background-color: #FF00FF; • border-top: 1px solid #FF00FF; • }

vs Nested selectors: .selector { self { margin: 20px; } a { display: block; } strong { color: blue; } } • /* CSS */ .selector { margin: 20px; } .selector a { display: block; } .selector strong { color: blue; }

vs Extending Objects: .basicClass { padding: 20px; background-color: #FF0000; } .specialClassextends .basicClass { padding: 10px; font-size: 14px; } • /* CSS */ .specialClass, .basicClass { padding: 20px; background-color: #FF0000; } .specialClass { padding: 10px; font-size: 14px; }

vs Math 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%; }

vs Usage: Download xCSS archive. Add this lines: <script type="text/javascript"src="path_to_xcss/"></script> <linkrel="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.hltd.ln { • text-align: right; • } • li { • font-family: serif; • font-weight: bold; • font-size: 1.2em; • }

vs & Mixins: @mixintable-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 #f00 background: #fdd .error.intrusion font-size: 1.3em font-weight: bold .badError @extend .error border-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 $ifrom 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 $ sassinput.sass output.css $sass --watch style.sass:style.css $sass --watch app/sass:public/stylesheets Options: --style (:nested, :expanded, :compact, :compressed) # Convert Sass to SCSS $sass-convertstyle.sassstyle.scss # Convert SCSS to Sass $sass-convertstyle.scssstyle.sass

Q&A ?

Thanks.

Software programming tools for creating/managing CSS files