Laravel

Valeri Tandilashvili's Personal Professional Blog

Results: 1022

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

multiplication

.box {
    width: 300px * 2;
}

division

.box {
    width: 500px / 2;
}

addition

.box {
    width: 100px + 200px;
}

mixins used for @media queries

@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%));
}

variable used in mixins

.btn-b {
    @include verticalGradient(white, $beautifulHue);
}

Results: 1022