xxxxxxxxxx
@mixin rtl($property, $ltr-value, $rtl-value) { // with argumens
#{$property}: $ltr-value;
[dir=rtl] & {
#{$property}: $rtl-value;
}
}
.sidebar {
@include rtl(float, left, right);
}
xxxxxxxxxx
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box { @include transform(rotate(30deg)); }
xxxxxxxxxx
@mixin reset-list { // Mixin without arguments
margin: 0;
padding: 0;
list-style: none;
}
@mixin horizontal-list {
@include reset-list;
li {
display: inline-block;
margin: {
left: -2px;
right: 2em;
}
}
}
nav ul {
@include horizontal-list;
}
xxxxxxxxxx
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
xxxxxxxxxx
@mixin reset-list {
margin: 0;
padding: 0;
list-style: none;
}
@mixin horizontal-list {
@include reset-list;
li {
display: inline-block;
margin: {
left: -2px;
right: 2em;
}
}
}
nav ul {
@include horizontal-list;
}
xxxxxxxxxx
// Define a mixin
@mixin myMixin {
color: #ff0000;
font-weight: bold;
}
// Use the mixin
.my-class {
@include myMixin;
}
// Output CSS
/* .my-class {
color: #ff0000;
font-weight: bold;
} */
scss sass mixin example
xxxxxxxxxx
// Set a default value
$default-padding: 10px;
@mixin pad($n: $default-padding) {
padding: $n;
}
body {
@include pad(15px);
}