Skip to content

Instantly share code, notes, and snippets.

@websanya

websanya/SassMeister-input-HTML.html

Created June 2, 2014 08:48
Show Gist options
  • Save websanya/c09bafc7e23fcea6a3f0 to your computer and use it in GitHub Desktop.
Save websanya/c09bafc7e23fcea6a3f0 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<a>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima enim magni eos nesciunt. Officia rem qui nisi quam delectus tempora possimus. Dicta, ratione, eligendi aliquid sit sapiente dolorum maxime nihil!</a>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.7)
// Compass (v1.0.0.alpha.18)
// ----
@import "compass/css3";
body {
font-size: 58px;
line-height: 66px;
font-weight: 100;
font-family: Helvetica, sans-serif;
}
a {
text-decoration: none;
cursor: pointer;
&:hover {
@include background(linear-gradient(top, rgba(0,0,0,0) 50%, rgba(0,0,0,.6) 50%));
background-repeat: repeat-x;
background-size: 2px 2px;
background-position: 0px 58px;
}
}
Raw
SassMeister-output.css
body {
font-size: 58px;
line-height: 66px;
font-weight: 100;
font-family: Helvetica, sans-serif;
}
a {
text-decoration: none;
cursor: pointer;
}
a:hover {
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 50%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 50%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.6) 50%);
background-repeat: repeat-x;
background-size: 2px 2px;
background-position: 0px 58px;
}
Raw
SassMeister-rendered.html
<a>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima enim magni eos nesciunt. Officia rem qui nisi quam delectus tempora possimus. Dicta, ratione, eligendi aliquid sit sapiente dolorum maxime nihil!</a>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment