The latest articles on DEV Community by Zack (@krxzydev). https://dev.to/krxzydev https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F483058%2F103351e2-5508-4722-a2f3-46e80c180ecd.jpeg https://dev.to/krxzydev en Zack Fri, 16 Apr 2021 09:08:39 +0000 https://dev.to/krxzydev/what-is-sass-2lga https://dev.to/krxzydev/what-is-sass-2lga <p>Hello, there<br> I'm going to explaining to you what scss is<br> first, we need to know what SCSS is? Sass means Syntactically awesome stylesheet. sass is also a CSS preprocessor used in writing better css<br><br> You may be wondering how to write sass I'm going to show you how, and the best practices<br> Sass reduces the repetition of CSS and therefore saves time.<br> `/* Define standard variables and values for website */<br> $bgcolor: light blue;<br> $textcolor: dark blue;<br> $fontsize: 18px;</p> <p>/* Use the variables */<br> body {<br> background-color: $bgcolor;<br> color: $textcolor;<br> font-size: $fontsize;<br> }`</p> <h2> Why Use Sass? </h2> <p>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.</p> <p>Sass lets you use features that do not exist in CSS, like variables, nested rules, mixins, imports, inheritance, built-in functions, and many more.</p> <h2> How does SASS work? </h2> <p>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 <br> we have many interpreters one of them is a live scss compiler in the vscode extension marketplace</p> <h2> SASS file extension </h2> <p>.scss or .sass but I prefer .scss </p> <h2> Sass Comments </h2> <p>Sass supports standard CSS comments like <code>/* comment */</code>, and in addition it supports inline comments <code>// comment</code></p> scss design webdev