Beginning with Sass in Angular 6

Sass is an extension of CSS, to make your job more simple adding variables, mixins, selector inheritance and more.

In this topic, I will use Angular CLI 6 + Sass

First step:

Open a terminal of your computer or use Visual Code terminal (I prefer this one) and type the list of commands:

For more details: cli.angular.io

> npm install -g @angular/cli (install angular)
> ng new project-name (create project)
> cd project-name (access project)
> ng serve (run project)

When you type "ng new project-name" in your terminal select the format Sass and the project was created.

Select the format SASS

To run the project remember type " ng serve " and to stop type " Ctrl + C ".

Tip: Before create your page, website or anything make or use a design system before coding. ;)

Beginning with Sass

To use Sass we don't need to write semicolon and braces, the code is aligned hierarchically, bringing us a simpler and more structured code. If we needed to change the font or color, just change the contents of a variable, a placeholder, or any data that stores that information.

Example to compare SASS, SCSS, and CSS

In Sass we can store information or groups of declarations, making your code clean and more simple to edit.

Variables

Sass uses the $ symbol to make something a variable. Variables are a way to store information that you want to reuse throughout your stylesheet.

$background: #5c5c5c
$primary-color: #dedede
$secondary-color: #333
$font: Roboto, sans-serif
.class {
   background-color: $background
   color: $primary-color
   font: $font
}

Mixins

Sass uses the = symbol to make something a mixin. A mixin lets you make groups of CSS declarations that you want to reuse throughout your stylesheet.

To call a mixin use the + before the mixin's name.

=center {
 display: flex
 align-items: center
 justify-content: center
}
.class {
   +center
}
.container {
   +center
}

When mixin is compiled to css, the content is duplicated on the applied classes

.class {
   display: flex
   align-items: center
   justify-content: center
}
.container {
   display: flex
   align-items: center
   justify-content: center
}

If you desire to add a property to modify in the element add a variable in parentheses. In the following example:

=transform($property)
  -webkit-transform: $property
  -ms-transform: $property
  transform: $property
.container
+transform (rotate)
.box
  +transform(rotate(30deg))

Placeholder

Sass uses the % symbol to make something a placeholder. That's a special type of class that only prints when it's extended and can help keep your compiled CSS neat and clean.

To print a placeholder use the @extend + % placeholder name.

%center {
 display: flex
 align-items: center
 justify-content: center
}
.class {
   @extend %center
}
.class2 {
   @extend %center
}

When placeholder is compiled to css, the compilation takes advantage by grouping selectors, without any repeated style.

.class, .class2 {
 display: flex
 align-items: center
 justify-content: center
}

The properties shown above are for structuring a reusable code based on your design system, making it able to change fonts and even colors on an easy approach to modifying.

For more details access https://github.com/kadijna/SassAngular

Thank You, Everyone!! If you liked don't forget to clap :D