Skip to content

Instantly share code, notes, and snippets.

@jakemhiller

jakemhiller/SassMeister-input-HTML.html

Created November 18, 2015 18:50
Show Gist options
  • Save jakemhiller/b5403cfd23409dfdb97e to your computer and use it in GitHub Desktop.
Save jakemhiller/b5403cfd23409dfdb97e to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<span class="mint mint-100"></span>
<span class="mint mint-200"></span>
<span class="mint mint-300"></span>
<span class="mint mint-400"></span>
<span class="mint mint-500"></span>
<span class="mint mint-600"></span>
<span class="mint mint-700"></span>
<span class="mint mint-800"></span>
<span class="mint mint-900"></span>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
.fcn-button {
background-color: red;
}
.fcn-button.fcn-button--blue {
background: blue;
}
.fcn-button.fcn-button--green {
background: green;
}
.WRAPPER {
display: flex;
position: relative;
.CHILD {
@extend .fcn-button;
position: absolute;
}
}
Raw
SassMeister-output.css
.fcn-button, .WRAPPER .CHILD {
background-color: red;
}
.fcn-button.fcn-button--blue, .WRAPPER .fcn-button--blue.CHILD {
background: blue;
}
.fcn-button.fcn-button--green, .WRAPPER .fcn-button--green.CHILD {
background: green;
}
.WRAPPER {
display: flex;
position: relative;
}
.WRAPPER .CHILD {
position: absolute;
}
Raw
SassMeister-rendered.html
<span class="mint mint-100"></span>
<span class="mint mint-200"></span>
<span class="mint mint-300"></span>
<span class="mint mint-400"></span>
<span class="mint mint-500"></span>
<span class="mint mint-600"></span>
<span class="mint mint-700"></span>
<span class="mint mint-800"></span>
<span class="mint mint-900"></span>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment