Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Generated by SassMeister.com.
<div class="foo">
<p>Lorum Ipsum</p>
</div>
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// Bourbon (v4.2.0)
// Include Media (v1.1.2)
// ----
@import "include-media";
@import "bourbon/bourbon";
$white: #fff;
$light_gray2: #eaeaea;
$light_gray: #ccc;
$medium_gray: #999;
$medium_gray2: #666;
$charcoal_gray: #333;
$dark_gray: #202020;
$black: #000;
$olive_green: #6a8500;
$pink: #b72898;
$purple: #491f70;
$purple_light: #b58dd9;
$purple_accent: #7629bd;
body {
font-family: verdana;
}
.foo {
padding: 2%;
color: $white;
background-color: #eaeaea;
border: 1px dotted #ccc;
@include linear-gradient(150deg, $charcoal_gray 0%, $dark_gray 0, $medium_gray2 51%, $medium_gray2 100%);
@include media(">phone", "<=980px") {
color: #333;
@include linear-gradient(30deg, $purple_light 8%, $olive_green 0, $pink 22%, $medium_gray2 100%);
}
p {
font-size: 2rem;
}
}
body {
font-family: verdana;
}
.foo {
padding: 2%;
color: #fff;
background-color: #eaeaea;
border: 1px dotted #ccc;
background-color: #333;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #333), color-stop(0, #202020), color-stop(51%, #666), color-stop(100%, #666));
background-image: -webkit-linear-gradient(-420deg, #333 0%, #202020 0, #666 51%, #666 100%);
background-image: linear-gradient(150deg,#333 0%, #202020 0, #666 51%, #666 100%);
}
@media (min-width: 321px) and (max-width: 980px) {
.foo {
color: #333;
background-color: #b58dd9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(8%, #b58dd9), color-stop(0, #6a8500), color-stop(22%, #b72898), color-stop(100%, #666));
background-image: -webkit-linear-gradient(-300deg, #b58dd9 8%, #6a8500 0, #b72898 22%, #666 100%);
background-image: linear-gradient(30deg,#b58dd9 8%, #6a8500 0, #b72898 22%, #666 100%);
}
}
.foo p {
font-size: 2rem;
}
<div class="foo">
<p>Lorum Ipsum</p>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment