zig Tryit Editor

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>