one of the benefits is to be able to create variables to make global changes easy
$primary: variableValue
make css more modular and scalable
you can cut pieces of the code and piece them by importing
@import footer
_footer.js
Back
mixin
Front
@mixin mobile {
@media (min-width: #{$narrow-width}) and (max-width: #{$mobile-width}){
@content;
}
}
Back
mixing
Front
@include narrow{
width:100px;
font-size: 14px;
}
Back
mixins
Front
used when need to store multiple variables.
at@css @mixin
in @scass use equal sign
=border-radius($radius){
-webkit-border-radius: radius
-ms-border-radius: radius
border-radius: radius
}
body
+border-radius(10px)