Developer's Roundtable Notes

Session: Super Powers for CSS

What is a CSS Pre-processor

Mostly, a tool to make your life easier!

Technically, a language that extends the CSS.

 

Why use one?

In a word: Variables

And: Nesting, Importing, Operations

Bonuses: Formatting and Minification

Battle of the Pre-processors

less1

http://lesscss.org

sass1

http://sass-lang.com

 

┬áMost of what I’ll cover today is the same for both

What Can You Do With LESS?

  • Set Variables
  • Do Computations
  • Nest Parameters
  • Import Styles and Fonts
  • Create Mixins (classes)
  • Create Parametric Mixins (classes with variables)
  • Lots More Advanced things

Plus, everything else you can do with CSS

Defining Variables

These go at the beginning of your file:

 

Sass uses $ instead of @

Using Variables

 

Becomes this CSS:

 

Set the variable once, and use it throughout your stylesheet

Computations

 

Change one variable, and dependent values change as well

Mixins – Custom Classes

Use it like this:

 Much less copy pasta

Parametric Mixins (with Variables)

Use:

CSS:

 

These mixins act like functions, so you need the ()

Multiple Parameter Variables

In use:

CSS:

 

@arguments Magic

Use:

CSS:

 

Importing

 

Keep your style sheets together

Operations

 

CSS:

 

Text Variables

 

Output:

 

Nesting

 

Saves time and makes CSS much more readable

Watch This

Getting Started

1. Decide which preprocessor

2. Decide how you will compile your files

3. Start writing (less)

 

Skip to toolbar