headers
and expires
modules must be enabled on the server:sudo a2enmod headers
sudo a2enmod expires
After that the server must be restarted:service apache2 restart
Then it will work if .htaccess
contains the following:# for enabling browser caching
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
.btn-a {
display: inline-block;
padding: 10px;
}
.btn-b {
@extend .btn-a;
background-color: black;
}
Result in regular CSS:.btn-a, .btn-b {
display: inline-block;
padding: 10px;
}
.btn-b {
background-color: black;
}
a {
color: $beautifulHue;
}
@import 'header';
.btn-a {
...
.btn-a {
background-color: lighten($beautifulHue, 45%);
}
@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);
}
.btn-b {
@include verticalGradient(white, $beautifulHue);
}
.btn-b {
@include verticalGradient(white, lighten($beautifulHue, 30%));
}
@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;
}
}