Skip to content

Instantly share code, notes, and snippets.

@czajkovsky

czajkovsky/SassMeister-input-HTML.haml

Created August 7, 2014 13:50
Show Gist options
  • Save czajkovsky/c7533e9832bbbe8bd45f to your computer and use it in GitHub Desktop.
Save czajkovsky/c7533e9832bbbe8bd45f to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.haml
.avatar
%img{ src: 'http://i.imgur.com/IK8SdW2.jpg?1' }
.avatar__overlay
%a.avatar__link{ href: '#' }
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.0.rc.3)
// Compass (v1.0.0.rc.1)
// ----
.avatar {
position: relative;
width: 140px;
height: 140px;
&__overlay, &__link {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
&__overlay { background: rgba(#000, .3); }
}
Raw
SassMeister-output.css
.avatar {
position: relative;
width: 140px;
height: 140px;
}
.avatar__overlay, .avatar__link {
height: 100%;
width: 100%;
top: 0;
left: 0;
position: absolute;
}
.avatar__overlay {
background: rgba(0, 0, 0, 0.3);
}
Raw
SassMeister-rendered.html
<div class='avatar'>
<img src='http://i.imgur.com/IK8SdW2.jpg?1'>
<div class='avatar__overlay'></div>
<a class='avatar__link' href='#'></a>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment