LESSCSS preprocessorTodd SheltonTwitter: @tweenoutGitHub: TShelton41Meetup: Dev Workshop Indy

WHAT IS A PRE-PROCESSOR• Three major types: LESS, SaSS, Stylus

• It compiles the code we write in a processed language, LESS, SaSS, Stylus

• Outputs the code to pure CSS

• Lets you create an OO CSS structure

• All need a tool to compile the language to CSS

What are the advantages• They are browser compatible

• They help make your applications more modular and scalable by using variables and other CSS properties.

• They allow us to do nesting, custom functions, math, error checking

• Con: Takes just a little more setup than normal.

• Now lets talk about LESS

LESS - history• Alexis Sellier is the original designer of the language

• LESS is built on JavaScript (was built on Ruby at first)

• LESS was designed to be as close to CSS as possible so that valid CSS code is valid LESS Code

• LESS can compile real-time using LESS.js

• LESS has extensions but they are designed independentl A more popular one is LESSHat

LESS – tools needed• LESS can be compiled using JavaScript

• The ending file extension is .less

• You need a compiling tool

• Easier tools are out there. CodeKit(Mac), WinLess(Win), SimpLess(both). This is just a few

• Create a less and css directory in your root folder. Then let the tools compile your .less files into css code

LESS - setup• We need to use just one style.less file and import all less files.

This will generate a css file named style.css

• Make sure that your compiler is pointing to your CSS folder.

• Order of importing files is very important

• Once you import all your less files you are ready to start coding. Just remember that anytime you create a new less file. You will need to import it. Try to make a less file for every part of your site. OOCSS!

• Note: I have had trouble with SimpLess importing blank less files.

@import “variables.less

LESS - language• Less is written very similar to normal CSS

• Making a variable is very easy as well

LESS uses the @ to determine a variable or import.

p { color: #fff;}

@myFontColor: #ffffff;

@myWidth: 960px;

LESS - language• Using the variables. (make sure you have imported your variables.less file first)

• Using Mixins (basically your custom function)

p { color: @myFontColor;}

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

button { .rounded(10px);}

LESS - language• Nesting

• CSS

a { color: @myFontColor; &:hover {

color: @myHoverColor; }}

a { color: @myFontColor;}a:hover { color: @myHoverColor;}

LESS - language• Using Operators

• Another usage

@myNumber: 2px;

.class { width: @myNumber * 2// 4px}

@myNumber: 2px;

.class { width: ((@myNumber +3) * 2)// 10 px}

LESS - language• LESS Functions

• Another usage

@themeNavColor: #bc332d;

.class { background-color: saturate(@themeNavColor, 10%);}

@themeNavColor: #bc332d;

.class { background-color: fadeout(@themeNavColor, 10%);}

LESS - language• Namespaces

#buttonBundle{ .button () { display: inline-block; background-color: grey; &:hover { background-color: white } }}

#nav a { #buttonBundle > .button;}