Simplifying CSS using – {Less}

View Github Repository Open presentation in a new window

jigarjain

See all presentation from jigarjain

Simplifying CSS using – {Less}

0 0

less-intro

A small presentation on introduction of LESS preprocessor

On Github jigarjain / less-intro

Simplifying CSS using

{Less}

What is CSS?

No brownie points for answering it

CSS Sucks*

I can't even centralize things. I find it not readable at all Could have finished this project in 1/10 the time with tables than it took with CSS I'll use CSS for my fonts and colors, but I'm going back to tables for layout, TYVM *Not true
Me, Everyday

REAL CSS Problems

Huge Files (Facebook had around 2MB of CSS) Sphagetti Code Not Dynamic or Programmable It's CSS

#1 - Huge File(s)

Suresh: I will break down the CSS into multiple files & include them in HTML.

Ramesh: Loading multiple files will increase page load time.

Suresh: Oops!

#2 - Sphagetti Code

Suresh: I changed color of this text but it is getting overriden.

Ramesh: Dude! Don't ask me. I worked on that long back.

Suresh: Huh?

#3 - Not Dynamic

Suresh: Can I change this anchor text color all over the site by making only 1 change?

Ramesh: You must be dreaming.

Suresh: I wish it was possible :(

#4 - It's CSS

Suresh: We have got the design. Lets start working with CSS.

Ramesh: You mad bro? I am just doing backend. You do styling.

Suresh: Ok :/

Write CSS the way you write programs

- Jigar Jain

Preprocessors

  • Modularization
  • Variables
  • Functions
  • Nesting
  • Don't Repeat Yourself (DRY)

Bringing CSS closer to programming since 2007

Our Hero: {Less}

  • is one of the popular CSS preprocessors
  • extends dynamic behaviour to CSS
  • helps in writing modular code
  • is superset of CSS & hence very easy to use
  • needs to be preprocessed on server or client side

@variables

#1 - Variables

What we have got

#1 - Variables

What we want

#1 - Variables

What we can do

.mixin()

#2 - Mixins

What we have

#2 - Mixins

What we want

#2 - Mixins

What we can do

func()

#3 - Inbuilt Functions

Color manipulation functions

#3 - Inbuilt Functions

Color manipulation functions

#3 - Inbuilt Functions

Mathematical functions

#3 - Inbuilt Functions

Mathematical functions

{nesting}

#4 - Nesting

1 level Nesting

#4 - Nesting

1 level Nesting

#4 - Nesting

2 level Nesting

#4 - Nesting

2 level Nesting

n-level nesting?

Houston, we have a problem here

@import()

#5 - Importing files

Bring it all together

Who maintains so many files?

Your friend Bootstrap does. And many many others do it too.

How do I compile LESS?

Browsers don't understand .less files

  • Server: Compilers available in many languages (recommended)
  • Client: Including a single js less compiler file

Oops! I didn't pay attention

Less is a CSS preprocessor It adds dynamicity & makes working with CSS fun It uses variables, mixins, functions, nestings & imports It will make your CSS DRY It will help you write modular & maintainable code It is very easy to learn It might make you love CSS ;)

Jigar Jain

Web Artisan

  • Mumbai guy living in Bangalore
  • Working with cool people at Grallo
  • Loves to build beautiful web apps
  • Receives emails on jjain91@gmail.com
  • Identified as @ragiJ on twitter
  • Does not have business card

Psst! We are hiring at Grallo

Thank You :)