less.js: o cómo usar variable en css

LESS is an amazing little tool that extends CSS with the addition of variables, mixins, operations and nested rules. What this means is that you can write leaner code very quickly. And with the recent rise of complex CSS3 properties, we have a few glaring examples of code that could definitely stand to be simplified a bit.

Today we’ll take a look at how to use the newest JavaScript implementation of LESS to simplify lengthy CSS3 markup. One of the key features we’ll be looking at that I haven’t seen discussed elsewhere is how to deal with multiple variables in mixins. It’s fairly simple but can be confusing if you’ve never tried it.

Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

Anyone Can Use LESS.js

When I first looked at LESS, it seemed like an awful lot of work. There were all these weird compiling steps and Ruby scripts that ultimately felt like they were going to add time to my workflow instead of reduce it.

Fortunately, someone realized the whole process could be a lot simpler with JavaScript. So now implementing LESS is as easy as pasting two lines of code into your HTML and everything compiles automatically right in the browser! Let’s see how this works.

... o cómo pasar de esto:

@tamBase: 62.5%;
@familia: Verdana;
@colorFondo: #383939;
@colorTexto: #fc0;
@colorEnlaces:#fff;
@colorDestacado: #f30;
@boxWidth: 960px;
@boxHeight: @boxWidth *1.5;
@paddingNormal: 1em;
@paddingDoble: 2em;
@paddingMitad: 0.5em;
@borde: 1px solid #444;
@radio: 25px;
@marginBottom:10px;
@marginLeft: auto;
@marginRight: auto;
@what :all;
@tiempo: 1s;
@tipoTrans: ease;
@textoPeq: 1em;
@textoMed: 1.5em;
@textoGran: 2em;


body{
	font: @tamBase @familia;
	background-color: @colorFondo;
}
div{
	padding: @paddingNormal;
	color: @colorTexto;
	width: @boxWidth;
	border: @borde;
	margin-bottom: @marginBottom;
	margin-left:@marginLeft;
	margin-right:@marginRight;
	-moz-border-radius: @radio;
	-webkit-border-radius: @radio;
	border-radius: @radio;
}
div pre {border:none;}
div div {width: @boxWidth / 2; padding:@paddingMitad; text-align:center; color: @colorDestacado;}
a{
	color:@colorEnlaces;
	-webkit-transition: @what @tiempo @tipoTrans;
	-moz-transition: @what @tiempo @tipoTrans;
	-o-transition: @what @tiempo @tipoTrans;
	transition: @what @tiempo @tipoTrans;
}
a:hover {
	font-size: @textoGran;
	color: @colorEnlaces;
}
.roundCorners {
	-webkit-transition: @what @tiempo @tipoTrans;
	-moz-transition: @what @tiempo @tipoTrans;
	-o-transition: @what @tiempo @tipoTrans;
	transition: @what @tiempo @tipoTrans;
}
.roundCorners:hover{
	color:@colorEnlaces;
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-o-transform: scale(2);
	transform: scale(2);
}


#header {
  background-color: black;

  .navigation {
    font-size: 24px;
  }
  .logo {
    width: 300px;
    :hover { text-decoration: none }
  }
}

... a esto:

body {
  font: 62.5% Verdana;
  background-color: #383939;
}
div {
  padding: 1em;
  color: #ffcc00;
  width: 960px;
  border: 1px solid #444444;
  margin-bottom: 10px;
  margin-left: auto;
  margin-right: auto;
  -moz-border-radius: 25px;
  -webkit-border-radius: 25px;
  border-radius: 25px;
}
div pre {
  border: none;
}
div div {
  width: 480px;
  padding: 0.5em;
  text-align: center;
  color: #ff3300;
}
a {
  color: #ffffff;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
a:hover {
  font-size: 2em;
  color: #ffffff;
}
.roundCorners {
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}
.roundCorners:hover {
  color: #ffffff;
  -webkit-transform: scale(2);
  -moz-transform: scale(2);
  -o-transform: scale(2);
  transform: scale(2);
}
#header {
  background-color: black;
}
#header .navigation {
  font-size: 24px;
}
#header .logo {
  width: 300px;
}
#header .logo :hover {
  text-decoration: none;
}

To make sure your LESS code compiles correctly, throw the following code into the head of your HTML.

<link rel="stylesheet/less" href="style.less" type="text/css" />  <script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>

Notice that the typical rel=”stylesheet” has become rel=”stylesheet/less” and that we’ve linked to a Google-hosted version of LESS.js.

The next step is to create a style.less file. This can be named anything you want, just be sure it has the .less extension instead of .css like you’re used to.

Declaring Variables

By far one of my favorite features of LESS is that you can use variables just like you would in most major programming languages. This makes it extremely easy to set global styles that can be changed in a single location rather than sorting through your code to find every instance of that style.

To see how this applies on a practical level, let’s set a couple of color variables. Imagine that our web page will have a primary and a secondary color that is used repeatedly throughout the design. Rather than remembering the color code every time, we can simply set these to variables.

To set a variable in LESS, use the @ symbol:

@primaryColor: #383939;  @secondaryColor: #66bbe3;

That’s it! Now any time we want to use these colors in our design, we simply use the same CSS we always do but insert the variable name instead of the color code.

background-color: @primaryColor;  color: @secondaryColor;

Now anytime we change the color in the variable declaration, the change will be automatically applied throughout the rest of the code anywhere the variable is called. This can definitely save you a lot of time when you start tweaking your designs.

Operations

Just as with JavaScript and any other programming language you’re used to, LESS allows you to perform operations on variables. This can save you a lot of mental math in the long run.

As an oversimplified example, say you wanted to create a box that was twice as wide as it was tall. You could declare the height in a variable and then set another variable that is twice that number.

Design Shack - Web design showcase, CSS tutorials and web standards

About

Using Less.js to Simplify Your CSS3

Anyone Can Use LESS.js

... o cómo pasar de esto:

... a esto:

Declaring Variables

Operations

Operations