Generated by SassMeister.com.

SassMeister-input-HTML.html

<a>testetest</a>
<div>test</div>
<ul>
  <li class='top'>gggg</li>
  <li>第2個</li>
</ul>

SassMeister-input.scss

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


/*第一階段*/
$link-color:red;
$font-size:20px;
a{
  color:$link-color;
  font-size:$font-size;
}

div{
  color:$link-color;
  font-size:$font-size;
}

/*巢狀迴圈階段*/
ul{
  margin:10px;
  li{
    padding:$font-size;
    &.top{
      padding-left:300px;
    }
  }
}

SassMeister-output.css

@charset "UTF-8";
/*第一階段*/
a {
  color: red;
  font-size: 20px;
}

div {
  color: red;
  font-size: 20px;
}

/*巢狀迴圈階段*/
ul {
  margin: 10px;
}

ul li {
  padding: 20px;
}

ul li.top {
  padding-left: 300px;
}

SassMeister-rendered.html

<a>testetest</a>
<div>test</div>
<ul>
  <li class='top'>gggg</li>
  <li>第2個</li>
</ul>