Absolutely all experienced typesetters 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 quiet horror for a beginner - this is already too much like programming! In fact, you can figure out all the features of CSS preprocessors in about a day, and if you try, then in a couple of hours. In the future, they will greatly simplify your life.
How CSS preprocessors came about
To better understand the features of this technology, briefly dive into the history of the development of visual presentation of web pages.
When the mass use of the Internet had just begun, no style sheets existed. Paperwork 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 a page separately from an HTML document. The idea appealed to representatives of the W3C consortium, who immediately set about finalizing it. A few years later, the first version of the CSS specification came out. Then it was constantly improved, refined ... But the concept remained the same: each style was given certain properties.
Using CSS tables always caused certain problems. For example, coders often had difficulty sorting and grouping properties, and inheritance is not so simple.
And then came the two thousandth. Professional front-end developers, for whom flexible and dynamic work with styles was important, began to deal with markup more and more often. The CSS that existed at that time required the placement of prefixes and tracking support for new browser features. Then the JavaScript and Ruby experts got down to business by creating preprocessors - add-ons for CSS, adding new features to it.
CSS for beginners: preprocessor features
They perform several functions:
- unify browser prefixes and hacks;
- make it possible to work with nested selectors without errors;
- Improve the styling logic.
In short: the preprocessor adds programming logic to CSS capabilities. Now stylization is performed not by the usual enumeration of styles, but with the help of several simple tricks and approaches: variables, functions, mixins, loops, conditions. In addition, the opportunity to use mathematics.
Seeing the popularity of such add-ons, the W3C began to gradually add features from them to 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 mixins. However, this will happen in the distant future, and the preprocessors are already here and are already working fine.
Popular CSS preprocessors. Sass
Designed in 2007. Originally a component of Haml, the HTML template engine. The new CSS element management features have appealed to Ruby on Rails developers who have begun to distribute it everywhere. Sass has a huge number of features that are now included in any preprocessor: variables, nesting selectors, mixins (then, however, you could not add arguments to them).
Declaring Variables in Sass
Variables are declared using the $ sign. You can save properties and their sets in them, for example: “$ borderSolid: 1px solid red;”. In this example, we declared a variable called borderSolid and saved the value 1px solid red in it. Now, if in CSS we need to create a red border with a width of 1px, it simply indicates this variable after the property name. After the declaration, variables cannot be changed. Several built-in functions are available. For example, declare the variable $ redColor with the value # FF5050. Now in the CSS code, in the properties of some element, we use it to set the font color: p {color: $ redColor; }. Want to experiment with color? Use the darken or lighten functions. This is done like this: p {color: darken ($ redColor, 20%); }. As a result, redColor will become 20% lighter.
Sass has many built-in features. We recommend that you at least familiarize yourself with them, but rather, learn them.
Nesting
Previously, long and uncomfortable constructions had to be used to indicate nesting. Imagine that we have a div in which p lies, and in it, in turn, lies a span. For the div, we need to set the font color to red, for p to yellow, for span to pink. In regular CSS, this would be done as follows:
div {
color: red;
}
div p {
color: yellow;
}
div p span {
color: pink;
}
Using the CSS preprocessor, everything is made simpler and more compact:
div {
color: red;
p {
color: yellow;
.span {
color: pink;
}
}
}
Elements are literally "nested" one into another.
Preprocessor directives
Using the @import directive, you can import files. For example, we have a fonts.sass file that declares styles for fonts. We include it in the main style.sass file: @import 'fonts'. Done! Instead of one large file with styles, we have several that can be used for quick and easy access to the required properties.
Mixins
One of the most interesting ideas. Allows you to specify a whole set of properties in one line. They 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. It turns out the following construction: h1 {@include: largeFont; }
All properties from the mixin will be assigned to the h1 element.
Less preprocessor
Sass syntax is reminiscent of programming. If you're looking for an option that is more suitable for CSS beginners, look at Less. It was created in 2009. The main feature is support for native CSS syntax, so it will be easier for developers who are new to programming to learn it.
Variables are declared using 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; }. You do not need to use preprocessor directives to connect - 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 who presented the world with 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' is 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 as soon as you plunge into it, everything becomes much more clear. However, remember that long development with this preprocessor can wean you from using the classic CSS syntax. This sometimes causes problems when you need to work with "clean" styles.
Which preprocessor to choose?
Actually it ... doesn’t matter. All options provide approximately the same capabilities, just the syntax of each is different. We recommend proceeding as follows:
- if you are a programmer and want to work with styles as with code, use Sass;
- if you are a typesetter and want to work with styles as with regular typesetting, pay attention to Less;
- if you like minimalism, use Stylus.
A huge number of interesting libraries are available for all options, which can simplify development even further. Sass users 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. Work with grids is simplified. There are utilities for working with colors, sprites. A number of already announced mixins are available. Give this tool a couple of days - thereby you will save a lot of effort and time in the future.