Upload
chris-barr
View
112
Download
0
Tags:
Embed Size (px)
DESCRIPTION
Citation preview
CSS PreprocessorsWriting styles that you can actually manage
So, what is CSS?
● Not a programming language● Possibly a declarative language
"In computer science, declarative programming is a programming paradigm that expresses the logic of a computation without describing its control flow."
- Wikipedia
● Possibly a style sheet language
(CSS is the only style sheet language listed on Wikipedia)
the only
Google Images says...
CSS is great and all, but...#comments .comment-author {
font-size: 18px;
font-weight: bold;
}
#comments .comment {
background: #f2f2f2;
border: 1px solid #e2c2fd;
}
#comments .comment:hover {
border-color: #c685fc;
}
#comments .comment.byuser {
border-color: #fda6a7;
}
#comments .comment.byuser:hover {
border-color: #fc6b6d;
}
CSS is great and all, but...#comments .comment-author {
font-size: 18px;
font-weight: bold;
}
#comments .comment {
background: #f2f2f2;
border: 1px solid #e2c2fd;
}
#comments .comment:hover {
border-color: #c685fc;
}
#comments .comment.byuser {
border-color: #fda6a7;
}
#comments .comment.byuser:hover {
border-color: #fc6b6d;
}
CSS Preprocessors to the rescue!
*.sass and *.scss
Big SASS Features
● Code nesting! (less repetition)
● Math & color manipulation● Variables!● Mixins! (functions)
But you are still just writing CSS!
Code Nesting
#primary-nav {
display: block;
padding: 10px;
a {
color: #1155CC;
display: inline-block;
padding: 5px 10px;
&:hover {
color: lightblue;
}
}
}
#primary-nav {
display: block;
padding: 10px;
}
#primary-nav a {
color: #1155CC;
display: inline-block;
padding: 5px 10px;
}
#primary-nav a:hover {
color: lightblue;
}
SCSS Generated CSS
Variables & Such
$color-link: #1155CC;
$color-link-hover: lighten($color-link, 25%);
$spacing: 5px;
a {
color: $color-link;
padding: $spacing $spacing*2;
&:hover {
color: $color-link-hover;
}
}
a {
color: #1155CC;
padding: 5px 10px;
}
#primary-nav a:hover {
color: #69ACF3;
}
SCSS Generated CSS
Color Manipulation$myColor: #2A547E; //#2A547E
saturate($myColor, 20%); //#19548f
desaturate($myColor, 20%); //#3b546d
lighten($myColor, 25%); //#5e94c9
darken($myColor, 25%); //#1d3a58
grayscale($myColor); //#545454
complement($myColor); //#7e542a
invert($myColor); //#d5ab81
$fadedColor: opacity($myColor, 0.7);
//rgba(42, 84, 126, 0.3)
transparentize($fadedColor, 30%);
//rgba(42, 84, 126, 0.6)
Mixins (functions)
@mixin rounded($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
border-radius: $radius;
}
@mixin opacity($opacity) {
opacity: $opacity / 100;
filter: alpha(opacity=$opacity);
}
#myElement{
@include rounded(5px);
@include opacity(80);
}
#myElement{
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
opacity: 0.8;
filter: alpha(opacity=80);
}
Mixins SCSS
Generated CSS
DEMO
More Mixins & Extensions
bourbon.io compass-style.org
This is the last slide.
SASS sass-lang.comLESS lesscss.orgStylus learnboost.github.com/stylus
● Mindscape Web Workbench○ mindscapehq.com/products/web-workbench○ free, but crippled.
● Web Tools○ Newest update -2012.2 adds LESS support!○ asp.net/vnext/overview/fall-2012-update
compass-style.orgbourbon.io
Visual Studio Integration
CSS Preprocessors SASS Extensions
sass-lang.com/tutorial.htmlthesassway.com
Learnings
Just kidding, this is the last slide.