//asfdasdf @mixin font-settings { font-family: arial; font-size: 16px; font-weight: bold; } @mixin rounded-borders ($thickness, $radius : 3px) { border: $thickness solid black; -webkit-border-radius: $radius; -moz-border-radius: $radius; border-radius: $radius; } $mixinVar : 1px; .main { @include rounded-borders($mixinVar); @include font-settings; @include main-details(14px); } .footer { @include rounded-borders(2px, 10px); } @mixin layout { .header { width: 100%; } .main { width: 100%; height: 100%; } .footer { width: 100%; } @media print { .v-view { overflow: visible; } } @include font-settings; } @mixin main-details($size){ .details { font: { size : $size; weight: bold; } } } .banner { @include fontType(1px solid black, $color : red); } @mixin fontType($border : 2px solid red, $color : black){ border : $border; font-color: $color; } @include interpolation(interpolation); @mixin interpolation($interpolation){ .#{$interpolation}-test { font-size: 14px; } } $layoutVariable : layout; @include $layoutVariable; @mixin parent($color : green, $name : default) { .#{$name}-inner { color: $color; } } .default { @include parent; } .custom { @include parent($name : custom); }