Sass in Angular

WRITTEN BY GARETH DUNNE @JSDIARIES

in Angular

If you missed our last Angular post please check it out here.

So SASS (Syntactically Awesome Style Sheets) are an already  well established and renown pre-processor for CSS. It allows the developer to create modular CSS where classes can nested inside each other. To summarize is benefits, it allows you to write less and customize more.

It also has a whole host of features including variables for colors, urls, fonts etc, while also having, mixins, extending/inheritence and operators.

You will write all your SASS code in a .scss extension file. The compiler will then output this into a css file based on the nested structure of your classes.

Having already seen the structure of Angular’s component based architecture you might wonder what exactly is the best way to implement SASS to an existing project.

And although I could show some of Sass’s great features, I will concentrate on whats important in the context of an Angular application.

You can check a great SASS intro here.

And here is a great book resource for learning Sass and Compass if you wanted to really hone your Sass skills.

Sass Structure

There are many different application you can use to get going with Sass you can pick your own preference here.

I personally use Koala its a nice GUI 3rd part application that looks for a scss file in a specified file directory and then compiles it to a css file.

Koala Sass
Koala Sass

Once you open Koala navigate to your desired project directory.

When you find the .scss file you want to turn into css, simply press compile once you find it in the directory. Koala will also has real-time compilation and will listen for the file changes in this folder.

It is also cross platform so it will run on Windows, Mac and Linux.

An ideal Sass structure would have folder called partials. Each file in this folder would have many different scss files that would be prefixed with an underscore.

Each file would adhere to a specific part of a website for example home, about, navigation.

sass-partials
sass-partials

All of these partials are then imported in the main .scss file ( usually called global.scss or style.scss). This one file is then compiled into a css file that is used for the whole project.

style.scss
Importing partials in our style.scss file

This is deemed as one of the most efficient ways to manage the styles of your project as all your css is compiled into the one file. However, in an Angular project there are two different approaches.

Generate Sass

The easiest way to get going with SASS in an Angular project is to create a project in your command line with the styles set to scss.

 ng new projectname --style=scsss

This will scaffold a project for you that will contain an app.component.scss file that will automatically be compiled for you without the use of a 3rd party application like Koala.

Manual setup

If you wanted to setup up your own styling structure once you create an Angular project through the CLI you should note that
each component generated has its own css file specific for that component. So if you create a Sass file with the component’s naming convention eg home.component.scss Koala will detect this and will compile it to home.component.css.

So instead of having a partial import system we just have individual sass files that are unique to the component.

I’m sure there is an argument for using both methods but this is the method I personally use. It makes the most sense to me as it aligns with the way an Angular project is typically structured and goes hand in hand with using the Angular CLI.

Form Validation

To give a practical example of using Sass in Angular I’ll focus on styles for form validation.

For validating forms in Angular we can use preexisting classes that correspond to the state of on input field or select box.

These classes are:

  • ng-pristine
  • ng-invalid
  • ng-touched
  • ng-dirty
  • ng-valid
  • ng-untouched

These classes are self explanatory for the most part, ng-touched is applied when the input field is written in, ng-dirty is applied when

The ng-dirty classes indicates when the form has been modified by the user. The opposite of this is the ng-pristine class which is applied as long as the form has not been modified by the user.

In Sass we can add appropriate styles to these classes to indicate when an input field is empty, invalid, not yet entered etc;

Here is an example of adding relevant border colors to these input states.

 input {
       input {
      font-weight: 400;
      text-transform: none;
      color: white;
      font: 17px 'Raleway';
      border: solid 1px #fb9146;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
      &.ng-touched {
        border: 3px solid #FF9347;
      }
      &.ng-dirty {
        .ng-invalid {
          border: 3px solid #e65b41;
        }
        .ng-valid {
          border: 1px solid #24CC7C;
        }
      }
    } 
Form with styling states
Form with styling states
Overall

Although styling might seem quite arbitrary in context of learning Angular. Sass allows you to be more efficient and modular when it comes to creating a beautiful Angular application. Its a very useful tool to use in combination with Angular and fits in nicely to the structure of a component.

If you are looking for anymore resources to learn Angular be sure to check our resource page here.

Proudly published with Gatsby