Skip to content

Instantly share code, notes, and snippets.

@sjdeere

sjdeere/SassMeister-input-HTML.html

Forked from CheetoMao/SassMeister-input-HTML.html
Created August 24, 2016 14:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save sjdeere/0497c88b7d0ff297ca44614225f92120 to your computer and use it in GitHub Desktop.
Save sjdeere/0497c88b7d0ff297ca44614225f92120 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<body>
<div class="base">Base Color</div>
<div class="secondary">Adjust Hue 120</div>
<div class="tertiary">Adjust Hue 240</div>
</body>
Raw
SassMeister-input.scss
// ----
// Sass (v3.4.4)
// Compass (v1.0.1)
// ----
$base-color: #e74c3c;
$secondary-color: adjust-hue($base-color, 120%);
$tertiary-color: adjust-hue( $base-color, 240% );
body { background: #E0E0E0; }
div {
border: 2px solid #FFF;
color: white;
float: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;;
height: 100px;
margin: 0 2px;
padding: 2rem;
text-align: center;
width: 100px;
&.base {
background: $base-color;
}
&.secondary {
background: $secondary-color;
}
&.tertiary {
background: $tertiary-color;
}
}
Raw
SassMeister-output.css
body {
background: #E0E0E0;
}
div {
border: 2px solid #FFF;
color: white;
float: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
height: 100px;
margin: 0 2px;
padding: 2rem;
text-align: center;
width: 100px;
}
div.base {
background: #e74c3c;
}
div.secondary {
background: #3ce74c;
}
div.tertiary {
background: #4c3ce7;
}
Raw
SassMeister-rendered.html
<body>
<div class="base">Base Color</div>
<div class="secondary">Adjust Hue 120</div>
<div class="tertiary">Adjust Hue 240</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment