Skip to content

Instantly share code, notes, and snippets.

@thedaviddias

thedaviddias/SassMeister-input-HTML.html

Created March 5, 2015 12:43
Show Gist options
  • Save thedaviddias/d6d9f69b1946a119a18f to your computer and use it in GitHub Desktop.
Save thedaviddias/d6d9f69b1946a119a18f to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<div class="column1">
<div class="block">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="block1">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="block2">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="block3">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="block4">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div class="column2">
<div class="block">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="block1">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="block2">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="block3">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="block4">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.12)
// Compass (v1.0.3)
// ----
$color: #40c6bf;
.column1,
.column2 {
width: 40%;
float: left;
margin-right: 10px;
}
.column1 {
.block {
background-color: scale-lightness($color, 87%);
}
.block1 {
background-color: scale-lightness($color, 66.4%);
}
.block2 {
background-color: $color;
}
.block3 {
background-color: $color;
}
.block4 {
background-color: scale-lightness(saturate($color, 50%), -49%);
}
}
.column2 {
//- primary-dark
.block {
background-color: #e6f8f7;
}
.block1 {
background-color: #bfece9;
}
//- primary
.block2 {
background-color: $color;
}
// primary-dark
.block3 {
background-color: #00b3a8;
}
// primary-darker
.block4 {
background-color: #00867f;
}
}
Raw
SassMeister-output.css
.column1,
.column2 {
width: 40%;
float: left;
margin-right: 10px;
}
.column1 .block {
background-color: #e6f8f7;
}
.column1 .block1 {
background-color: #bfece9;
}
.column1 .block2 {
background-color: #40c6bf;
}
.column1 .block3 {
background-color: #40c6bf;
}
.column1 .block4 {
background-color: #00867f;
}
.column2 .block {
background-color: #e6f8f7;
}
.column2 .block1 {
background-color: #bfece9;
}
.column2 .block2 {
background-color: #40c6bf;
}
.column2 .block3 {
background-color: #00b3a8;
}
.column2 .block4 {
background-color: #00867f;
}
Raw
SassMeister-rendered.html
<div class="column1">
<div class="block">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="block1">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="block2">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="block3">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="block4">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
<div class="column2">
<div class="block">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="block1">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="block2">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="block3">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
<div class="block4">
<br>
<br>
<br>
<br>
<br>
<br>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment