Skip to content

Instantly share code, notes, and snippets.

@erwstout

erwstout/SassMeister-input-HTML.html

Created April 1, 2015 02:34
Show Gist options
  • Save erwstout/3528cb23d3e831231949 to your computer and use it in GitHub Desktop.
Save erwstout/3528cb23d3e831231949 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="container">
<div class="row hero"></div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
.hero {
width: 100%;
height: 500px;
background: url('http://placesheen.com/1200/500') center center no-repeat;
background-size:cover;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 508px;
background-image: linear-gradient(rgba(255,255,255,0.2), rgba(255,255,255,1));
}
}
.container{
max-width: 900px;
margin: 0 auto;
height:800px;
}
Raw
SassMeister-output.css
.hero {
width: 100%;
height: 500px;
background: url("http://placesheen.com/1200/500") center center no-repeat;
background-size: cover;
}
.hero:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 508px;
background-image: linear-gradient(rgba(255, 255, 255, 0.2), white);
}
.container {
max-width: 900px;
margin: 0 auto;
height: 800px;
}
Raw
SassMeister-rendered.html
<div class="container">
<div class="row hero"></div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment