Brief Introduction About CSS Preprocessor
Posted By : Shivam Gupta | 28-Dec-2017
A CSS preprocessor is used for writing maintainable code. they reduce the amount of CSS in any project.there are several CSS-processor available. some of the best CSS-processor is given below-
Sass: - this CSS-processor require ruby.it is eight-year-old.there are two syntaxes for this
Sass: the original syntax
SCSS: a newer syntax that’s very similar to native CSS.
example: -
$serif-font-stack: "Georgia", "Times New Roman", serif
$monospace-font-stack: "Cousin", "Courier"
body{
font: normal 18px/22px $serif-font-stack
}
pre, code{
font: 600 bold 18px/22px $monospace-font-stack
}
Less: - Less extends CSS syntax thoroughly with mixins, variables, nested style rules, and even rule-set looping (which behaves similarly to for loops in a programming language).
example: -
.button {
display: inline-block;
width: 80%;
}
.button-checkout- process {
.button(); /* Mixin */
background-color: silver;
}
Stylus: - stylus is the strong competitor of sass. it is feature-rich preprocessor and it has more than 60 custom functions.
example: - saturation()function
mathematically adjust the CSS colors.
.button
display inline-block
border-color saturation(#000, 50%)
border-radius 5px
this stylus code will be compiled into normal CSS code as given below -
.button {
display: inline-block;
border-color: #959595;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
Css-crush: - CSS-Crush has every feature which is used in modern CSS-preprocessors like auto-vendor-prefixing, variables, mathematical operations, property inheritance via nested rule sets, and much more.
example: to use CSS-crush you need to include it in an appropriate PHP file
<?php require_once 'path/to/CssCrush.php'; ?>
if you want to define variable then you will use @set directive as-
@set {
smartphone-width: 320px;
tablet-width: 768px;
laptop-width: 1680px;
4k-monitor-width: 3840px;
}
after defining variable, you can use them through out the project given as below.
@media only screen and (min-device-width: smartphone-width) {
h1 {
font-size: 24px;
}
}
Myth: - Myth, which requires Node.js, lets you use future CSS syntax today without having to wait for web browsers to implement a new proposed CSS feature or for the W3C to complete the feature’s specs. This means that when the feature is finally supported in modern browsers, you don’t have to rewrite your code.
example: - calc() function
.container {
margin: calc(7px*2);
}
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Shivam Gupta
Shivam is a versatile UI developer with html, css, scss, js, angularjs technologies. He likes chess, cricket and reading book.