Angular 2 SASS

SASS (Syntactically Awesome Style Sheets) adds to CSS powerful features and elegance, styling angular 2 applications with SASS is good practice.

SASS compatible with CSS. it brings to CSS (imports, mixins, variables, nested rules, and other features).

angular 2 sass
angular 2 sass

SASS = superset of CSS. SASS is a CSS preprocessor.

 

example and resources from here: Compatible with Angular 2 final release

 

With SASS, your CSS is easily maintainable :)

Needed tools
Needed tools

 

  • Download the zip file from the download page above.
  • Go to your project folder.
  • Run npm install.
  • Next command is : npm start
  • Now go to : http://localhost:8080/
  • Now your project looks like : and you can see the sassexample folder
sass-example-folder-structure
sass example folder structure

 

  • scss files are automatically compiled to css.
  • You only need to add your scss file to your component :

styleUrls: ['./sassexample.component.scss']

enjoy you sass example , you can now play with variables and colors : )

 

Extract : from Angular 2 SASS example.

 

In your package.json you can find the libraries used to compile scss files: (style-loader, sass-loader, postcss-loader, node-sass, css-loader) this is just an extract.

angular 2 sass
angular 2 sass

 

You can find the files package.json from here.

 

sourcemaps : writes the ( new transformed ) code source into destination files. (From .scss to .css)

autoprefixer : Parses CSS file and adds the desired vendor prefixes to this CSS file and removes the unnecessary things.

cssnano: A modular minifier works with PostCSS plugins.

Postcss : A tool for transforming CSS with JavaScript.

postcss-scss :SCSS parser for PostCSS.

Precss = Use Sass-like markup in your CSS.

  • Now let’s install gulp related tools : (only if you are using gulp)

gulp-postcss : PostCSS plugin for gulp.

gulp-sass : Sass plugin for gulp.

gulp-sourcemaps : Source map support/plugin for gulp.

angular 2 sass gulp
angular 2 sass gulp
sass angular 2 example
sass angular 2 example

 

This is just an example, if you want to learn more about sass please visit: http://sass-lang.com/

We create a SASS file in /app/sassexample/ : sassexample.component.scss

/*Variables*/
$mainTextColor: #ffffff;
$mainBackGroundColor: #00b3ee;

.my-span {
  background-color: $mainBackGroundColor;
  color: $mainTextColor;
}
/*Nesting*/
$my-div-width: 100%;
$mainH2TextColor: #0b97c4;
.my-div {
  width: $my-div-width;
  h2 {
    color: $mainH2TextColor;
  }
}
/*Extends*/
.input-text {
  border-radius: 2px;
  border: 2px solid #ddd;
  color: #555;
  font-size: 20px;
  padding: 5px 12px;
  display: inline-block;
  outline: 0;
}
.input-text-success {
  @extend .input-text;
  border:4px solid #7be500;
}

The generated file is: my-app.css

/*Variables*/
.my-span {
 background-color: #00b3ee;
 color: #ffffff;
}

/*Nesting*/
.my-div {
 width: 100%;
}
.my-div h2 {
 color: #0b97c4;
}

/*Extends*/
.input-text, .input-text-success {
 border-radius: 2px;
 border: 2px solid #ddd;
 color: #555;
 font-size: 20px;
 padding: 5px 12px;
 display: inline-block;
 outline: 0;
}

.input-text-success {
 border: 4px solid #7be500;
}

 

angular 2 sass try it
angular 2 sass try it

We call our CSS class in angular 2 project:

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {Component} from 'angular2/core';

/*Angular 2 SASS*/
@Component({
    selector: 'my-app',
    template:`
               <div class="my-div">
                    <h2>Angular 2 SASS</h2>
                    <p class="my-span">
                    sourcemaps : writes the news transformed code source into destination files. (From .scss to .css).<br>
                    autoprefixer : Parse CSS file and adds the desired vendor prefixes and remove unnecessary to this CSS file.<br>
                    cssnano: A modular minifier works with PostCSS plugins.<br>
                    Postcss : A tool for transforming CSS with JavaScript.<br>
                    </p>
                    <input class="input-text-success" type="text" value="angular 2 sass" placeholder="enter value">
               </div>
             `,
    styleUrls: ['./sassexample.component.scss']
})
export class Angular2SASSComponent {

}

angular 2 sass