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:

@gold: #F8AA46;

@litegold: #f8bf76;

@blue: #3589EE;

@textcolor: #444;

 

@bodyfont: "Open Sans", Verdana, Helvetica, Arial, sans-serif;

@headfont: "Ubuntu", @bodyfont;

@headcolor: @gold;

@pageback: #f8f8f8;

@linkcolor: @blue;

@site-width: 960px;

 

Sass uses $ instead of @

Using Variables

body { 
   background:@pageback; 
}
html { 
   font-family: @bodyfont; 
   color: @textcolor;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   font-family: @headfont; 
   color: @headcolor;
}
a { 
   color: @linkcolor; 
}

 

Becomes this CSS:

body { 
   background:@pageback; 
}
html { 
   font-family: "Open Sans", Verdana, Helvetica, Arial, sans-serif; 
   color: #444;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
   font-family: "Ubuntu","Open Sans", Verdana, Helvetica, Arial, sans-serif; ; 
   color: #F8AA46;
}
a { 
   color: #3589EE; 
}

 

Set the variable once, and use it throughout your stylesheet

Computations

@darkblue: darken( @blue, 10% );

@lightblue: lighten( @blue, 5% );

@anotherblue: @blue + #444;



@full-width: @site-width;

@half-width: @full-width /2;

 

Change one variable, and dependent values change as well

Mixins – Custom Classes

.mygradient {
   background-color: #ededed;
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fff), to(#ededed));
   background-image: -webkit-linear-gradient(top, #fff, #ededed);
   background-image: -moz-linear-gradient(top, #fff, #ededed);
   background-image: -ms-linear-gradient(top, #fff, #ededed);
   background-image: -o-linear-gradient(top, #fff, #ededed);

}

Use it like this:

button {
   .mygradient;
}

div.mybox {
   .mygradient;
}

 Much less copy pasta

Parametric Mixins (with Variables)

.round( @radius: 5px ) {
   -webkit-border-radius: @radius;
   -moz-border-radius:@radius;
   border-radius:@radius;
}

Use:

.button {
   padding: 1em;
   .round();
}

.another-button {
   padding:0 .5em;
   .round(10px);
}

CSS:

.button {
   padding: 1em;
   -webkit-border-radius: 5px;
   -moz-border-radius: 5px;
   border-radius: 5px;
}

.another-button {
   padding:0 .5em;   
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
}

 

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

Multiple Parameter Variables

.mybox(@back: @litegold; bordercolor: @gold;) {
   border-style: solid;
   border-width: 5px 1px;
   border-color: @bordercolor;  
   background: @back; 
   padding: .5em;
   margin: .5em;
}

In use:

div.callout {
   .mybox();
}

div.blue-callout {
   .mybox ( @liteblue, @blue );
}

CSS:

div.callout {
   border-style: solid;
   border-width: 5px 1px;
   border-color: #F8AA46;
   background: #f8bf76;
   padding: .5em;
   margin: .5em;
}

div.blue-callout{
   border-style: solid;
   border-width: 5px 1px;
   border-color: #3589EE;  
   background: #78b3fa;
   padding: .5em;
   margin: .5em;
}

 

@arguments Magic

.grey-border( @width: 1px, @type: solid, @color: #ddd; ) {

   border:@arguments;

}

Use:

.mybox {

   .grey-border();

   background: #f1f1f1;

}

CSS:

.mybox {

   border: 1px solid #ddd;

   background: #f1f1f1;

}

 

Importing

@import url("//fonts.googleapis.com/css?family=Ubuntu");


@import url('anotherstyle.css');

 

Keep your style sheets together

Operations

.square ( @size: 3em; ) {

   width: @size;

   height: @size;

   padding: @size * .1;

}

 

CSS:

.square {

   width: 3em;

   height: 3em;

   padding: .3em;

}

 

Text Variables

@url: "http://mycompany.com/assets/";

body {

   background-image: url("@{url}/sprite.png");

}

 

Output:

body {

   background-image: url("http://mycompany.com/assets/sprite.png");

}

 

Nesting

a {

   color: @linkcolor;

   text-decoration:none;

   &:hover, &:focus {

      color: darken(@linkcolor, 10%);

      text-decoration: underline;

   }

   &:visited {

      color: @visited-color;
   }

}

 

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