Skip to content

Instantly share code, notes, and snippets.

@mechanicalduck
Created October 13, 2014 20:10
Show Gist options
  • Select an option

  • Save mechanicalduck/353f52cf604bff4668f4 to your computer and use it in GitHub Desktop.

Select an option

Save mechanicalduck/353f52cf604bff4668f4 to your computer and use it in GitHub Desktop.
Generated by SassMeister.com.
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="test no_shorthand"></div>
<div class="test with_shorthand"></div>
</body>
</html>
// ----
// Sass (v3.4.5)
// Compass (v1.0.1)
// ----
div.test {
background-size: cover;
width: 200px;
height: 200px;
margin: 10px;
border: red solid thin;
}
div.no_shorthand {
// background: transparent url(http://lh6.ggpht.com/_Oijhf1ZPv-4/TR6iM8J0KrI/AAAAAAAABy4/RCZ8Eg567LM/s400/tiger.png) center center no-repeat;
background-image: linear-gradient(transparent, transparent), url(http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg);
}
div.with_shorthand {
// background: transparent url(http://lh6.ggpht.com/_Oijhf1ZPv-4/TR6iM8J0KrI/AAAAAAAABy4/RCZ8Eg567LM/s400/tiger.png) center center no-repeat;
background-image: linear-gradient(transparent, transparent), url(http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg) center center no-repeat;
background-size: cover;
width: 200px;
height: 200px;
}
div.test {
background-size: cover;
width: 200px;
height: 200px;
margin: 10px;
border: red solid thin;
}
div.no_shorthand {
background-image: linear-gradient(transparent, transparent), url(http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg);
}
div.with_shorthand {
background-image: linear-gradient(transparent, transparent), url(http://blog.millermedeiros.com/wp-content/uploads/2010/04/awesome_tiger.svg) center center no-repeat;
background-size: cover;
width: 200px;
height: 200px;
}
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="test no_shorthand"></div>
<div class="test with_shorthand"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment