Skip to content

Instantly share code, notes, and snippets.

@syahrasi

syahrasi/SassMeister-input-HTML.haml

Created January 14, 2014 03:24
Show Gist options
  • Save syahrasi/8412503 to your computer and use it in GitHub Desktop.
Save syahrasi/8412503 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.haml
- 20.times do |i|
%div{:class => "box box-#{i + 1}"}
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.0.rc.2)
// Compass (v1.0.0.alpha.17)
// ----
$colors: (
turquoise #1abc9c
emerald #2ecc71
peter_river #3498db
amethyst #9b59b6
wet_asphalt #34495e
green_sea #16a085
nephritis #27ae60
belize_hole #2980b9
wisteria #8e44ad
midnight_blue #2c3e50
sun_flower #f1c40f
carrot #e67e22
alizarin #e74c3c
clouds #ecf0f1
concrete #95a5a6
orange #f39c12
pumpkin #d35400
pomegranate #c0392b
silver #bdc3c7
asbestos #7f8c8d
);
body {
margin: 0;
}
.box {
float: left;
width: 20%;
height: 100px;
margin: 0;
}
@for $i from 1 through 20 {
.box-#{$i} {
position: relative;
color: white;
$color-index: $i * 2;
$color: nth($colors, $color-index);
background-color: $color;
&:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(black, 0.2);
display: block;
content: "#{nth($colors, $color-index - 1)}";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
};
}
Raw
SassMeister-output.css
body {
margin: 0;
}
.box {
float: left;
width: 20%;
height: 100px;
margin: 0;
}
.box-1 {
position: relative;
color: white;
background-color: #1abc9c;
}
.box-1:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "turquoise";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-2 {
position: relative;
color: white;
background-color: #2ecc71;
}
.box-2:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "emerald";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-3 {
position: relative;
color: white;
background-color: #3498db;
}
.box-3:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "peter_river";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-4 {
position: relative;
color: white;
background-color: #9b59b6;
}
.box-4:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "amethyst";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-5 {
position: relative;
color: white;
background-color: #34495e;
}
.box-5:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "wet_asphalt";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-6 {
position: relative;
color: white;
background-color: #16a085;
}
.box-6:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "green_sea";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-7 {
position: relative;
color: white;
background-color: #27ae60;
}
.box-7:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "nephritis";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-8 {
position: relative;
color: white;
background-color: #2980b9;
}
.box-8:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "belize_hole";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-9 {
position: relative;
color: white;
background-color: #8e44ad;
}
.box-9:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "wisteria";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-10 {
position: relative;
color: white;
background-color: #2c3e50;
}
.box-10:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "midnight_blue";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-11 {
position: relative;
color: white;
background-color: #f1c40f;
}
.box-11:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "sun_flower";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-12 {
position: relative;
color: white;
background-color: #e67e22;
}
.box-12:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "carrot";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-13 {
position: relative;
color: white;
background-color: #e74c3c;
}
.box-13:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "alizarin";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-14 {
position: relative;
color: white;
background-color: #ecf0f1;
}
.box-14:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "clouds";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-15 {
position: relative;
color: white;
background-color: #95a5a6;
}
.box-15:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "concrete";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-16 {
position: relative;
color: white;
background-color: #f39c12;
}
.box-16:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "orange";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-17 {
position: relative;
color: white;
background-color: #d35400;
}
.box-17:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "pumpkin";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-18 {
position: relative;
color: white;
background-color: #c0392b;
}
.box-18:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "pomegranate";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-19 {
position: relative;
color: white;
background-color: #bdc3c7;
}
.box-19:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "silver";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
.box-20 {
position: relative;
color: white;
background-color: #7f8c8d;
}
.box-20:after {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translateY(-50%);
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.2);
display: block;
content: "asbestos";
text-align: center;
padding: 10px;
border-radius: 20px;
font-family: sans;
font-size: 0.8em;
}
Raw
SassMeister-rendered.html
<div class='box box-1'></div>
<div class='box box-2'></div>
<div class='box box-3'></div>
<div class='box box-4'></div>
<div class='box box-5'></div>
<div class='box box-6'></div>
<div class='box box-7'></div>
<div class='box box-8'></div>
<div class='box box-9'></div>
<div class='box box-10'></div>
<div class='box box-11'></div>
<div class='box box-12'></div>
<div class='box box-13'></div>
<div class='box box-14'></div>
<div class='box box-15'></div>
<div class='box box-16'></div>
<div class='box box-17'></div>
<div class='box box-18'></div>
<div class='box box-19'></div>
<div class='box box-20'></div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment