Results: 1021
SASS moduls vs native CSS modules
If we import CSS file using native CSS, it will make additional HTTP request, compared to SASS.
npm install -g sass
Then we can compile .scss file:
sass source/stylesheets/index.scss build/stylesheets/index.css
hyphens
-
and underscores
_
are identical. This means that
$font-size
and
$font_size
both refer to the same variable
.box {
    width: 300px * 2;
}
.box {
    width: 500px / 2;
}
.box {
    width: 100px + 200px;
}
@mixin for-phone-only {
  @media (max-width: 599px) { @content; }
}
After declaring for-phone-only mixin, we can write the following Sass code:
.header-title {  
   font-size: 15px;  
   @include for-phone-only {    
      font-size: 18px; 
   }
}
.btn-b {
    @include verticalGradient(white, lighten($beautifulHue, 30%));
}
.btn-b {
    @include verticalGradient(white, $beautifulHue);
}
@mixin verticalGradient($fromColor, $toColor) {
    background-color: $toColor;
    background-image: -moz-linear-gradient(top, $fromColor, $toColor);
    ...
    background-image: linear-gradient(to bottom, $fromColor, $toColor);
}
.btn-b {
    @include verticalGradient(blue, red);
}
Results: 1021