CSS_Preprocessor

@bermonpainter #teamsass CSS PRE-PROCESSORS Sass Less Stylus

@bermonpainter #teamsass HISTORY OF CSS Non-linear, wibbly wobbly, timey wimey…stuﬀ
@bermonpainter #teamsass http://images2.fanpop.com/images/photos/6200000/Tardis-in-Space-tardis-6289810-1280-768.jpg

@bermonpainter #teamsass HISTORY OF CSS master.css

@bermonpainter #teamsass HISTORY OF CSS Wouldn’t it be nice if
you could separate your CSS?

@bermonpainter #teamsass HISTORY OF CSS reset.css base.css layout.css typo raphy.css
theme.css

you could tar et multiple versions of IE and not use hacks?

@bermonpainter #teamsass HISTORY OF CSS

theme.css ie6.css ie7.css ie8.css

@bermonpainter #teamsass HISTORY OF CSS Performance Impact

you could separate your CSS, tar et multiple versions of IE, not use hacks and serve a sin le CSS ﬁle a ain?

@bermonpainter #teamsass HISTORY OF CSS @import ‘base.css’;

theme.css ie6.css ie7.css ie8.css master.css

you could separate your CSS, tar et multiple versions of IE, not use hacks, serve a sin le CSS ﬁle a ain, without impactin performance?

@bermonpainter #teamsass HISTORY OF CSS

@bermonpainter #teamsass HISTORY OF CSS Buildin Systems

@bermonpainter #teamsass

@bermonpainter #teamsass HISTORY OF CSS Wouldn’t it be nice if…?

@bermonpainter #teamsass CSS PRE-PROCESSORS Sass Less Stylus

@bermonpainter #teamsass CSS PRE-PROCESSORS Sass Less Stylus What is a
pre-processor?

@bermonpainter #teamsass CSS PRE-PROCESSORS Sass Less Stylus A system written
in another lan ua e that adds lots of tasty oodies that don’t exist in CSS, ivin you more control, while still spittin out somethin a browser can understand.

@bermonpainter #teamsass CSS PRE-PROCESSORS Sass Less Stylus If you write
poor CSS, a preprocessor won’t make it suck less.

@bermonpainter #teamsass CSS PRE-PROCESSORS Sass Less Stylus 1. Be inner
2. Intermediate 3. Advanced

@bermonpainter #teamsass QUICK START

@bermonpainter #teamsass QUICK START Be inner

@bermonpainter #teamsass COMMAND LINE

@bermonpainter #teamsass COMMAND LINE gem install sass mv style.css style.scss
sass style.scss style.css Sass <install homebrew> <install node> <install npm> npm install less lessc style.less Less <install homebrew> <install node> <install npm> npm install stylus stylus -c style.styl Stylus

@bermonpainter #teamsass HISTORY OF CSS Watchers, recompile on the ﬂy

@bermonpainter #teamsass SERVER SIDE

@bermonpainter #teamsass SYNTAX

@bermonpainter #teamsass SYNTAX /* SCSS */ .widget { margin: 20px
10px; } /* Sass */ .widget margin: 20px 10px Sass .widget { margin: 20px 10px; } Less .widget margin 20px 10px Stylus

@bermonpainter #teamsass BEGINNER

@bermonpainter #teamsass BEGINNER style.css > style.scss | style.less | style.styl
Just chan e your ﬁle extension

@bermonpainter #teamsass BEGINNER Sass Variables Less Stylus $colorPrimary: #333; $siteWidth:
960px; body { color: $colorPrimary; width: $siteWidth; } @colorPrimary: #333; @siteWidth: 960px; body { color: @colorPrimary; width: @siteWidth; } colorPrimary = #333 siteWidth = 960px body color colorPrimary width siteWidth

@bermonpainter #teamsass BEGINNER body { color: #333; width: 960px; }
Variables - Compiled

@bermonpainter #teamsass BEGINNER Nestin nav { width: 200px; } nav
ul { list-style: none; } nav ul li { background: #ccc; } nav ul li a{ color: #333; }

@bermonpainter #teamsass BEGINNER Nestin Sass nav { width: 200px ul
{ list-style: none; li { background: #ccc; a { color: #ccc; } } } } Less nav width 200px ul list-style none li background #ccc a color: #ccc Stylus nav { width: 200px ul { list-style: none; li { background: #ccc; a { color: #ccc; } } } }

@bermonpainter #teamsass BEGINNER Nestin - Output nav { width: 200px;
} nav ul { list-style: none; } nav ul li { background: #ccc; } nav ul li a{ color: #333; }

@bermonpainter #teamsass BEGINNER Nestin Pay attention to speciﬁcity

@bermonpainter #teamsass BEGINNER Nestin Sass nav { width: 200px; ul
{ list-style: none; } li { background: #ccc; } a { color: #ccc; } } Less nav width 200px ul list-style none li background #ccc a color #ccc Stylus nav { width: 200px; ul { list-style: none; } li { background: #ccc; } a { color: #ccc; } }

@bermonpainter #teamsass BEGINNER Nestin - Output nav { width: 200px;
} nav ul { list-style: none; } nav li { background: #ccc; } nav a{ color: #333; }

@bermonpainter #teamsass BEGINNER @import reset.css base.css layout.css typo raphy.css theme.css
ie6.css ie7.css ie8.css master.css

@bermonpainter #teamsass BEGINNER @import _reset.scss _base.scss _layout.scss _typo raphy.scss _theme.scss
master.scss _setup.scss

@bermonpainter #teamsass BEGINNER @import Sass @import "setup"; @import "reset"; @import
"base"; @import "layout"; @import "typography"; @import "theme"; Less @import "setup" @import "reset" @import "base" @import "layout" @import "typography" @import "theme" Stylus @import "setup"; @import "reset"; @import "base"; @import "layout"; @import "typography"; @import "theme";

@bermonpainter #teamsass INTERMEDIATE

@bermonpainter #teamsass INTERMEDIATE Mixins Vendor Preﬁx Madness .box { -webkit-border-radius:
5px; -moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }

@bermonpainter #teamsass INTERMEDIATE Mixins Sass @mixin borderRadius($radius) { -webkit-border-radius: $radius;
-moz-border-radius: $radius; -ms-border-radius: $radius; -o-border-radius: $radius; border-radius: $radius; } .box { @include borderRadius(5px); }

@bermonpainter #teamsass INTERMEDIATE Mixins Less .borderRadius(@radius) { -webkit-border-radius: @radius; -moz-border-radius:
@radius; -ms-border-radius: @radius; -o-border-radius: @radius; border-radius: @radius; } .box { .borderRadius(5px); }

@bermonpainter #teamsass INTERMEDIATE Mixins Stylus roundedCorner(radius) -webkit-border-radius radius -moz-border-radius radius
-ms-border-radius radius -o-border-radius radius border-radius radius .box roundedCorner(5px)

@bermonpainter #teamsass INTERMEDIATE Mixins - Compiled .box { -webkit-border-radius: 5px;
-moz-border-radius: 5px; -ms-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }

@bermonpainter #teamsass INTERMEDIATE @extend Sass Stylus .borders border 1px solid
#efefef padding 10px p @extend .borders font-size 20px ul, ol @extend .borders text-transform uppercase .borders { border: 1px solid #efefef; padding: 10px; } p { @extend .borders; font-size: 20px; } ul, ol { @extend .borders; text-transform: uppercase; }

@bermonpainter #teamsass INTERMEDIATE @extend - output .borders, p, ul, ol
{ border: 1px solid #efefef; padding: 10px; } p { font-size: 20px; } ul, ol { text-transform: uppercase; }

@bermonpainter #teamsass INTERMEDIATE @extend - output Sass Placeholder Directive %borders
{ border: 1px solid #efefef; padding: 10px; } p { @extend .borders; font-size: 20px; } ul, ol { @extend .borders; text-transform: uppercase; }

@bermonpainter #teamsass INTERMEDIATE @extend - output p, ul, ol {
border: 1px solid #efefef; padding: 10px; } p { font-size: 20px; } ul, ol { text-transform: uppercase; } Sass Placeholder Directive

@bermonpainter #teamsass INTERMEDIATE Reference Parent Selector, & Sass, Less, Stylus
nav { margin: 20px; padding: 20px; .ie7 & { padding: 0px; } }

@bermonpainter #teamsass INTERMEDIATE nav { margin: 20px; padding: 20px; }
.ie7 nav { padding: 0px; } Reference Parent Selector, &

@bermonpainter #teamsass ADVANCED

@bermonpainter #teamsass ADVANCED Lo ic Sass when Less if else
if else unless Stylus if else then for while

@bermonpainter #teamsass ADVANCED Math Operations

@bermonpainter #teamsass ADVANCED Color Functions

@bermonpainter #teamsass ADVANCED nav { /* styles */ } /*
styles */ @media (max-width: 480px) { nav { /* responsive styles */ } } Media Queries

@bermonpainter #teamsass ADVANCED nav { /* styles */ @media (max-width:
480px) { /* responsive styles */ } } Media Queries Sass, Less nav /* styles */ @media (max-width: 480px) /* responsive styles */ Stylus

@bermonpainter #teamsass ADVANCED @mixin respond-to($name){ @if $name == small-screen {
@media only screen and (min-width: 320px) { @content } } @if $name == large-screen { @media only screen and (min-width: 960px) { @content } } } aside { width: 25% @include respond-to(small-screen) { width: 100%; } } Media Queries Sass

@bermonpainter #teamsass COMPASS

@bermonpainter | bermonpainter.com END

CSS_Preprocessor

CSS_Preprocessor

Other Decks in Education

Featured

Transcript