DEV Community

Cover image for What is sass?

What is sass?

krxzydev profile image Zack ・1 min read

Hello, there
I'm going to explaining to you what scss is
first, we need to know what SCSS is? Sass means Syntactically awesome stylesheet. sass is also a CSS preprocessor used in writing better css

You may be wondering how to write sass I'm going to show you how, and the best practices
Sass reduces the repetition of CSS and therefore saves time.
`/* Define standard variables and values for website */
$bgcolor: light blue;
$textcolor: dark blue;
$fontsize: 18px;

/* Use the variables */
body {
background-color: $bgcolor;
color: $textcolor;
font-size: $fontsize;

Why Use Sass?

Stylesheets are getting gigantic, more complex, and harder to maintain, or for open-source contributors to understand. This is where a CSS pre-processor can help you out.

Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and many more.

How does SASS work?

You may be wondering this SASS sounds, looks cool but how does it work well the browser doesn't understand scss but it understands CSS this is where an interpreter is also known as a converter arrives converting your scss code into plain ol'css
we have many interpreters one of them is a live scss compiler in the vscode extension marketplace

SASS file extension

.scss or .sass but I prefer .scss

Sass Comments

Sass supports standard CSS comments like /* comment */, and in addition it supports inline comments // comment

Discussion (0)

Editor guide