SCSS – What is the difference to CSS?

  • SCSS contains all the features of CSS and more
  • SCSS offers variables, you can shorten your code by using variables
$white: #ffffff;
$ubuntu-font: 'Ubuntu', 'Arial', 'Helvetica', sans-serif;

body{
 color: $white;
 font: $ubuntu-font;
 font-size: xx-large;
 padding: 2rem;
}
  • SASS adds the feature of @import which lets you import your customized SCSS files
@import "my theme";
@import "framework/bootstrap";
  • SASS allows us to use nested syntax. Let’s say if you have to style a specific ‘paragraph’ in ‘div’ in ‘footer’ you can definitely do that by SASS.
footer {
    div {
        p {
            margin: 2rem;
            color: #2f2f2f;
        }
    }
}

Be the first to comment

Leave a Reply

Your email address will not be published.


*