Tag: less

Categories
Web Server

How to use Functions & Operations in LESS CSS

Functions and Operations is the most important feature of LEES CSS. In Operations you can do add, subtract, divide and multiply with the  property values and colors, and giving you the full access to build a complex relationships between properties.And Functions map is designed by one-to-one with JavaScript code. I am going to show you an example of Functions and Operations in LESS CSS.

Example of Function and Operation in LESS:

@the-border: 1px;
@base-color: #111;
@red:        #842210;

#header {
  color: (@base-color * 3);
  border-left: @the-border;
  border-right: (@the-border * 2);
}
#footer {
  color: (@base-color + #003300);
  border-color: desaturate(@red, 10%);
}

When this code will be compiled then you will get this code.

Function and Operation Code after Compiled:

#header {
  color: #333333;
  border-left: 1px;
  border-right: 2px;
}
#footer {
  color: #114411;
  border-color: #7d2717;
}

This is the simple usage of Functions and Operation.

Categories
Web Design

How to use Nested in LESS CSS

LESS best feature is its support for “Nested Rules”.Where in normal CSS you need to make CSS rules with long selectors but in the LESS CSS you can simply nest selectors inside other selectors.This create inheritance and make style sheet  shorter.

Example of Nest Code:

.header{
  width:960px;
  height:auto;
  font-family:arial;
  font-size:14px;
  color:#333;
  .logo{
    float:left;
    text-align:left;
    .span{
      color:#C00;
      font-size:11px;
    }
  }
}

when this code is compiled then the code will see like that.

After the Compiled of Nest Code:

.header {
  width: 960px;
  height: auto;
  font-family: arial;
  font-size: 14px;
  color: #333;
}
.header .logo {
  float: left;
  text-align: left;
}
.header .logo .span {
  color: #C00;
  font-size: 11px;
}

This is really good feature of LESS CSS. This make our code inheritance and shorter our coding.

Categories
Web Design

How to use Mixins in LESS CSS

Mixins allowed you to embed the whole properties of a class/id into another class/id just simply include the class/id name. It works like a variable but whole class/id properties. Mixins can behave like a function, it’s take arguments. lets see example

Example of Mixins :

.radius-corners(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}
.header{
  background-color: green;
  width: 500px;
  height: 100px;
  .radius-corners   /*Including the radius-corners class*/
}

Mixins with Argument :

.radius-corners(@radius: 5px) {
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
  -ms-border-radius: @radius;
  -o-border-radius: @radius;
  border-radius: @radius;
}
.header{
  background-color: green;
  width: 500px;
  height: 100px;
  .radius-corners(20px);   /*Including the radius-corners class and passing parameter */
}

This is really easy to use and very much effective for working flow.

Categories
Web Design

How to use Variables in LESS CSS

LESS (dynamic stylesheet Language) allowed declare variable and use it when we need. We have to follow some rules to declare and use variable. I am gonna show you how to declare and use variable for LESS.

How to declare Variable :

Variable start with at-sign (@), so you have to write (@) as a first character of your variable name and use colon (:) to assign the value of that variable. Like:

/*Creating a variable. Variable name color*/
@color : #C00;

How to use variable :

 It is pretty easy to use those variable. just create a clsss/id. write a css properties (e.g color) and use @color variable as a value of that properties. like

.text{
  color: @color  /*Use Color variable*/
}

so the color of the text class will be (#C00). This is the simple use of variable. Actually when this code is compiled then then value of the color properties (#C00). I am showing you another example.

LESS CSS Code:

@text-color: #CCC;
@layout: 910px;

#header{
  width : @layout; 
  color: @text-color;
}

When this code will be compiled it become….

#header {
  width: 910px;
  color: #cccccc;
}

So you see how to declare and use variable. hope you guys are enjoy it.

 

 

Categories
Web Design

How to start LESS CSS

Less is dynamic stylesheet Language. Less is CSS preprocessors which represent an awesome way to extends CSS with dynamic behavior like variables, mixins, operations and functions. Less can run both server (Client-side Server and Server-side Server). In this tutorial I am gonna show you how to configure LEES in Client-side Server.

LESS Configuration for Client-side Server:

It’s is very easy to configure LESS in local/ Client-side server. Link your “.less" stylesheets with the rel set to “stylesheet/less”:

<link rel="stylesheet/less" type="text/css" href="styles.less" />

Then Download the latest less.js from lesscss.org and include the js file into your <head> section of your page. Like:

<script src="less.js" type="text/javascript"></script>

NB: Make sure you have included stylesheets before the Script.

All have done, now I show you a simple example.

index.php

<!DOCTYPE html>
<html>
<head lang="en">
    <title>LESS Practice</title>
    <link rel="stylesheet/less" type="text/css" href="styles.less" />
    <script src="less.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/jquery-1.9.1.min.js" type="text/javascript"></script>
</head>
<body>
<h2 class="h2">Hello World</h2>
</body
</html>

styles.less

@color : red;
.h2{
  color: @color
}

Copy this code and paste in into your editor and then see the output.