Skip to content

Instantly share code, notes, and snippets.

@bradrice

bradrice/SassMeister-input-HTML.html

Last active August 29, 2015 14:20
Show Gist options
  • Save bradrice/8384673a125b747aa91e to your computer and use it in GitHub Desktop.
Save bradrice/8384673a125b747aa91e to your computer and use it in GitHub Desktop.
Download ZIP
Image replacement extend placeholder
Raw
SassMeister-input-HTML.html
<div class="header">
<div class="logo"><h1 class="title ir">h1.title</h1></div>
<div class="navigation"><p>navigation goes here</p></div>
<div class="social"></div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.13)
// Compass (v1.0.3)
// ----
%ir {
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: transparent;
}
.logo {
@extend %ir;
background-image: url(http://i.imgur.com/yYnyJ.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
width: 200px;
height: 200px;
}
.social {
@extend %ir;
background-image: url(http://i.imgur.com/yYnyJ.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
Raw
SassMeister-output.css
.logo, .social {
border: 0;
font: 0/0 a;
text-shadow: none;
color: transparent;
background-color: transparent;
}
.logo {
background-image: url(http://i.imgur.com/yYnyJ.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
width: 200px;
height: 200px;
}
.social {
background-image: url(http://i.imgur.com/yYnyJ.jpg);
background-size: 100% auto;
background-repeat: no-repeat;
width: 100px;
height: 100px;
}
Raw
SassMeister-rendered.html
<div class="header">
<div class="logo"><h1 class="title ir">h1.title</h1></div>
<div class="navigation"><p>navigation goes here</p></div>
<div class="social"></div>
</div>
@bradrice
Copy link
Author

bradrice commented May 5, 2015

http://sassmeister.com/gist/bradrice/8384673a125b747aa91e

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment