Generated by SassMeister.com.

SassMeister-input-HTML.html

<div class="group">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</div>

SassMeister-input.scss

// ----
// libsass (v3.2.5)
// ----

/*
 * Clearfix
 */
.group {
  &:before, &:after {
    content: "";
    display: table;
    clear: both;
  }
  max-width: 65em;
  margin: 0 auto;
}

/*
 * Khai báo đối tượng
 * %box
 */
%box {
  width: 25%;
  height: 150px;
  float: left;
}

/*
 * Sử dụng đối tượng
 */
.box1 {
  background: red;
  @extend %box;
}
.box2 {
  @extend %box;
  background: blue;
}
.box3 {
  @extend %box;
  background: green;
}
.box4 {
  @extend %box;
  background: black;
}

SassMeister-output.css

@charset "UTF-8";
/*
 * Clearfix
 */
.group {
  max-width: 65em;
  margin: 0 auto;
}

.group:before, .group:after {
  content: "";
  display: table;
  clear: both;
}

/*
 * Khai báo đối tượng
 * %box
 */
.box1, .box2, .box3, .box4 {
  width: 25%;
  height: 150px;
  float: left;
}

/*
 * Sử dụng đối tượng
 */
.box1 {
  background: red;
}

.box2 {
  background: blue;
}

.box3 {
  background: green;
}

.box4 {
  background: black;
}

SassMeister-rendered.html

<div class="group">
  <div class="box1"></div>
  <div class="box2"></div>
  <div class="box3"></div>
  <div class="box4"></div>
</div>