W3Schools 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>