mystyle.scss
mystyle.css
mypage.html
/* Define mixin with two arguments */
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue, 1px); // Call mixin with two values
}
.myNotes {
@include bordered(red, 2px); // Call mixin with two values
}
.myArticle {
border: 1px solid blue;
}
.myNotes {
border: 2px solid red;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="mystyle.css">
<body>
<h1>Hello World</h1>
<p class="myArticle">This is some text in my article.</p>
<p class="myNotes">This is some text in my notes.</p>
</body>
</html>