Software programming tools for creating/managing CSS files

Software programming tools for creating/managing CSS filesDinuSuman

What kind of software tools can be?IDETools for generating templatesCSS 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?VariablesMixinsNested RulesFunctions & 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 @colorhue(@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";

UsageClient:CSS + JS:<linkrel="stylesheet/less" type="text/css"href="styles.less"><scriptsrc="less.js" type="text/javascript"></script>Server:$npm install lessCommand-line usage:$lesscstyles.less$lesscstyles.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; } .specialClassextends .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><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/stylesheetsOptions: --style (:nested, :expanded, :compact, :compressed)# Convert Sass to SCSS $sass-convertstyle.sassstyle.scss# Convert SCSS to Sass $sass-convertstyle.scssstyle.sass

Software programming tools for creating/managing CSS files

Recommended

More Related Content

What's hot (20)

Similar to Software programming tools for creating/managing CSS files (20)

Recently uploaded (20)

Software programming tools for creating/managing CSS files