Skip to content

Instantly share code, notes, and snippets.

@widescreenBob

widescreenBob/SassMeister-input-HTML.html

Created July 1, 2015 16:11
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save widescreenBob/829d342f64c62d6915b1 to your computer and use it in GitHub Desktop.
Save widescreenBob/829d342f64c62d6915b1 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<body>
aflkafja
<div class="pants"> <a href="#">One</a>
</div>
</body>
Raw
SassMeister-input.scss
// ----
// libsass (v3.2.5)
// ----
$font-icons: 'icons';
///icon-font key
///icon-font key
$fonticons: (
download: "\0041",
facebook: "\0042",
tumblr: "\0043",
twitter: "\0044",
hamburger: "\0045",
search: "\0046",
more-arrow: "\0047",
mail: "\0048",
);
/// example class created .icon-facebook
@each $name, $icon in $fonticons {
.icon-#{$name}:before {
font-family: $font-icons;
content: $icon;
}
}
.pants{
@extend.icon-facebook;
color: red;
}
Raw
SassMeister-output.css
.icon-download:before {
font-family: "icons";
content: "A";
}
.icon-facebook:before, .pants:before {
font-family: "icons";
content: "B";
}
.icon-tumblr:before {
font-family: "icons";
content: "C";
}
.icon-twitter:before {
font-family: "icons";
content: "D";
}
.icon-hamburger:before {
font-family: "icons";
content: "E";
}
.icon-search:before {
font-family: "icons";
content: "F";
}
.icon-more-arrow:before {
font-family: "icons";
content: "G";
}
.icon-mail:before {
font-family: "icons";
content: "H";
}
.pants {
color: red;
}
Raw
SassMeister-rendered.html
<body>
aflkafja
<div class="pants"> <a href="#">One</a>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment