Skip to content

Instantly share code, notes, and snippets.

@scheibome

scheibome/SassMeister-input-HTML.html

Last active August 29, 2015 14:10
Show Gist options
  • Save scheibome/bd818a8eed5f902744c6 to your computer and use it in GitHub Desktop.
Save scheibome/bd818a8eed5f902744c6 to your computer and use it in GitHub Desktop.
Download ZIP
Beschreibung von Klassen im scss
Raw
SassMeister-input-HTML.html
<h1 class="header">Heading</h1>
<!-- modified -->
<h1 class="header header--borderbottom">Heading</h1>
<h1 class="header header--paddingleft">Heading</h1>
<!-- inner Element -->
<h1 class="header">
<span class="header__linenumber">1.</span>
Heading
</h1>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.7)
// Compass (v1.0.1)
// ----
.header {
font-size: 2rem;
background-color: #cccccc;
&--borderbottom {
border-bottom: 1px solid red;
}
&--paddingleft {
padding-left: 25px;
}
&__linenumber {
background-color: green;
padding-right: 10px;
}
}
Raw
SassMeister-output.css
.header {
font-size: 2rem;
background-color: #cccccc;
}
.header--borderbottom {
border-bottom: 1px solid red;
}
.header--paddingleft {
padding-left: 25px;
}
.header__linenumber {
background-color: green;
padding-right: 10px;
}
Raw
SassMeister-rendered.html
<h1 class="header">Heading</h1>
<!-- modified -->
<h1 class="header header--borderbottom">Heading</h1>
<h1 class="header header--paddingleft">Heading</h1>
<!-- inner Element -->
<h1 class="header">
<span class="header__linenumber">1.</span>
Heading
</h1>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment