Thursday, May 23, 2019

What is SCSS?



SCSS is a preprocessor of css. It helps you write your css codes much easily.
It is developed on ruby on rails.


ever faced an issue in css where if you wish to change the complete color theme of website then you have to change each and every color properties of selectors? Or any such issues?

You can create variables in SCSS

$myColor: #333;

#myDiv1{
background-color: $myColor;
}
#myDiv2{
background-color: $myColor;
}


nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

Other features of SCSS are:

Partials and imports: Helps you to split your CSS into smaller, more maintainable portions.
Mixins: A mixin lets you make groups of CSS declarations that you want to reuse throughout your site.
Inheritance: let's you use the properties of any selector with another.
Operators: let's you do math in CSS easily.



References:
https://www.quora.com/What-is-SCSS-How-does-it-differ-from-CSS

No comments:

Post a Comment