Upload
milos-sutanovac
View
559
Download
3
Tags:
Embed Size (px)
DESCRIPTION
The slides to a 30min talk I gave at the sae-alumni-convention.org in October 2012 — hope you like it!
Citation preview
AN INTRODUCTION TOAN INTRODUCTION TOCSS PREPROCESSORSCSS PREPROCESSORS
SAE ALUMNI CONVENTION, OCTOBER 18TH 2012SAE ALUMNI CONVENTION, OCTOBER 18TH 2012
QUICK INTROQUICK INTROABOUT MEABOUT ME
Milos Sutanovac
Front-End Engineer
Uhm… something with code & design, I guess?
JavaScript, HTML5, CSS3 @
Bachelor of Arts, Web Development
SAE Munich
twitter.com/mixn
“PREPROCESSOR”“PREPROCESSOR”WHAT EXACTLY IS THAT?WHAT EXACTLY IS THAT?
YOU KNOW…YOU KNOW…
WIKIPEDIAWIKIPEDIA“ In computer science, a preprocessor is a program that processes
its input data to produce output that is used as input to another
program. [...] — Wikipedia ”
“CSS PREPROCESSOR”“CSS PREPROCESSOR”Extension to CSS, which compiles to regular CSS
Superset
More functionalities
Outputs regular, cross-browser code
No limitations, since not regular CSS
Makes CSS more flexible & fun to write (again)
QUICK COMPARISONQUICK COMPARISONCSS VS. PREPROCESSORCSS VS. PREPROCESSOR
CSSCSSNo expressions or math
No logic
Lack of variables
Lack of abstraction
Vendor Prefix Hell
width: 5 * (100px + 2); /* 510px? Wishful thinking */
@import url('typography.css');@import url('ui.css');
/* Extra HTTP requests */
PREPROCESSORSPREPROCESSORSCleaner, shorter syntax
Variables
Interpolation
Nesting
Expressions & Calculations
Mixins, Imports, Functions, Statements, Includes, Inheritance, Loops, Logic …
CHOICES &CHOICES &DISTINCTIONSDISTINCTIONS
LESS, SASS, STYLUSLESS, SASS, STYLUS
“THE DYNAMIC STYLESHEET LANGUAGE”“THE DYNAMIC STYLESHEET LANGUAGE”
Alexis Sellier
Originally in Ruby, deprecated & replaced by JavaScript
.lessInstallation
Syntax example
lesscss.org
npm install lessless style.less
@color: #C0FFEE;
.widget { background: @color;}
“STYLE WITH ATTITUDE”“STYLE WITH ATTITUDE”
Hampton Catlin, Nathan Weizenbaum & Chris Eppstein
Written in Ruby
.scss, .sassInstallation
Syntax example
sass-lang.com
gem install sassmv style.css style.scsssass style.scss style.csssass --watch style.sass
$color: #C0FFEE;
.widget { background: $color;}
“EXPRESSIVE, DYNAMIC, ROBUST CSS”“EXPRESSIVE, DYNAMIC, ROBUST CSS”
TJ Holowaychuk
Written in JavaScript
.stylInstallation
Syntax example
learnboost.github.com/stylus
npm install stylusstylus -c style.styl
color = #C0FFEE
.widget color color
FEATURE RUNDOWNFEATURE RUNDOWNMAKING YOU CURIOUS, USING LESSMAKING YOU CURIOUS, USING LESS
VARIABLES &VARIABLES &INTERPOLATIONINTERPOLATION
@primaryColor: #ffffdb;@imgPath: '../img/';
.widget { background: url('@{imgPath}header_bg.png') repeat-x; color: @primaryColor;}
NESTINGNESTING
Dangerous, can result in code bloat
Preprocessing or not, embrace things like &
CSS structure !== HTML structure
Inception rule: don’t go more than four levels deep
@fontSize: 160%;
nav { font-size: @fontSize; li { float: left; a { display: inline-block; &:hover { color: hotpink; } } }}
SMACSS OOCSS
EXPRESSIONS &EXPRESSIONS &CALCULATIONSCALCULATIONS
@foo: 5%;@bar: @foo * 2; // 5% * 2 = 10%@fazbaz: (@bar + @foo) * 5; // (10% + 5%) * 5 = 75%
.widget { width: @fazbaz - 25; // 75% - 25 = 50%}
MIXINSMIXINS
Can have parameters (with default values)
.animated { -webkit-animation: pulse .5s ease-in; -moz-animation: pulse .5s ease-in; -ms-animation: pulse .5s ease-in; -o-animation: pulse .5s ease-in; animation: pulse .5s ease-in;}
.animated_widget { .animated;}
.animated (@timingFunction: linear) { -webkit-animation: pulse .5s @timingFunction; -moz-animation: pulse .5s @timingFunction; -ms-animation: pulse .5s @timingFunction; -o-animation: pulse .5s @timingFunction; animation: pulse .5s @timingFunction;}
.animated_widget { .animated;}
.another_animated_widget { .animated(ease-in);}
IMPORTSIMPORTS
No extra HTTP request
Concatination behind the scenes
// Instead of this@import url('typography.css');
// Do this@import 'typography.css';
FUNCTIONSFUNCTIONS
Sass & Stylus offer even
lighten(@color, 10%); // return a color which is 10% lighter than @colordarken(@color, 10%); // return a color which is 10% darker than @color
saturate(@color, 10%); // return a color 10% more saturated than @colordesaturate(@color, 10%); // return a color 10% less saturated than @color
fadein(@color, 10%); // return a color 10% less transparent than @colorfadeout(@color, 10%); // return a color 10% more transparent than @colorfade(@color, 50%); // return @color with 50% transparency
spin(@color, 10); // return a color with a 10 degree larger in hue than @colorspin(@color, -10); // return a color with a 10 degree smaller hue than @color
mix(@color1, @color2); // return a mix of @color1 and @color2
more
STATEMENTS & LOGICSTATEMENTS & LOGICif, else, for, each, while
Programming logic applied to CSS
http://thesassway.com/intermediate/if-for-each-while
SOME DRAWBACKSSOME DRAWBACKSBECAUSE NOTHING IS PERFECTBECAUSE NOTHING IS PERFECT
Working on a team
Editing the compiled .css file
Increases room for errors
Potential code bloat
Choice?
Not without a learning curve — but what is?
Command Line
Can be avoided: , , ,
Learn it — it’s the most powerful tool you have
CodeKit LiveReload Compass.app SCOUT
“ Learn to love the command line. It isn’t scary. You know how to use
Photoshop which has 300 buttons — THAT’S scary. — Stephen Hay ”
THANK YOUTHANK YOUFOR YOUR ATTENTIONFOR YOUR ATTENTION