Home / Sass / Complete your SCSS Only in 10 Points

Complete your SCSS Only in 10 Points

Wednesday June 2, 2021
4 minutes read
117 Views
scss

1. Introduction

Sassy Cascading Style Sheet (SCSS) is a SASS (Syntactically Awesome Style Sheet) syntax based on the Ruby Programming Language. It’s both a preprocessor and a CSS superset, which means that every valid CSS is also a valid SCSS.


<html>
<body>

<h2>Heading level 2</h2>
</body>
</html>


input[type=text] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  box-sizing: border-box;
}



body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

2. Installation

SCSS is platform-independent, and because it is an SASS syntax, it may be installed using any of the two methods below:

a. Applications

Many apps are available to assist SASS in running directly on your computer, some of which are free and others which are expensive. For instance, Scout-App, LiveReload, Prepros, and so on.

b. Command-Line

If we install SASS from the command line, it will be able to convert SCSS to CSS more effectively.

If you’re using Node.js, use the following command to install SASS:

npm install -g sass

In addition to these two approaches, there are more ways to install SASS (SCSS). Other installation options can be found by clicking on the following link: https://sass-lang.com/install.

3. Usage

Because SCSS is a preprocessor, we cannot use it directly in an HTML file; instead, we must convert it to a CSS file before utilizing it. So, if you have a ‘.scss’ extension file with some code in it, you may use the command line to compile it to CSS, and DART CSS (Primary Implementation of SASS) is used here.

sass <input.scss> [output.css]

4. Syntax

The ‘.scss’ file extension is used by SCSS.

A variable is declared with the $ (Dollar Sign).

$primary: #81899b;
$accent: #302e24;
$warn: #dfa612;

Most of the syntaxes are similar to CSS, but one of the unique syntaxes used by SCSS is the nesting rule, which allows you to write one style rule inside another instead of repeating the same selectors over and again.

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

5. Built-in Modules

It contains some of the useful built-in modules. All built-in module URLs begin with ‘sass:’. Some of them are:

a. Sass: math

This module contains routines for manipulating numbers.

b. Sass: string

This module allows you to easily mix, search, and split strings.

c. Sass: color

This module creates new colours based on current ones, making colour themes simple to create.

d. Sass: list

This module allows you to modify and access values in lists.

6. Comments

Comments are a vital component of any programme since they help people understand it better. Many different techniques to remark on the code are available in SCSS. The following are the details:

a. /* <comments>*/

Loud or multiline remarks are the result of utilising this method. Except in compressed mode, they are converted to CSS.

b. / / <comments>

Silent or single-line comments are what you get when you use this method. They aren’t CSS-compliant.

c. /*! <comments>*/

This method’s comments are always included in the css output.

d. /// <comments>

Markdown and annotation comments, which are used for documentation, are created using this method.

7. VS Code Extension

Because VS Code is the most popular IDE for programming, you can use the Live Sass Compiler extension from the VS Code extension window or directly from the Live Sass Compiler. It keeps an eye on the SCSS or SASS and creates a separate CSS file for it.

8. Advantages over CSS

So, why should you use SCSS when CSS is perfectly adequate? Here are some advantages of SCSS over standard CSS:

a. It has variables for everything you need; simply declare them once and use them anytime you need them.

b. Nesting rules for writing selectors.

c. Designers and developers can utilize it more effectively because it is more elegant and stable.

d. It’s flexible when it comes to comments, and utilizing / for comments enables inline documentation.

10. Conclusion

As a result, SCSS is a superior and more recent form of the syntax that is utilized to make working with CSS as simple as feasible. It’s also easy to set up and use, and it’s completely free. It helps developers spend less time styling thanks to certain small changes in syntax and extra built-in modules. It’s a great approach to use CSS in our code because it gives us the power of inline documentation and VS Code extensions.

Read More:


Post author

A bright, talented, ambitious and self-motivated 💻 Freelancer, ⌨ Programmer, JavaScript and Typescript lover 📍

  Tweet It


Leave a Reply

Your email address will not be published. Required fields are marked *