Abstract:
While writing CSS might also feel a chunk taxing, requiring loads of the same content to be completed again and again. This distinctive task, while commonly small, does add quite a bit of inefficiency. Fortunately, these have been diagnosed and pre-compilers are answers to this issue.
CSS Pre-compiler is a package that helps you to generate CSS from its own precise syntaxes. There are several CSS Pre-compilers to select from, but most CSS Pre-compilers can transfer a couple of options that do not exist in pure CSS, which incorporates mixins, nesting selectors, inheritance selectors, and so on. These functions create the CSS to look greater readable and simpler to keep.
Introduction:
CSS Pre-compilers are in our development of life for years. Of their first implementations, they had few features. But these days, they are the important thing and ought to have gear for CSS development. Pre-compilers enlarge CSS with variables, operators, interpolations, functions, mixins, and plenty of extra sets of usable properties. SASS, less, and Stylusare widely recognized ones.
Why Pre-compile CSS?
CSS is primitive and incomplete. Constructing a feature, reusing a definition or inheritance is hard to gain. For bigger initiatives or complex systems, protection is a completely large problem. However, the web is evolving; new specifications are being introduced to CSS. Browsers follow those specs, while they are in a thought state with their unique supplier prefixes. In some cases, coding with vendor-specific properties turns out to be a burden. You need to upload all distinct vendor versions for a single result.
If you want to write better CSS, there were exclusive strategies including setting apart definitions into smaller files and uploading them into one essential document. This technique helped to deal with components but did no longer solve code repetitions and maintainability troubles. Another technique becomes early implementations of object-orientated CSS. In this case, applying two or more class definitions to an element. Every class provides one type of style to the element. Having multiple classes’ re-usability reduced the maintainability.
Pre-compilers, with their advanced functions, helped to obtain writing reusable, maintainable, and extensible code in CSS. By the use of Pre-compilers, you could effortlessly boom your productivity, and decrease the amount of code you’re writing in an assignment.
Digging the Features:
Like each programming language, pre-compilers have special syntax, however with a bit of luck, no longer too separated. All of them assist classic CSS coding and their syntax are like classic CSS. SASS and Stylus have extra patterns. In SASS, you may leave out curly brackets and semicolons, whereas, in Stylus, you could additionally miss colons. These are optional in each SASS and Stylus.
In the below examples, you could discover SASS, LESS and Stylus versions, and CSS outputs. These are only sample usages for their functions. For more specific features please visit the documentation pages of each pre-processor.
Variables
Variables have been the all-time desired function for CSS. Each developer desired to outline a base coloration and use it all over the CSS, instead of writing the hex or named color on every occasion. Identical as “color”, variables wished for “width”, “font-size”, “font-family”, “borders” and so on.
Variables in SASS begin with $ sign, in LESS @ sign and no prefix in Stylus. Both in SASS and LESS, values are assigned with a colon (:), and with equals sign (=) in Stylus.
1. SASS:
$font-size: 14px;
div {
font-size: $font-size;
}
2. LESS:
@font-size: 14px;
div {
font-size: @font-size;
}
3. Stylus:
font-size = 14px
div
font-size font-size
4. CSS:
div {
font-size: 14px;
}
Nesting
CSS lacks visual hierarchy while operating with child selectors. You have to write selectors and their combos in separate lines. Nesting presents a visual hierarchy as inside the HTML and will increase the readability. In a few cases, nesting causes oversizing the selectors and something like a “selector train”, so use it accurately.
1. SASS:
$link-color: #666;
$link-hover: #222222;
ul {
margin: 0;
li {
float: left;
}
a {
color: $link-color;
&:hover {
color: $link-hover;
}
}
}
2. LESS:
@link-color: #666;
@link-hover: #222222;
ul {
margin: 0;
li {
float: left;
}
a {
color: @link-color;
&:hover {
color: @link-hover;
}
}
}
3. Stylus:
link-color = #666
link-hover = #222222
ul
margin 0
li
float left
a
color link-color
&:hover
color link-hover
4. CSS:
ul { margin: 0; }
ul li { float: left; }
ul a { color: #666; }
ul a:hover { color: #222222; }
Mixins
Mixins are a set of definitions that compiles according to some parameters or static rules. Using these, you can easily write cross-browser background gradients or another browser-specific styling, etc.
1. SASS:
@mixin bordered($width) {
border: $width solid #ddd;
&:hover {
border-color: #999;
}
}
h1 {
@include bordered(5px);
}
2. LESS:
.bordered (@width) {
border: @width solid #ddd;
&:hover {
border-color: #999;
}
}
h1 {
.bordered(5px);
}
3. Stylus:
bordered(n)
border: n solid #ddd
&:hover
border-color: #999
h1
bordered(5px)
4. CSS:
h1 { border: 5px solid #ddd; }
h1:hover { border-color: #999; }
Selectors
Extends are beneficial for sharing an accepted definition with selectors in preference to copying it in. All extended selectors are grouped in compiled CSS. SASS extends every example of prolonged selector that consists of its child selectors and inherited properties. However, in less you may pick each instance of prolonged selector by adding “all” characteristic to increase method or you can pick out only the main instance. Extends are also chainable.
1. SASS:
.block { margin: 10px 5px; }
p {
@extend .block;
border: 1px solid #eee;
}
ul, ol {
@extend .block;
color: #333;
text-transform: uppercase;
}
2. LESS:
.block { margin: 10px 5px; }
p {
&:extend(.block);
border: 1px solid #eee;
}
ul, ol {
&:extend(.block);
color: #333;
text-transform: uppercase;
}
3. Stylus:
.block
margin 10px 5px
p
@extend .block
border 1px solid #eee
ul
ol
@extend .block
color #333
text-transform uppercase
4. CSS:
.block, p, ul, ol { margin: 10px 5px; }
p { border: 1px solid #eee; }
ul, ol { color: #333; text-transform: uppercase; }
Color Operations
All three pre-processors have coloration features to play with colors. You could lighten the base coloration or saturate it, even you can mix or more of a kind coloring. This option isn’t very vital but high-quality to have.
1. SASS:
saturate($color, $amount)
desaturate($color, $amount)
lighten($color, $amount)
darken($color, $amount)
adjust-hue($color, $amount)
opacify($color, $amount)
transparentize($color, $amount)
mix($color1, $color2[, $amount])
grayscale($color)
complement($color)
2. LESS:
saturate(@color, @amount)
desaturate(@color, @amount)
lighten(@color, @amount)
darken(@color, @amount)
fadein(@color, @amount)
fadeout(@color, @amount)
fade(@color, @amount)
spin(@color, @amount)
mix(@color1, @color2, @weight)
grayscale(@color)
contrast(@color)
3. Stylus:
red(color)
green(color)
blue(color)
alpha(color)
dark(color)
light(color)
hue(color)
saturation(color)
lightness(color)
If/Else Statements
Manipulate directives and expressions help to build similar style definitions consistent with matched conditions or variables. SASS and Stylus support normal if/else conditionals. But in LESS, you could get this with CSS Guards.
1. SASS:
@if lightness($color) > 30% {
background-color: black;
}
@else {
background-color: white;
}
2. LESS:
.mixin (@color) when (lightness(@color) > 30%) {
background-color: black;
}
.mixin (@color) when (lightness(@color) =<; 30%) {
background-color: white;
}
3. Stylus:
if lightness(color) > 30%
background-color black
else
background-color white
Loops
Loops are useful while iterating via an array or growing a chain of styles as in grid widths. Like within the if/else case, LESS is using CSS Guards and recursive mixins for looping.
1. SASS:
@for $i from 1px to 3px {
.border-#{i} {
border: $i solid blue;
}
}
2. LESS:
.loop(@counter) when (@counter > 0){
.loop((@counter – 1));
.border-@{counter} {
border: 1px * @counter solid blue;
}
}
3. Stylus:
for num in (1..3)
.border-{num}
border 1px * num solid blue
Math
Math operations can be used for popular arithmetic or unit conversions. SASS and Stylus assist mathematics among unique gadgets. Similarly to easy math, pre-processors additionally have complex math aid which consists of ceiling, rounding, getting min or max fee in a listing and many others.
1. SASS:
1cm * 1em => 1 cm * em
2in * 3in => 6 in * in
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 3.514in
3in / 2in => 1.5
2. LESS:
1cm * 1em => 1cm * 1em
2in * 3in => 6in
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 3.514in
3in / 2in => 1.5in
3. Stylus:
1cm * 1em => 1 cm * em
2in * 3in => 6in
(1cm / 1em) * 4em => 4cm
2in + 3cm + 2pc => 5.181in
3in / 2in => 1.5in
Imports
Instead of the use of one huge file, keeping apart your code in small portions is beneficial for expressing your declarations, increasing maintainability and control over the codebase. You can group the similar code chunks in similar folders and import them to main CSS file. Additionally, with import assertion, frameworks can also be added to work packages.
1. SASS:
@import “library”;
@import “mixins/mixin.scss”;
@import “reset.css”;
2. LESS:
@import “library”
@import “mixins/mixin.less”
@import “reset.css”
3. Stylus:
@import “library”
@import “mixins/mixin.styl”
@import “reset.css
Conclusion
All three CSS pre-processors defined here more or less have similar capabilities. Just choose one according to your coding needs and begin using it for your next challenge.
Enhance the appearance of your website by hiring services from a top-notch designer company! QSS Technosoft is the most awarded & recognized ISO-CMMI Level 3 UI UX design company in India offering a vast range of software development services to clients across the globe. We help you build a smart & intuitive UI/UX that offers a meaningful end-user experience. Request a quote/free consultation now!
We are proud to mention that our work has been recognized by leading B2B reviews and research platforms like GoodFirms, Clutch, MirrorView, and many more.
About Author:
Navpreet Singh is a full time designer with 13+ years of experience in User Interface, User Experience and Front End Development. He has successfully delivered 230+ projects (Mobile Apps / Desktop Apps / Responsive Websites) to client across the Globe.
What is CSS Pre-Compiler or Pre-Processors?