SCSS Basics Using Sass

Sass is a style sheet preprocessor that compiles SCSS or Sass into CSS. It helps reduce repetition and achieve more with less code.

One of the recommended ways to install Sass is using Node.js - JavaScript runtime that is also required when installing other services like React. Once you have Node.js installed open up a Command Prompt on Windows (Terminal on Linux) and type:

npm install -g sass

Next in your project's style sheets' folder you should create two empty files, for example 'styles.scss' and 'styles.css'. From here on you can start compiling SCSS into CSS. Firstly, open up a Command Prompt again and navigate to your style sheets' folder, for example:

cd C:\myproject\stylesheets

And initiate Sass by typing:

sass --watch styles.scss styles.css

Now you can open 'styles.scss' file with your preferred text editor and start coding. All of the code you type in SCSS will be automatically interpreted into CSS.

Generally speaking coding in SCSS is similar to CSS but here are a few examples where SCSS can be helpful:

| Using Mixins in SCSS:

@mixin background-size($property) {
-webkit-background-size: $property;
-moz-background-size: $property;
-o-background-size: $property;
background-size: $property;
}

.wrapper {
@include background-size(cover);
}

Here is the result you will see in your CSS file:

.wrapper {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}

| Variables in SCSS:

$color: #000;

.wrapper {
color: $color;
}

CSS:

.wrapper {
color: #000;
}

| Nesting in SCSS:

.wrapper {
img {
padding: 0;
}
p {
color: #000;
}
}

CSS:

.wrapper img {
padding: 0;
}

.wrapper p {
color: #000;
}

Please note that in your HTML files you should use the CSS files as your style sheets.


> Next Article

< Home Page

Technologies: Node.js, Sass

Vaidotas Web Studio Blog provides simple to complex tutorials on topics like Web Development, Operating Systems, Graphic Design, Audio Equipment, etc.

Disclaimer: tutorials provided in this blog are intended for informational purposes. End results may vary depending on factors like different operating systems, software versions, etc.

This blog is part of VAIDOTAS WEB STUDIO