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