Upload
dinu-suman
View
116
Download
5
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
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.