CSS preprocessors are an indispensable tool for the modern web developer. How can you do this more efficiently?
Do you have any questions?
The implementation of a designer layout is impossible without the use of HTML and CSS. If the markup language allows us to sketch out a template from the necessary elements, then CSS converts this template to the desired form, as in the source code. It would seem that with the help of pure CSS you can make the page the way the customer wanted it to be.
However, if someone opens your single CSS file and tries to tweak something, are you confident that the code will be readable, editable, structured and understandable? If your project is huge, with many parts, are you sure you can easily support it in the future? If you use a CSS preprocessor, then the answer is yes, and besides, this is a way to automate website layout. Why? We'll find out now.
What is a CSS preprocessor?
In my understanding, this is an add-on to standard CSS that expands the standard capabilities, adds some functions and allows you to write more readable and easy-to-understand code. At the output, the source code is compiled into the CSS we are familiar with. The use of such a tool in modern development is a “must have”, and I advise every layout designer or developer to familiarize themselves with it. It should be added that there is a lot to choose from, because there are quite a lot of CSS preprocessors, but the most popular ones should be highlighted:
- Stylus
All of the above preprocessors have almost identical functionality, there are only slight differences in syntax. Now, let's return to the question raised earlier: what advantages do preprocessors give us in order to make our code more convenient and maintainable? This is, first of all, nesting. This feature gives us the opportunity to structure elements, easily find the parent of an element, quickly write pseudo-classes and pseudo-elements, and even use BEM! Eg:
.track
color: #fff
&__title
padding: 10px
&:hover, &:focus
color: blue
Take a look at this code snippet written in Sass. This all translates into the following CSS:
Track (color: #FFF;)
.track__title ( padding: 10px;)
.track__title:hover, .track-title:focus ( color: blue)
Laconic, convenient, understandable, the structure from parent to child is great, isn’t it? The second, and no less important, advantage is the variables. The principle of their operation is extremely simple: the variable name begins with the $ symbol, and then the name itself. We write the value through a colon - this can be a color in any convenient form, indentation values, width, font size, and so on. As a result, we will get something like this:
$btn-color: blue;
$font-main-size: 16px;
And the usage will look like this:
Block (
font-size: $font-main-size;
}
Just imagine how convenient it is. If you need to change the color of buttons throughout the site, then you only need to do it in one place! Well, let's move on. The third and greatest thing that CSS preprocessors can offer us is the use of mixins. In our usual understanding, mixins are functions that can be used several times without repeating the same parts of the code (remember one of the programming principles - DRY - Don’t repeat yourself). To be honest, I don’t use mixins very often, apparently there was no such urgent need, but I will still show a few examples. One of the functions I use most is as follows:
@function em($pixels, $context: $browser-context) (
@if (unitless($pixels)) (
$pixels: $pixels * 1px;
}
@if (unitless($context)) (
$context: $context * 1px;
}
@return $pixels / $context * 1em;
}
And its application is as follows:
body (
font-size: em(14px);
}
Yes, as you understand, this is just a conversion of the font size from PX to Em (long live the days when for such little things you used to use special services or calculate them yourself on a calculator). The following example also saves a lot of time:
@mixin input-placeholder (
&.placeholder ( @content; )
&:-moz-placeholder ( @content; )
&::-moz-placeholder ( @content; )
&:-ms-input-placeholder ( @content; )
&::-webkit-input-placeholder ( @content; )
}
Its uses:
input, textarea (
@include input-placeholder (
color: $grey;
}
}
There are many more examples that can be given, however, it is worth starting to use mixins yourself to understand how useful this tool is. There is perhaps one more reason that will make you fall in love with CSS preprocessors, and its name is modularity. It's 2018, and modularity is everywhere - from HTML template engines to various CSS frameworks and project builders.
The process of writing HTML and CSS can be a bit overwhelming and require a lot of the same tasks over and over again. Tasks like closing tags in HTML or monotonously looking through hexadecimal color values in CSS.
Such different tasks, as a rule, are small and slightly reduce efficiency. Fortunately, these and several other inefficiencies have been recognized and challenged by preprocessors.
A preprocessor is a program that takes one data type and converts it to another data type. In the case of HTML and CSS, some of the most popular preprocessor languages are Haml and Sass. Haml is converted to HTML and Sass is converted to CSS.
Since their inception, while solving some of the most common problems, Haml and Sass have found many additional ways to extend the capabilities of HTML and CSS. Not only by removing ineffective tasks, but also by creating methods that make website development easier and more logical. Preprocessors have also become popular due to the various frameworks that support them; one of the most popular is Compass.
HamlCodeKit also supports other preprocessors that you may also find useful.
DoctypeThe first part of writing a document in Haml is knowing what type of doctype to use. When working with HTML documents, the main document type will be HTML5. In Haml, document types are defined by three exclamation marks (!!!), followed by something specific if necessary.
The default doctype in Haml is HTML 1.0 Transitional. Therefore, to make it like HTML5, you need to pass the number five after the exclamation marks (!!! 5).
Ready HTML
Declaration of elements
One of the defining features of Haml is its syntax and how to declare and nest elements. HTML elements typically contain an opening and closing tag, but Haml elements only have one opening tag. Elements begin with a percent sign (%) and then indentation determines nesting. Indentation in Haml can be done with one or more spaces, but it is important that the indentation remains the same. Tabs and spaces cannot be combined and the same number of tabs or spaces must be the same throughout the document.
Eliminating the need for opening and closing tags and the required indentation structure creates a layout that is easy to follow. At any time, the markup can be quickly viewed and changed without difficulty.
%body %header %h1 Hello world! %section %p Lorem ipsum dolor sit amet.
Compiled HTML
Hello World!
Lorem ipsum dolor sit amet.
Word processingText in Haml can be placed on the same line as the declared element or indented below the element. Text cannot be both on the same line as the declared element and nested below it; there must be one or the other option. The above example can be rewritten as follows:
%body %header %h1 Hello world! %section %p Lorem ipsum dolor sit amet.
AttributesAttributes, like elements, are declared slightly differently in Haml. Attributes are declared immediately after the element, in curly or parentheses, depending on whether you want to use Ruby or HTML syntax. Ruby style attributes will use standard hash syntax inside(), while HTML style attributes will use standard HTML syntax inside().
%img(:src => "shay.jpg", :alt => "Shay Hou") %img(src: "shay.jpg", alt: "Shay Hou") %img(src="shay.jpg" alt="Shay Hou") !}
Compiled HTML
If desired, classes and identifiers can be declared like other attributes, but they can also be treated slightly differently. Instead of listing the class and id attributes with their values inside parentheses, the value can be specified directly after the element. Using either a dot for classes or a hash for identifier, a value can be added immediately after the element.
Additionally, attributes can be mixed by joining together in an appropriate format. The classes must be separated by dots, and other attributes can be added using one of the previously outlined formats.
%section.feature %section.feature.special %section#hello %section#hello.feature(role="region")
Compiled HTML
Classes and identifiers in
In case a class or identifier is used in , then %div can be omitted and the value of the class or identifier can be included directly. Again, classes should be defined by a dot, and identifiers by a hash.
Awesome.awesome.lesson #getting-started.lesson
Compiled HTML
Boolean attributes
Boolean attributes are treated the same as if they were in Ruby or HTML, depending on the syntax used.
%input(:type => "checkbox", :checked => true) %input(type="checkbox" checked=true) %input(type="checkbox" checked)
Compiled HTML
Escaping text
One of the benefits of Haml is the ability to compute and run Ruby, but this is not always the desired action. Text and lines of code can be escaped using a backslash (\), which allows the text to be displayed explicitly without execution.
In the example below, the first pattern = @author is executed by Ruby, getting the authors name from the application. The second pattern starts with a backslash escaping the text and is printed as is without execution.
Author = @author \= @author
Compiled HTML
Shay Hou = @author
Text Escaping AlternativesAt times, escaping text is not enough and Ruby is needed to generate the desired output. One popular example for this is trying to include a period immediately after a link, but not as part of the link text. Placing a period on a newline is not acceptable because it will be treated as an empty class value, causing a compilation error. Adding a backslash before the period escapes the character, but puts a space between the last word and the period. Again, not producing the desired result.
In these cases, the Ruby helper comes in handy. The example below uses the helper to place a period immediately after the last word, but outside the link text.
%p Shay - = succeed "." do %a(:href => "#") well done
Compiled HTML
Shay - Well done.
CommentsLike elements and attributes, comments are handled slightly differently in Haml. The code can be commented quite simply using a single forward slash (/). Single lines can be commented out by using a forward slash at the beginning of a line, and blocks of code can be commented out by being nested under a slash.
%div / Comment line Current line / %div Commented block
Compiled HTML
Current line
Conditional commentsConditional comments are also handled differently in Haml. To create a conditional comment, use square brackets () around the condition. These square brackets must be placed immediately after the slash.
/ %script(:src => "html5shiv.js")
Compiled HTML
Quiet comments
Haml also provides the ability to create special silent comments. Silent comments differ from basic HTML comments in that, once compiled, any content within a silent comment is completely removed from that page and does not appear in the results. Silent comments begin with a hyphen, followed by a hash (-#). As with other comments, silent comments can be used to remove one or more lines using nesting.
%div -# Deleted line Current line
Compiled HTML
Current line
FiltersHaml offers several filters that allow you to use different types of input within Haml. Filters start with a colon, followed by the name of the filter, for example :markdown, with all the content to filter the attachment below it.
Common filtersBelow are some common filters, including the most popular: css and: javascript.
- :cdata
- :coffee
- :escaped
- :javascript
- :less
- :markdown
- :maruku
- :plain
- :preserve
- :ruby
- :sass
- :scss
- :textile
:javascript $("button").on("click", function(event) ( $("p").hide("slow"); ));
Compiled HTML
$("button").on("click", function(event) ( $("p").hide("slow"); ));
CSS and Sass filters
:css .container ( margin: 0 auto; width: 960px; ) :sass .container margin: 0 auto width: 960px
Compiled HTML
.container ( margin: 0 auto; width: 960px; )
Ruby InterpolationAs mentioned earlier, Haml can evaluate Ruby, and sometimes there may be cases where Ruby must be evaluated within plain text. In this case, Ruby must be interpolated by wrapping the required code in Ruby.
Below is a Ruby example that is interpolated as part of a class name.
%div(:class => "student-#(@student.name)")
Compiled HTML
SCSS and Sass
SCSS and Sass are preprocessing languages that compile to CSS. They're a bit like Haml and make writing code easier while offering very few controls. Individually, SCSS and Sass have the same origins, but technically they have different syntax.
For the sake of brevity, Haml and Sass were the only preprocessors covered in this tutorial. They were also chosen because they are built using Ruby and fit directly into Ruby on Rails applications. They also received tremendous support from the community.
When it comes to choosing which preprocessor to use, it's important to consider what's best for your team and project. Projects built in Node.js can probably benefit more from Jade and Stylus. The most important aspect to consider, however, is what your team is used to using. Do your research for each project and choose the most informed solution.
Resources and links- Haml - HTML Abstraction Markup Language
- Sass - Syntactically Awesome Stylesheets
- Sass Playground on SassMeister
And when will these developers finally calm down and stop bullying newbies!? Before I had time to fully understand CSS, they told me: “All real layout designers have long switched to preprocessors. Well, what kind of pure CSS is this on the eve of 2020!?” What to do?
Firstly, developers will never stop coming up with new technologies. And professional layout designers are very grateful to them for this. The CSS style sheet language was invented at a time when websites were primitive. But as the years passed, sites became more complex and massive, but the layout methods remained the same. The layout designers are tired of writing similar sections of code. It was impossible to quickly change the color on the site. There was a need for greater automation of layout, and so CSS code preprocessors appeared. And today we will talk about one of them, the LESS preprocessor.
Compiling LESS and VS CodeAll you need to compile LESS code is the VS Code code editor and the Easy Less extension. How it works?
Every time changes are saved, the LESS files are compiled into CSS files. Browsers have not yet learned to understand LESS, they need CSS code.
LESS VariablesWe put the most frequently used properties into variables. The site typically uses repeating colors and font families. We put all the colors into variables and then substitute in the rule not the color code, but the variable. You ask: “What’s the fun? I still need to prescribe something, what’s the difference?”
The main feature is the quick color change. The color changes only once, in a variable. Replacing a color in one variable will replace the color on all pages of the site. This feature alone is enough to start using LESS. We declare variables in LESS and store the values we need in them; we give meaningful variable names.
@primary: #194eb4;
@secondary: #f2b834;
@success: #4cb514;
@black: #000;
@white: #fff;
Now we write normal code, as we did in CSS, but instead of values we substitute variables.
LESS div(padding: 0;
color: @black;
}
After saving, the CSS code is compiled. We don't touch the CSS file at all, all work is done in the LESS file. You can put any frequently repeated properties into variables.
CSS div(padding: 0;
font-family: Roboto, sans-serif;
color: #000;
) Mixins in LESS
Mixins are useful for reusing a set of properties - frames, buttons, titles. A grouped set of properties that can be applied to different selectors.
The site has several buttons of the same type in different colors, but with the same font properties. We create a mixin that helps automate the process of creating buttons.
Button_font(
text-transform: uppercase;
font-size: 18px;
}
Add a mixin to the button selector properties.
Portfolio__button (
padding: 15px 80px;
color: #344258;
.button_font;
}
At the output we get:
Portfolio__button (
padding: 15px 80px;
color: #344258;
font-family: "DIN Pro Bold";
text-transform: uppercase;
font-size: 18px;
}
Instead of duplicating the selector name, we use the ampersand symbol.
Portfolio__item (
position: relative;
background-color: #3c3c3c;
}
&:hover (
background-color: #ccc;
}
}
position: relative;
background-color: #3c3c3c;
}
.portfolio__item:hover (
background-color: #ccc;
) Media queries in LESS
You can write media queries directly inside the selector.
LESS.header__title(color: #344258;
font-size: 40px;
padding: 0 20px;
@media only screen and (max-width: 320px)(
font-size: 22px;
}
} CSS.header__title(
color: #344258;
font-size: 40px;
font-family: "DIN Pro", sans-serif;
padding: 0 20px;
}
@media only screen and (max-width: 320px) (
.header__title(
font-size: 22px;
}
) Conclusion
This article doesn't even cover 25% of all the features that LESS offers. Yes, this is not necessary, the purpose of the article is to motivate beginners to start using preprocessors. Starting with the simplest, gradually moving to more complex ones.
NetTuts+ article written by Johnathan Croom in 2012.
The main goal of the article is to show the advantage of using any of the three preprocessors described in it: Sass, LESS and Stylus. The review is perfect for beginners who are just discovering this facet of web design.
In this article, we will look at the advantages and benefits of using three different preprocessors - Sass, LESS and Stylus.
IntroductionCSS preprocessors were created with one goal in mind: to add power and flexibility to CSS style sheets without breaking cross-browser compatibility. All preprocessors compile the code generated using their syntax into standard CSS code that any browser, no matter how ancient, can understand and use ( browser) was not.
There are many benefits that preprocessors bring to CSS stylesheets, and in this article we'll look at just a few of them, both well-known and less common. Let's get started with the review.
SyntaxThe most important part when writing code in any CSS preprocessor is its syntax. Luckily for us, the syntax of all three preprocessors we'll be looking at is CSS-like.
SASS & LESSBoth Sass and LESS preprocessors have standard CSS syntax. This makes the task of converting existing CSS code into the syntax of any of these preprocessors simple and fast. Sass uses the extension for its files
| 1 | .scss |
| 1 | .less |
A typical file in Sass or LESS syntax is shown below:
/* style.scss or style.less */ h1 ( color : #0982c1 ; )You can clearly see that this is normal CSS syntax, which converts perfectly to Sass (SCSS) or LESS.
It's important to note that Sass (SCSS) also has an older version of Sass syntax that omits semicolons and curly braces.
Although this syntax can still be used in practice, it is obsolete and we will not use it in our examples.
Sass Syntax ( old version) as follows:
/* style.sass */ h1 color : 0982c1 StylusFor its files, this preprocessor uses the extension
| 1 | .style |
Stylus syntax examples:
/* CSS-like syntax */ h1 ( color : #0982C1 ; ) /* omitted curly braces */ h1 color : #0982C1 ; /* omitted curly braces, colons and semicolons */ h1 color #0982C1All syntax options shown above are valid and will result in correct CSS code when compiled. For example, this code will compile to standard CSS without errors:
h1 ( color #0982c1 ) h2 font-size : 1 .2em VariablesIn preprocessors, variables are declared and used within CSS style files. Variables can take on any value allowed in CSS (color, number, or text) and can be referenced from anywhere in the CSS document.
SassIn the Sass preprocessor, a variable is declared using the symbol
| 1 | $ |
Variables in LESS are exactly the same as in Sass, except that the variable name is preceded by a symbol
| 1 | @ |
Variables in Stylus do not need any sign for their declaration, but can still use the symbol
, but when this variable is called in code, the value of the variable is not substituted.In other words, the following operation is not performed:
mainColor = #0982c1 siteWidth = 1024px $ borderStyle = dotted body color mainColor border 1px $ borderStyle mainColor max-width siteWidth Compiled CSSEach of the example files is compiled into exactly the same CSS code. You can use your imagination to imagine how useful variables can be.
Thanks to them, there is no need to set a color value and then repeat it twenty times in the CSS code. Or the task is to change the width of the site and for this you need to “rummage” through the code in search of this value.
Below is the CSS code after compiling:
body ( color : #0982c1 ; border : 1px dotted #0982c1 ; max-width : 1024px ; ) NestingIf your CSS code is tasked with accessing multiple elements that have the same parent at the same time, then writing that parent over and over again is tedious.
For example, like this:
Instead, using the power of the preprocessor, we can place all child selectors inside the parent element's parentheses. In addition, the symbol
| 1 | & |
All three preprocessors have exactly the same syntax for nested selectors:
section ( margin : 10px ; nav ( height : 25px ; a ( color : #0982C1 ; &:hover ( text-decoration : underline ; ) ) ) ) Compiled CSSBelow is the compiled CSS output of the code above. Compare with the code that we wrote at the very beginning - absolutely the same. But what a convenience it is to take advantage of the preprocessor!
section ( margin : 10px ; ) section nav ( height : 25px ; ) section nav a ( color : #0982C1 ; ) section nav a :hover ( text-decoration : underline ; ) mixins| 1 | mixins |
The use of mixins is especially worthwhile when creating specific styles for elements or setting browser prefixes. When a mixin is called inside a CSS selector, the mixin's arguments are parsed, then its styles are applied to the selector that called it.
Note translator: in the examples below, it is worth paying attention to the difference in the syntax of declaring and calling a mixin inside a CSS selector for all three preprocessors.
Sass /* Sass mixin named error with argument $borderWidth whose default value is 2px */ @mixin error ($ borderWidth : 2px ) ( border : $ borderWidth solid #F00 ; color : #F00 ; ) .generic-error ( padding : 20px ; margin : 4px ; @include error(); ) .login-error ( left : 12px ; position : absolute ; top : 20px ; @include error(5px); ) LESS /* LESS mixin named error with argument $borderWidth, which defaults to 2px */ .error (@borderWidth : 2px ) ( border : @ borderWidth solid #F00 ; color : #F00 ; ) .generic-error ( padding : 20px ; margin : 4px ; .error( ); /* Connect a mixin named error */ ) .login-error ( left : 12px ; position : absolute ; top : 20px ; .error(5px); /* Connect a mixin named error with the value of the $borderWidth argument equal to 5px ; that is, the value of the argument is overridden */ ) Style /* Stylus mixin named error with the argument $borderWidth, the default value of which is 2px */ error (borderWidth = 2px) ( border : borderWidth solid #F00 ; color : #F00 ; ) .generic-error ( padding : 20px ; margin : 4px ; error(); /* Connects a mixin named error */ ) .login-error ( left : 12px ; position : absolute ; top : 20px ; error(5px); /* The mixin called error is connected with the value of the $borderWidth argument equal to 5px; that is, the value of the argument is overridden */ ) Compiled CSSThe result of compilation from all three preprocessors will be the same CSS code:
.generic-error ( padding : 20px ; margin : 4px ; border : 2px solid #f00 ; color : #f00 ; ) .login-error ( left : 12px ; position : absolute ; top : 20px ; border : 5px solid #f00 ; color : #f00 ; ) InheritanceWhen writing CSS styles in the “classic” way, in order to apply the same properties to multiple elements in an HTML document, we would create code like this:
p , ul , ol ( /* some styles here */ )Everything works great. But if you need to write styles separately for any of these selectors, you will need to create separate rules for each of them. And immediately the style sheet code becomes sloppy and difficult to maintain.
In contrast to this, inheritance applies. Inheritance is the ability for some CSS selectors to inherit properties from another selector.
Note translator: note the same syntax for connecting (declaring) inheritance inside a CSS selector using a directive
| 1 | @extend |
The LESS preprocessor does not fully support inheritance in the same way as Sass or Stylus. Instead of adding multiple selectors to a single property set, inheritance is treated as a no-argument mixin.
Styles are imported for each selector. The downside of this approach is the constant repetition of property lines in the compiled CSS style.
Here's what LESS code with inheritance might look like:
.block ( margin : 10px 5px ; padding : 2px ; ) p ( .block; border : 1px solid #EEE ; ) ul , ol ( .block; /* Inheriting properties from the class selector.block */ color : #333 ; text -transform : uppercase ; ) Compiled CSS .block ( margin : 10px 5px ; padding : 2px ; ) p ( margin : 10px 5px ; padding : 2px ; border : 1px solid #EEE ; ) ul , ol ( margin : 10px 5px ; padding : 2px ; color : #333 ; text-transform : uppercase ; )As you can clearly see from the code, class styles
. ImportIn the CSS community to importing styles using a directive
| 1 | @import |
In any of the three preprocessors, importing one file inside another effectively inserts the code from one file into the other when compiled, resulting in a single CSS file.
Note translator: in other words, in preprocessors, importing is necessary to compile one file from several. In standard CSS, importing results in substituting one code inside another.
Please note that when compiling a file with a standard connection using the directive
| 1 | @import "file.css" |
“Color” functions are designed to transform colors during compilation. Such functions are extremely useful when creating gradients, darkening colors when
| 1 | hover |
The code above is just a short list of color features in Sass. A complete list of all available functions is located at Sass Documentation.
“Color” functions can be used wherever you need to work with colors in code. A simple example - a variable with a color is declared, to which the color dimming function is applied later in the code
| 1 | darken |
A list of LESS preprocessor functions can be found on the official LESS Documentation project website.
Below is an example of how the “color” functions can be used in LESS:
@color : #0982C1 ; h1 ( background : @ color ; border : 3px solid darken ( @ color , 50% ); ) Stylus lighten ( @color , 10% ); /* returns a color 10% lighter than $color */ darken (@color , 10% ); /* returns a color 10% darker than $color */ saturate (@color , 10% ); /* returns a color 10% more saturated than $color */ desaturate (@color , 10% ); /* returns a color 10% less saturated than $color */A complete list of all the color functions of the Stylus preprocessor is presented on the Stylus Documentation project website.
And an example of using the “color” function in Stylus:
color = #0982C1 h1 background color border 3px solid darken (color , 50%) Arithmetic operationsThanks to preprocessors, performing arithmetic operations inside CSS code is now simple and easy. This feature is often useful.
Note translator: it is worth mentioning the function from CSS3 named
| 1 | calc() |
So we looked at the main points of what all three preprocessors can do and how. However, we have not yet touched upon the practical application of these capabilities. Below is a list of real web applications that use preprocessors, significantly improving the entire code.
Browser prefixesOne of the most striking examples of the benefits of using preprocessors is writing properties with browser prefixes using them. Once we create a mixin that supports browser prefixes, we save ourselves from routine work.
For example, let’s create a block corner rounding mixin for all three preprocessors:
Sass @mixin border-radius ($ values ) ( -webkit-border-radius : $ values ; -moz-border-radius : $ values ; border-radius : $ values ; ) div ( @include border-radius(10px); ) LESS .border-radius (@values ) ( -webkit-border-radius : @ values ; -moz-border-radius : @ values ; border-radius : @ values ; ) div ( .border-radius(10px); ) Stylus border-radius (values) ( -webkit-border-radius : values ; -moz-border-radius : values ; border-radius : values ; ) div ( border-radius(10px); ) Compiled CSS div ( -webkit- border-radius : 10px ; -moz-border-radius : 10px ; border-radius : 10px ; ) 3D textCreate a 3D effect for text using a CSS property
| 1 | text-shadow |
Using mixins and color functions, we can create 3D text and change its color on the fly:
Sass @mixin text3d ($color) ( color: $color; text-shadow: 1px 1px 0px darken ($color, 5%), 2px 2px 0px darken ($color, 10%), 3px 3px 0px darken ($color, 15% ), 4px 4px 0px darken ($ color , 20% ), 4px 4px 2px #000 ; ) h1 ( font-size : 32pt ; @include text3d(#0982c1); ) LESS .text3d (@color ) ( color : @ color ; text-shadow : 1px 1px 0px darken (@ color , 5% ), 2px 2px 0px darken (@ color , 10% ), 3px 3px 0px darken (@ color , 15% ), 4px 4px 0px darken (@ color , 20% ), 4px 4px 2px #000 ; ) span ( font-size : 32pt ; .text3d(#0982c1); ) Stylus text3d (color ) color : color text-shadow : 1px 1px 0px darken (color , 5%) , 2px 2px 0px darken (color, 10%), 3px 3px 0px darken (color, 15%), 4px 4px 0px darken (color, 20%), 4px 4px 2px #000 span font-size: 32pt text3d (#0982c1)In the example for Stylus, I chose the option to write the property
| 1 | text-shadow |
The use of variables and numeric values for these variables came to my mind when I first began to become familiar with the capabilities of CSS preprocessors. Declaring the width for a layout inside a variable makes it the task of changing that width ( if necessary) simple and fast:
Sass $siteWidth: 1024px; $gutterWidth: 20px; $sidebarWidth: 300px; body (margin: 0 auto; width: $siteWidth;).content(float:left;width:$siteWidth - ($sidebarWidth +$gutterWidth);).sidebar(float:left;margin-left:$gutterWidth;width: $ sidebarWidth ; ) LESS @siteWidth : 1024px ; @gutterWidth : 20px ; @sidebarWidth : 300px ; body (margin: 0 auto; width: @siteWidth;).content(float:left;width:@siteWidth - (@sidebarWidth +@gutterWidth);).sidebar(float:left;margin-left:@gutterWidth;width: @sidebarWidth ; ) Stylus siteWidth = 1024px ; gutterWidth = 20px ; sidebarWidth = 300px ; body ( margin : 0 auto ; width : siteWidth ; ) .content ( float : left ; width : siteWidth - (sidebarWidth + gutterWidth ); ) .sidebar ( float : left ; margin-left : gutterWidth ; width : sidebarWidth ; ) Compiled CSS body ( margin : 0 auto ; width : 1024px ; ) .content ( float : left ; width : 704px ; ) .sidebar ( float : left ; margin-left : 20px ; width : 300px ; ) Some preprocessor tricksThere are several tricks when working with CSS preprocessors. In this article I will only talk about some of them. But if this topic interests you, I recommend that you carefully read the official documentation or, even better, just start using the preprocessor every day as you code.
Error messageIf you've been writing CSS code for a long time, you've probably encountered a situation where an error crept into the code that you just can't find. If you found yourself in exactly the same situation, then I can rejoice in you - there is a way to solve such a problem.
CSS preprocessors can report errors in code and make them do so quite easily. In this case, the preprocessor itself tells you where the error is located in the CSS code ( and everyone is happy).
If you are interested in a similar feature in all three preprocessors, then this article describes in detail how to perform this setup.
26.07.2017
5 Best CSS Preprocessors of 2017 that will speed up your workflow.
CSS preprocessors are designed specifically to make CSS programmers' work more fun. They allow you to write code that is easily editable, reliable, and reusable.
In other words, a CSS preprocessor is an addition to CSS with new features: variables, extensions, imports, and so on.
In that article, I will talk about the best 5 CSS preprocessors of 2017.
01. SassSASS is the most popular preprocessor with a huge community and powerful functionality. It only works in conjunction with Ruby and is very easy to learn. Most front-end frameworks such as Bootstrap, Foundation and materialize are built using SASS.
SASS has two syntaxes:
- .sass
- .scss
Stylus is another great preprocessor for dynamically generating CSS. If you want to omit curly braces, commas, and semicolons, then it may be the best choice for you. Stylus runs on Node.js and is very easy to install and use. It has many custom functions, for example, saturation(). You can also use all the features provided by other leading compilers.
03.Less
Less, which is also known as Less.js or Less CSS, is another leading CSS preprocessor. This is a great choice if you need standard features like variables, nested styles, and so on. This Javascript library was originally written in Ruby.
- Read also:
Stylecow is a preprocessor written in Node that can be installed using npm. It has a powerful API that makes it easy to create plugins.
05. CSS-Crush
A preprocessor built in PHP that is a great option for PHP programmers because it works on many platforms. CSS-Crush has all the usual preprocessor features (variables, nested styles, etc.)
ConclusionIf you're looking for the best CSS preprocessor, you'll find many different options online. In my opinion, the best options for beginners are SASS and Stylus.