Skip to content

Instantly share code, notes, and snippets.

@scottdavis

scottdavis/SassMeister-input-HTML.html

Forked from benjamincharity/SassMeister-input-HTML.html
Created November 13, 2013 15:41
Show Gist options
  • Save scottdavis/7451157 to your computer and use it in GitHub Desktop.
Save scottdavis/7451157 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="icon"></div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
@import "compass";
$color-white: #fff;
$cascading-preference-color: rgba($color-white, 0.6);
$bg-image: (url('/images/form.checkbox-check.svg'));
$bg-pattern: (
linear-gradient(
135deg,
transparent 20%,
$cascading-preference-color 20%,
$cascading-preference-color 40%,
transparent 40%,
transparent 70%,
$cascading-preference-color 70%,
$cascading-preference-color 90%,
transparent 90%
)
);
@mixin cascading-preference($checked:false) {
@include background-image(
if($checked, $bg-pattern, join($bg-image, $bg-pattern, comma))
)
}
.icon {
@include cascading-preference();
height: 100px;
width: 100px;
border: 1px solid blue;
}
Raw
SassMeister-output.css
.icon {
background-image: url("/images/form.checkbox-check.svg"), -moz-linear-gradient(315deg, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.6) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 70%, rgba(255, 255, 255, 0.6) 70%, rgba(255, 255, 255, 0.6) 90%, rgba(0, 0, 0, 0) 90%);
background-image: url("/images/form.checkbox-check.svg"), -o-linear-gradient(315deg, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.6) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 70%, rgba(255, 255, 255, 0.6) 70%, rgba(255, 255, 255, 0.6) 90%, rgba(0, 0, 0, 0) 90%);
background-image: url("/images/form.checkbox-check.svg"), -webkit-linear-gradient(315deg, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.6) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 70%, rgba(255, 255, 255, 0.6) 70%, rgba(255, 255, 255, 0.6) 90%, rgba(0, 0, 0, 0) 90%);
background-image: url("/images/form.checkbox-check.svg"), linear-gradient(135deg, rgba(0, 0, 0, 0) 20%, rgba(255, 255, 255, 0.6) 20%, rgba(255, 255, 255, 0.6) 40%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0) 70%, rgba(255, 255, 255, 0.6) 70%, rgba(255, 255, 255, 0.6) 90%, rgba(0, 0, 0, 0) 90%);
height: 100px;
width: 100px;
border: 1px solid blue;
}
Raw
SassMeister-rendered.html
<div class="icon"></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment