Starting with CSS Preprocessor - Blogs
X
16Jan

Starting with CSS Preprocessor

In this article we learn about,

 1.What is CSS Preprocessor?

 2.Installations

 3.How to useVariables?

 4.Preprocessor Based Popular CSS Frameworks

 5.What is Crunch?

 6.How to use math function in LESS?

 7.How to use arithmetic in LESS?

 8.Mixins

 9.Benefits of CSS preprocessor

10.What is next?

 

1.What is CSS preprocessor?

CSS preprocessor is nothing but which is a scripting language that extends CSS and gets compiled into regular CSS syntax.

Popular CSS preprocessors

1. Sass (http://sass-lang.com/)

2. LESS (http://lesscss.org/)

3.Stylus (http://learnboost.github.io/stylus/)

In these preprocessor particularly, Sass and LESS progress with rapid speed and cool features.

2.Installations

Sass (Syntactically Awesome StyleSheets)

Sass logo

If you’re using Windows, you may need to install Ruby first. In command line just use,

 gem install sass 

 

To run Sass from the command line, just use

 

 sass input.scss output.css 

 

You can also tell Sass to watch the file and update the CSS every time the Sass files changes:

 

 sass --watch input.scss:output.css 

 

LESS

less logo

1.Go get yourself a copy of less.js;

2.Create a file to put your styles in, like style.less,  or else //cdnjs.cloudflare.com/ajax/libs/less.js/1.6.0/less.min.js

Add the following code to your HTML’s

:

 
(Or)

 

3.How to useVariables?

Variables can be declared and used throughout the stylesheet.      

Sass

Sass variables are prepended with the $ symbol and the value and name are separated with a semicolon, just like a CSS property.

Ex:

$color: red;
$width: 960px;
$borderStyle: dotted;
body {
  color: $color;
  border: 1px $borderStyle $color;
  max-width: $width;
}

 

LESS

LESS variables are similarly as Sass variables, In the variable names instead of $ symbol prepended with the @ symbol.

 

@color: #0982c1;
@width: 1024px;
@borderStyle: dotted;
body {
  color: @color;
  border: 1px @borderStyle @color;
  max-width: @width;
}

 

4.Preprocessor Based Popular CSS Frameworks

Foundation: Sass based CSS framework (http://foundation.zurb.com/)

Bootstrap: LESS based CSS framework (http://getbootstrap.com/)

 

5.What is Crunch?

Crunch is GUI based less to css compiler.  In this article Let we see how to write LESS based css with Crunch .

Just go Crunch website , download and install crunch editor. 

 

crunch

In Crunch editor  we  can create our less file, then click Crunch file button to convert  less file to css file. 

 

crunch

 

Once generated css file in that we can see less variables replaced by the correspoding values. Following figure depicts this process. In that css fille look like as  ordinary css file. 

 

crunch

Perhaps If we need minified file of css file just click setting icon in Crunch editor and then checked Minify Crunched Css check box. Now again click the Crunch button  Vow!!! we can get minified css.

crunch

 

6.How to use math function in LESS?

 

@calwidth : floor(@containerwidth/2);  

 

Here we applied floor math function to  @calwidth variable and dived by 2. 

Ex:

math.less
 
//variable declaration
@color: #0982c1;
@containerwidth: 1000px;
@calwidth : floor(@containerwidth/2);
@borderStyle: dotted;
body {
  color: @color;
  border: 1px @borderStyle @color;
  max-width: @calwidth;
}
 
math.css
 
body {
  color: #0982c1;
  border: 1px dotted #0982c1;
  max-width: 500px;
}
 
 
minified-math.css
 
body{color:#0982c1;border:1px dotted #0982c1;max-width:500px;}

 

LESS has the ablity to execute math function in the above example  'test.less' file execute 'floor' math function and generated calculated  'max-width' in  test.css file .

 

7.How to use arithmetic in LESS?

 Next , we see Arithmetic  (+, -, *, /) operation,

Ex:

margin.less
 
//variable declaration
@margin:20px;
 
.margin-top{
        margin-top:@margin + 5;
        margin-left:@margin / 5;
        margin-right:@margin / 5;
        margin-right:@margin * 2 !important;
        margin-bottom:@margin*(2+2);
 } 
 
margin.css
 
.margin-top {
  margin-top: 25px;
  margin-left: 4px;
  margin-right: 4px;
  margin-right: 40px !important;
  margin-bottom: 80px;
}
 
 
minified-margin.css
 
.margin-top{margin-top:25px;margin-left:4px;margin-right:4px;margin-right:40px !important;margin-bottom:80px;}
 
8.Mixins
 
Mixins used bunch of CSS instruction in handy and reusable way, In that we can to pass parameters to manipulate operations.
 
mixins-1.less
 
.RoundBorders (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}
 
.header{
    .RoundBorders();
}
 
.footer{
    .RoundBorders(10px);
}
 
 
mixins-1.css
 
.header {
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.footer {
  border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}
 
 
Mixins has special @arguments which is help us to print the all passed parameters
 
mixins-arguments.less
 
.BoxShadow(@x: 0, @y: 0, @blur: 5px, @color: #222) {
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
  box-shadow: @arguments;
}
 
.myShadow{
        .BoxShadow(3px, 7px);
}
 
mixins-arguments.css
 
.myShadow {
  -moz-box-shadow: 3px 7px 5px #222222;
  -webkit-box-shadow: 3px 7px 5px #222222;
  box-shadow: 3px 7px 5px #222222;
}
 
 

9.Benefits of CSS preprocessor

1. Cleaner code with reusable  pieces

DRY -> Don’t Repeat Yourself, is a principle to reduce or try to avoid repetition in software engineering. Using CSS preprocessor we can write modular and reuseable code.

2. More flexibility to do things on  the fly

Easy to compress and remove comments in source code of CSS file, fun with conditional statements, loops and mathematical operations.

3.Sharable snippets and libraries

Once our team builds our own preprocessor we would share that with other people in web community. Additionally we can get more scalable and optimize third party libraries.

 

10.What is next?

Except Crunch, some of other GUI Tools also available to compile less to css, such as Mixture, SimpLESS, CodeKit. You may go through those tools. 

 

Related

How to Sync On-premise AD with Windows Azure AD using Azure AD Connect tool

 Azure AD is a service that provides identity and access management capabilities in the cloud. ...

Read More >

Time to Rock. Time for Our TechEd 2012 Rockstar.

Our Senior ALM specialist Sanjeev Kumar was awarded TechEd Rockstar in the Microsoft TechEd (March 2...

Read More >

Webinar - The process of version migration from older versions of Navision to NAV 2013 R2

The process of version migration from older versions of Navision to NAV 2013 R2 Effectively planning...

Read More >

Google Analytics

Google Analytics is a service offered by Google that generates detailed statistics ab...

Read More >

Openbravo Services

We are happy to announce our newly acquired partnership with Openbravo, Spain. Openbravo is the prov...

Read More >

How to Install TestNG framework (Step by Step installation process)

Steps to Install Eclipse using install new Software:Step 1: In Eclipse, on top menu bar, Under Help ...

Read More >

Microsoft Azure : Mobile Services - HTML with JavaScript

 OverviewWe will add cloud-based backend service to HTML app using Azure Mobile Services. We wi...

Read More >

Identifying Web Elements using Selenium Webdriver

What is Web Element?             &n...

Read More >

Bugzilla to TFS Migrator (Part 2 of 4) – Installation

This is the second part of the Bugzilla to TFS Migrator blog series covering the installation of the...

Read More >

Share

Try DevOpSmartBoard Ultimate complete Azure DevOps End-to end reporting tool

Sign Up

  • Recent
  • Popular
  • Tag
Tags
Monthly Archive
Subscribe
Name

Text/HTML
Contact Us
  • *
  • *