LESS CSS preprocessor and Ruby on Rails integration

LESS is a new preprocessor for CSS. Simply put, LESS allows you to use variables, operators, classes, and nested constructs in your CSS file. In this article, you will learn about the main features of LESS and how to quickly connect it to the popular Ruby on Rails 3 framework.



If you have even the slightest relation to web development, then of course you are familiar with CSS - cascading style sheets. The CSS description language is extremely simple, it is a set of rules, in turn, each rule consists of one or more selectors, separated by commas, and a block of definitions. The definition block is enclosed in curly braces and consists of a set of properties and their values.
')
Such a simple CSS structure makes it available for beginners, but at the same time imposes some limitations. For example, it is impossible to use variables, and therefore sections of duplicate code are inevitable. That contradicts the principles of DRY (Don't Repeat Yourself - literally, "do not repeat yourself").

What is the LESS CSS preprocessor and how will it allow us to bypass the imperfections of the classic CSS code? LESS extends the basic features of CSS - allows you to use variables and calculations, adds some OOP principles, and allows you to make the structure of CSS rules more clear.

How it works?

Instead of a css-file with style sheets, we work with a less-file. Those. leave "styles.css" aside and create / open "styles.less", which by default should be in the same folder as your css-files. You do not need to change anything in an HTML document.

Before the web server gives the visitor "styles.css" to the visitor who came to the site - LESS will replace it with a compiled from "styles.less" - and the user will receive a standard CSS style sheet written according to all the rules.

Installation for Ruby on Rails 3

The LESS compiler is available for integration into such types of projects as Ruby on Rails , PHP , .NET , OS X application . There is also a version written in JS . We will consider only installation under Ruby on Rails 3. It is extremely simple. First install ruby-gems:

gem install less

Then the plugin under the rails:

rails plugin install git: //github.com/cloudhead/more.git

If your css-files are not stored in the default folder "public / stylesheets /" - then write your paths in "config / environment.rb", for me it looks like this:

Less :: More.source_path = "public / css"
Less :: More.destination_path = "css"

That's basically it.

Variables

Using variables will allow you to dramatically simplify development. For example, in the case of working with colors:

@ light-background-color: # cfdae1;

#menu a: hover {color: @ light-background-color; }
#footer {background: @ light-background-color; }

Operators

You can perform any arithmetic operations on variables in LESS, for example:

@ base-margin: 25px;
#header {margin-top: @ base-margin + 10px; }

Or even quickly change the shades of colors:

@ light-background-color: # cfdae1;
@ dark-background-color: @ light-background-color - # 333;

Classes

For example, we can define a class "rounded-corners" that will be responsible for rounding the corners:

.rounded-corners ( radius ) {
-webkit-border-radius: radius ;
-moz-border-radius: radius ;
border-radius: radius ;
}

And use it inside any selector:

# login-box {
.rounded-corners (5px);
}

Structure

Standard code describing, for example, the site menu in CSS may look like this:

#header {}
#header #nav {}
#header #nav ul {}
#header #nav ul li {}
#header #nav ul li a {}

LESS allows you to place the rules within other rules, so you can rewrite the above code snippet more beautifully and logically:

#header {
#nav {
ul {
li {
a {}
}
}
}
}

And this is how you can describe the standard link styles:

a {
&: hover {}
&: active {}
&: visited {}
}

Finishing touches

You can connect others to the main less-file with the "import" function:

import 'typography';
import 'print';

And make comments in the code after a couple of slashes:

#end {}
// Thanks for attention
// I hope you are interested in the topic

We are grateful to the Vembo Handbook for assistance in writing this article.