What Is SCSS?

What is SCSS?

- SCSS And SASS makes css fun again.
- Sass has two syntaxes. The most commonly used syntax is known as �SCSS� (for �Sassy CSS�), and is a  superset of CSS3�s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
- You all know that css is pretty sweet to design and tweak your page.
- This is just awesome. I've experienced it really felt awesome!
- We have said that this is giving many features like variables, nesting, mixins, loop etc.
- There is also a language called SASS which is giving many features like scss.
- In the SASS, It don't need of specific brackets, semicolon, etc.
- Means if you write in CSS...

.sample {
  width: 20px;
  background: red;
  height: 20px;
}

then in SASS...

.sample
  width: 20px
  background: red
  height: 20px

- So This is cool, Isn't it.
- So after playing with the scss and sass, I am really impressed.
- We have also written many posts on css guides.

Also Read

CSS Guide to Newbie Blogger part-2

CSS Guide to Newbie Blogger part-1

Why use it?

- These languages will save our time because it's giving many features in comparison to the css.
- SCSS gives you help in the bigger project with the help of loops, variables, mixins etc.
- In SASS, we've said that you don't need to write special characters etc in it.
- Scss will accept all css. Means css is included in scss.
- I have just made a demo with the help of codepen to show you how it works?
- Just navigate to the SCSS tab.

See the Pen Fully Responsive menu by kaushalya (@kman) on CodePen

- You can see that i've used many variables etc.
- So this is just a simple example of it.
- In result view, you can see that how cool menu we have built which is fully responsive.
- So keep updating with our blog for more information.
- If you want to learn more about it click.
Thanks and if any queries then just comment or contact us.