less mixing

Mixing: With mixing you can include or add  “a bunch of properties” from one rule-set into another rule-set.

For Example:

/* Mixing */
.little-box{
    border:2px solid red;
    border-radius:5px;
    font-size:16px;
    margin-bottom:5px;
    padding:5px;
}
.big-box{
    .little-box;
    font-size:32px;
}

Output:

********  PARAMETERS IN MIXINS: **************

Another cool thing mixins can do is receive parameters. In the following example we add an argument for the width and height of our circles, with a default value of 25 pixels.

/* Mixing */
.circle(@size:25px){
    border: 2px solid red;
    border-radius: 100%;
    height: @size;
    width: @size;
    margin: 10px;
    float: left;
}
.small-circle{
   .circle; 
}
.big-circle{
    .circle(50px);
}
Advertisements

Less Variable

Variables:
One of the main features of Less is the ability to create variables just like you would in a standard programming language. They can store any type of value like: colors, dimensions, selectors, font names, URLs and so on. The philosophy of less is to reuse the CSS syntax where possible.

Lets define two variables, one for background color and one for text color, both containing hexadecimal codes.

Variables in LESS begin with the @ sign.


Less Variables

A variable is the container or holder that store the value.
You can use this container name to access the value of the container.

Syntax:
@variableName:value;

Examples:
@primaryColor: blue;
@text-color: orange;

: is working here as assignment

Note: Remember proper naming conventions for variable name.
@blue: blue;
This is not proper naming convention because if you change the value to green. It will not make the sense;

Example:1

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Less Basic</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>I love Less </h1>
    </body>
</html>

style.less

@text-color: maroon;
h1{
color: @text-color;
}

Output:

Example:2 You can assign selectors to a variable

index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Less Basic</title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <h1>I love Less </h1>        
        <h3>I like less </h3>        
    </body>
</html>

style.css

@text-color: maroon;
@subheading-text-color: orange;

@heading-selector:h1;
@sub-heading-selector:h3;

@{heading-selector}{
    color: @text-color;
}

@{sub-heading-selector}{
    color: @subheading-text-color;
}

Output:

Also check with following

/* Variable declaration */
@heading-color:red;
@content-color:blue;

h1{
    color:@heading-color;
}
p{
    color: @content-color; 
}

/* assign html selectors to a variable */

@heading-selector:h2;
@{heading-selector}{
    color:orange;
}

/* assign html ID selector to a variable */

@id-selector:my-id;
#@{id-selector}{
    color: green;
}

/* assign html class selector to a variable */
@class-selector:my-class;
.@{class-selector}{
    color:brown;
}

/* store image url in the variable */
@img-url:'images';

div#google{
    background: url('@{img-url}/google.png')no-repeat 0px 0px;
    height: 100px;
    width:240px;
}

/* store properties */
@pl: padding-left;
@mb: margin-bottom;

h1{
    @{pl}:30px;
    @{mb}:60px;
}

/* assign variable to variable */
@ml: margin-left;
@ml-px:300px;
@ml-apply: 'ml-px';
h3{
    margin-left: @@ml-apply;
}

/* No need of curly bracket
when you try to access the value of 
variable that stored another variable  
*/


/* You can define less variable anywhere. It will work */

Understanding less.js file

If you want to compile less file on client side then you have to use less.js file. It is not good practice to compile less file on client side because it will take time on client machine to compile your less file. which will result in website loading time. This article is on understanding use of less.js file.

index.html

<!DOCTYPE html>
<html>
<head>
<title>Less Basic</title>
<link rel="stylesheet/less" href="style.less">
</head>
<body>
<h1>I love Less </h1>
<p>Less is very easy...</p>

< script src = "js/less.min.js"></script>
</body>
</html>

Bracket editor have cool feature to run index.html file from its IDE. You require bracket editor for this demo.
Download and install bracket editor. Open your bracket editor and add your demo project folder. Click on index.html file and click to live preview button. You will see the output on your browser.

Less Basic Example

Example:
Create a folder named “demo”. Also create files “index.html” and “style.css”
Folder demo -> index.html
Folder demo -> style.less

write html code in index.html file and css code in style.less file

index.html

<!DOCTYPE html>
<html>
<head>
<title>Less Basic</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>I love Less </h1>
<p>Less is very easy...</p>
</body>
</html>

style.less

@headingColor:red; /* variable */
@paragraphColor:orange; /* variable */

h1{
color:@headingColor;
}
p{
color:@paragraphColor;
}

Note: style.css file will dynamically created. You don’t need to create this file. very important in your index.html file you have to give link style.css and not style.less file. Browser can not read less files directly.

Open command prompt and go to your demo folder with command. trigger following command to generate style.css file.

lessc style.less > style.css

Check with your style.css code

h1 {
color: red;
}
p {
color: orange;
}

What is Less ?

What is LESS?
1) Less is css pre-processor.
2) It is a tool that gives some extra features to css.
3) Developer can write dynamic css.
4) LESS is a dynamic style sheet language that extends CSS and, just like SASS, it has dynamic behavior such as variables, mixins, operations and functions.
5) It allows you to write CSS in a simpler way by just using and combining mixins, functions, and so on. LESS also increases readability and organization of CSS using imports, nested rules and comments with .less extension.

** Practical **
On Windows machine – Project setup and requirement
1) Require node js to be installed on machine.
2) Need to install lessc(Less Compiler).
Following is the command for installation of less.
npm install -g less

3) To Check if less is installed or not – use following windows command.
lessc -version

OR

Install winless software tool
WinLess used on Windows it has Graphical User Interface (GUI) for LESS.js. WinLess is very useful and easy to use tool for Web Developers, Web Designers and Front End Developers who use LESS on Windows.

To get started with sing WinLess follow below steps:
Download latest version from official website: http://winless.org/
Install it like common software, no special installation required.
Run after installation

 

 

make text to center inside div

While designing you will need to make text center aligned inside div.

For example: suppose you have a div with class test and span inside the div tag.
middle-aligned-text

CSS code:

.test {
    background: gray none repeat scroll 0 0;
    display: table;
    height: 50px;
    text-align: center;
    width: 50px;
}
.test > span {
    display: table-cell;
    vertical-align: middle;
}