Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • CSS preprocessors

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 117
    Comment on it

    We frequently incorporate frameworks such as Bootstrap with our rails application. For going beyond the standard CSS, We require CSS preprocessors. They not only enhance the standard CSS but also provide several other useful functionalities such as nesting of rules,use of variables and mixins.

     

    here are two popular CSS preprocessors.

    First is LESS. Bootstrap is written in LESS .

    Second is SASS. We'll concentrate on this second CSS preprocessor.

    There are two variants or flavours of SASS varying mainly on the delimiter style.

    In SASS itself, We use whitespace to nest CSS rules and semicolons are not there. e.g.

    .header
      display: block
      background-color: green
    
      .image
        float: right
        max-width: 70px
    

     

    This file would produce the following code after compilation.

    .header {
      display: block;
      background-color: green;
    }
    
    .header .image {
      float: right;
      max-width: 70px;
    }
    

     

    The second variant called SCSS (Sassy CSS) which is almost akin to the standard CSS with which we are nicely acquaintend. See this file:

    .header {
      display: block;
      background-color: green;
    
      .image {
        float: right;
        max-width: 70px;
      }
    }
    

    and it would give the same above mentioned standard CSS.

    So SCSS bears a close resemblance to the standard CSS. Now ,question arises Which one to use?.

    It entirely depends on the discretion of the developer and it doesn't make a difference at all because we all know the final compiled file is going to be the same in both the cases.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: