CSS preprocessor: overview, choice, application

Absolutely, all experienced layout designers use preprocessors. There are no exceptions. If you want to succeed in this activity, do not forget about these programs. At first glance, they can cause a beginner quiet horror - it's too much like programming! In fact, you can understand all the capabilities of the CSS preprocessors in about a day, and if you try, then for a couple of hours. In the future, they will significantly simplify your life.

How CSS preprocessors appeared

To better understand the features of this technology, briefly immerse ourselves in the history of the development of visual representation of web pages.

When the mass Internet application was just beginning, there were no style sheets. The design of documents depended solely on browsers. Each of them had its own styles, which were used to process certain tags. Accordingly, the pages looked different depending on which browser you opened them in. The result is chaos, confusion, problems for developers.

In 1994, the Norwegian scientist Haakon Lee developed a style sheet that could be used to design the appearance of the page separately from the HTML document. The idea was invited to representatives of the W3C consortium, who immediately began to work on it. A few years later, the first version of the CSS specification was published. Then it was constantly improved, improved ... But the concept remained the same: each style is given certain properties.

The use of CSS tables has always caused some problems. For example, coder often had difficulty sorting and grouping properties, and inheritance is not so simple.

And then came the two thousandth. The professional front-line developers began to make markup more often, for which flexible and dynamic work with styles was important. The CSS that existed at the time required prefixing and tracking support for new browser features. Then the JavaScript and Ruby experts got down to business, creating preprocessors - add-ons for CSS, adding new features to it.

CSS for beginners: features of preprocessors

They perform several functions:

• Unify browser prefixes and hacks;

• Simplify the syntax;

• Allow working with nested selectors without errors;

• Improve the logic of styling.

In short: the preprocessor adds programming logic to CSS capabilities. Now styling is performed not by the usual enumeration of styles, but with the help of several simple tricks and approaches: variables, functions, myxins, cycles, conditions. In addition, it became possible to use mathematics.

Seeing the popularity of such add-ins, the W3C began to gradually add capabilities from them to the CSS code. For example, the calc () function appeared in the specification, which is supported by many browsers. It is expected that soon it will be possible to set variables and create myxins. However, this will happen in the distant future, and preprocessors are already here and are already working perfectly.

Popular CSS preprocessors. Sass

It was developed in 2007. It was originally a component of Haml, the HTML template engine. New features for managing CSS elements have come to the taste of developers on Ruby on Rails, which began to spread it everywhere. In Sass appeared a huge number of opportunities that are now included in any preprocessor: variables, embedding selectors, mixins (then, however, you could not add arguments to them).

Declaring variables in Sass

Variables are declared using the $ sign. In them, you can save properties and their sets, for example: "$ borderSolid: 1px solid red;". In this example, we declared a variable called borderSolid and stored the value 1px solid red in it. Now, if in CSS we need to create a red border with a width of 1px, simply specifies this variable after the name of the property. After the declaration, the variables can not be changed. Several built-in functions are available. For example, declare a variable $ redColor with the value # FF5050. Now, in the CSS, in the properties of an element, we use it to set the font color: p {color: $ redColor; }. Would you like to experiment with color? Use the functions darken or lighten. This is done like this: p {color: darken ($ redColor, 20%); }. As a result, the color of redColor will be 20% lighter.

Sass has many built-in functions. We recommend that you at least get acquainted with them, and better - learn.

Nesting

Previously, to denote nesting, we had to use long and inconvenient designs. Imagine that we have a div in which p lies, and in it, in turn, is span. For div, we need to set the font color to red, for p-yellow, for span-pink. In ordinary CSS, this would be done like this:

Div {

Color: red;

}

Div p {

Color: yellow;

}

Div p span {

Color: pink;

}

With the CSS preprocessor, everything is made easier and more compact:

Div {

Color: red;

P {

Color: yellow;

.span {

Color: pink;

}

}

}

Elements are literally "put" one into another.

Preprocessor directives

With the @import directive, you can import files. For example, we have a file called fonts.sass, in which styles for fonts are declared. We connect it to the main style.sass file: @import 'fonts'. Done! Instead of one large file with styles, we have several that you can use to quickly and easily access the required properties.

Mixins

One of the most interesting zadumok. It allows one set of properties to be specified in one line. Work as follows:

@mixin largeFont {

Font-family: 'Times New Roman';

Font-size: 64px;

Line-height: 80px;

Font-weight: bold;

}

To apply a mixin to an element on a page, use the @include directive. For example, we want to apply it to the h1 header. The following construction is obtained: h1 {@include: largeFont; }

All properties from the mixin will be assigned to the element h1.

Less Preprocessor

The Sass syntax is reminiscent of programming. If you are looking for an option that is more suitable for students learning CSS for beginners, look at Less. It was established in 2009. The main feature is the support of the native CSS syntax, so it's easier to learn it with strangers who are not familiar with the programming of the coder.

Variables are declared with the @ symbol. For example: @fontSize: 14px ;. Nesting works on the same principles as in Sass. Mixins are declared as follows: .largeFont () {font-family: 'Times New Roman'; Font-size: 64px; Line-height: 80px; Font-weight: bold; }. For connection, you do not need to use preprocessor directives - just add a freshly created mixin to the properties of the selected element. For example: h1 {.largeFont; }.

Stylus

Another preprocessor. Created in 2011 by the same author that gave the world Jade, Express and other useful products.

Variables can be declared in two ways - explicitly or implicitly. For example: font = 'Times New Roman'; Is an implicit option. But $ font = 'Times New Roman' - explicit. Mixins are declared and connected implicitly. The syntax is: redColor () color red. Now we can add it to the element, for example: h1 redColor () ;.

At first glance, Stylus may seem incomprehensible. Where are the "native" brackets and semicolons? But if you just dive into it, everything becomes much clearer. However, remember that a long development with this preprocessor can "wean" you to use the classic CSS syntax. This sometimes causes problems when you need to work with "clean" styles.

Which preprocessor should I choose?

In fact, it ... does not matter. All options provide approximately the same possibilities, just the syntax of each is different. We recommend that you proceed as follows:

• If you are a programmer and want to work with styles as code, use Sass;
• If you are a layout designer and want to work with styles as with the usual layout, pay attention to Less;
• If you like minimalism, use Stylus.

For all options is available a huge number of interesting libraries that can further simplify the development. Users of Sass are advised to pay attention to Compass - a powerful tool with many built-in features. For example, after installing it, you will never have to worry about vendor prefixes. Simpler work with grids. There are utilities for working with colors, sprites. A number of already declared myxins are available. Give this tool a couple of days - thereby saving you a lot of time and energy in the future.