1. Software programming tools for creating/managing CSS files DinuSuman

2. 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)

3. 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/)

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

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

6. Variables // LESS @color: #4D926F; #header { color:@color; } h2 { color:@color; } /* Compiled CSS */ #header { color: #4D926F; } h2 { color: #4D926F; }

7. 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; }

8. 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; }

9. 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; }

10. 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;

11. 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

12. 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";

13. 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)

14. 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; }

15. 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; }

16. 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; }

17. 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%; }

18. 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!

19. 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; }

20. 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; }

21. 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; }

22. 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; }

23. 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; }

24. 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

25. Q&A?

26. Thanks.