Preprocess All The Things!

@cdharrison Preprocess All the !ings! · #CSSPPATT · TransformAthens ·
October 17, 2013 PREPROCESS ALL THE THINGS! Chris Harrison Front-End Developer, Morris Media Network An Introduction to CSS Preprocessors

October 17, 2013 #CSSPPATT

October 17, 2013 Hi, I'm @cdharrison.

October 17, 2013 A Brief History of CSS

October 17, 2013

October 17, 2013 Before CSS Everything had attributes: <font color="#ffe100" size="2" face="Papyrus">ZOMG</font> It was messy. But it was the way things were done.

October 17, 2013 1996: CSS1 Partially supported in IE3 and Netscape 4. Wasn't 100% implemented until IE5 in 2000.

October 17, 2013 Instead of writing stuff like this... <font color="#ffe100" size="2" face="Papyrus">ZOMG</font> we started writing stuff like this... <p style="color:#ffe100; font-size:3; font-family: Papyrus">ZOMG</p> or this... <style>p { color:#ffe100; font-size:3; font-family: Papyrus; }</style>

October 17, 2013 It wasn't perfect. But it (mostly) worked.

October 17, 2013 CSS Rocks. Mostly.

October 17, 2013 No Variables Multiple HTTP Requests Non-Reusable

October 17, 2013

October 17, 2013 THE FUTURE IS NOW.

October 17, 2013 Why use a preprocessors? Preprocessors compile the CSS code we write in a processed language to the pure CSS syntax we're all used to.

October 17, 2013 Encourage DRY Syntax Don't Repeat Yourself. Modular CSS = Reusable CSS

October 17, 2013 Writing CSS like this sucks: header { background: #c00; } header h1.masthead { font-size: 2em; } header h1.masthead a { color: #ffe100; } header h1.masthead a:hover { color: #000; }

October 17, 2013 Browser Compatibility? Preprocessors don't break browser compatibility. LESS, Sass and Stylus all output valid CSS.

October 17, 2013 They can speed up development. Frameworks, Mixins, Variables are your BFF

October 17, 2013 Preprocessors aren't a cure for sucky CSS.

October 17, 2013 CHOICES

October 17, 2013 Written in JavaScript, LESS extends CSS with dynamic behaviors like variables, mixins, operations and functions. With less.js, you can embed .less files just like .css files and it compiles on the fly. (Or you can precompile client or server-side.) http://lesscss.org

October 17, 2013 Written in JavaScript (node.js), comes with many of the features of LESS and Sass. It supports both indented syntax and regular CSS style. http://learnboost.github.io/stylus

October 17, 2013 Written in Ruby, Sass also extends CSS by adding nested rules, variables, mixins, functions, and much more. Sass has two syntaxes: SCSS, which stands for “Sassy CSS”, and the older syntax simply known as “Sass”. http://sass-lang.com

October 17, 2013 And there are more... http://hrrsn.me/RzuV

October 17, 2013 COMPILE

October 17, 2013 You can compile via Command Line...

October 17, 2013

October 17, 2013 Or you can use an app.

October 17, 2013 An app? For reals? You don't have to compile Ruby, install Sass, Node.js or any other prerequisites before writing any LESS or Sass.

October 17, 2013 http://incident57.com/codekit/ http://incident57.com/codekit/ Mac · $28* · Sass + Compass & Bourbon, LESS, HAML, Stylus, Jade, CoﬀeeScript & More

October 17, 2013 http://compass.kkbox.com PC/Linux/Mac · $10 · Sass/Compass

October 17, 2013 http://alphapixels.com/prepros/ PC/Mac · Free/$24 Pro Version · Sass, LESS, CoﬀeeScript, HAML, Jade & More Prepros

October 17, 2013 http://koala-app.com PC/Linux/Mac · Free · Sass + Compass, LESS, CoﬀeeScript Koala

October 17, 2013 More CSS Preprocessor GUIs http://hrrsn.me/S07A

October 17, 2013 QUICK START

October 17, 2013 Variables Variables are a way to store information that you can reuse throughout your stylesheet. Use them to store things like colors, font stacks, or any CSS value you think you'll want to reuse.

October 17, 2013 Nesting HTML has a fairly clear nested, visual hierarchy. CSS doesn't. Sass & LESS will let you nest your CSS selectors in a way that follows the same visual hierarchy of your HTML.

October 17, 2013 @import In CSS, @import lets you split your CSS into smaller, more maintainable portions but this creates additional HTTP requests. Sass & LESS take the file that you want to import and combine it with the file you're importing into so you can serve a single CSS file to the web browser.

October 17, 2013 And here's the part where I stop talking about LESS.

October 17, 2013 Sass Partials !ese are ﬁles that contain little snippets of CSS that you can include in other Sass ﬁles. @import "_partial.scss";

October 17, 2013 & (Referencing Parent Selector) a { color: red; &:hover{ background: red; } }

October 17, 2013 /* Comments */ // Document the crap out of everything. /* Displays when compiled */ // Doesn't display when compiled.

October 17, 2013 Nested Media Queries Keep media queries within the context of original selectors.

October 17, 2013 Mixins Reusable sets of properties or rules that you can include or mix into other rules. Deﬁne via @mixin mixin-name; and then use @include mixin-name; with a selector. @mixin mixin-name{}; @include mixin-name;

October 17, 2013 Operators Sass has a handful of standard math operators like +, -, *, /, and %. article { width: 600px / 960px * 100%; }

October 17, 2013 %foo & @extend Placeholder selectors look just like class or id's but they're used with @extend. Used on their own, they aren't compiled into your CSS.

October 17, 2013 And did I mention... Frameworks & Mixin Libraries? Bootstrap, Foundation, Compass, Bourbon & More... http://hrrsn.me/RzyE

October 17, 2013 Further Reading http://hrrsn.me/Rzwm

October 17, 2013 Any Questions? [email protected] http://speakerdeck.com/cd @cdharrison

October 17, 2013 Thank you!

Preprocess All The Things!

Preprocess All The Things!

More Decks by @cdharrison

Other Decks in Programming

Featured

Transcript