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 css processor -
     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); 
          }      
        

About Author

Author Image
Shivam Gupta

Shivam is a versatile UI developer with html, css, scss, js, angularjs technologies. He likes chess, cricket and reading book.

Request for Proposal

Name is required

Comment is required

Sending message..