Skip to content

Instantly share code, notes, and snippets.

@kdooley89

kdooley89/SassMeister-input-HTML.html

Created July 22, 2014 15:01
Show Gist options
  • Save kdooley89/8ec4c0d40116de87d8f6 to your computer and use it in GitHub Desktop.
Save kdooley89/8ec4c0d40116de87d8f6 to your computer and use it in GitHub Desktop.
Download ZIP
Generated by SassMeister.com.
Raw
SassMeister-input-HTML.html
<body>
<div class="container">
<h1>Some text here</h1>
<h2>Subheader text</h2>
<a href="#" class="ghost-button">WAOHHHHH ghost button</a>
<br>
<br>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean
massa.</li>
<li>Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec quam
felis, ultricies nec, pellentesque eu, pretium quis,
sem.</li>
<li>Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu.</li>
<li>In enim justo, rhoncus ut, imperdiet a, venenatis
vitae, justo. Nullam dictum felis eu pede mollis
pretium. Integer tincidunt.</li>
</ul>
</div>
</body>
Raw
SassMeister-input.scss
// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----
@import 'compass';
//partials
$blue: #3498db;
$green: #27ae60;
$grey: #ecf0f1;
$default: 'Source Sans Pro',arial, san-serif;
$large: 3em;
$med: 2em;
$smll: 1.15em;
$body-color: #7f8c8d;
$radius: 5px;
@mixin center{
margin-left:auto;
margin-right:auto;
display: block;
}
@mixin thin{
font-weight:100;
letter-spacing:-2px;
}
@mixin ease{
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
-moz-border-radius: $radius;
-ms-border-radius: $radius;
border-radius: $radius;
}
body{
background:$grey;
font-family: $default;
margin-left: 10%;
margin-right: 10%;
color: $body-color;
}
h1{
font-size:$large;
color: $blue;
}
h2{
font-size:$med;
color: $blue;
}
.container{
min-width: 90%;
padding-left: 10%;
padding-right: 10%;
}
//list styles
ul{
margin-left:35px;
li{
max-width: 80%;
padding-bottom:15px;
}
}
//buttons
.ghost-button{
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
border: 1px solid $blue;
@include border-radius($radius);
@include center;
max-width: 275px;
background-color: transparent;
outline: none;
font-size: $smll;
color: $blue;
text-decoration: none;
@include ease;
}
.ghost-button:hover{
color:white;
background-color:$blue;
}
@each $header, $size in (h1: 2em, h2: 1.5em, h3: 1.2em) {
#{$header} {
font-size: $size;
color: $blue;
@include thin;
}
}
Raw
SassMeister-output.css
body {
background: #ecf0f1;
font-family: "Source Sans Pro", arial, san-serif;
margin-left: 10%;
margin-right: 10%;
color: #7f8c8d;
}
h1 {
font-size: 3em;
color: #3498db;
}
h2 {
font-size: 2em;
color: #3498db;
}
.container {
min-width: 90%;
padding-left: 10%;
padding-right: 10%;
}
ul {
margin-left: 35px;
}
ul li {
max-width: 80%;
padding-bottom: 15px;
}
.ghost-button {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 15px;
padding-right: 15px;
border: 1px solid #3498db;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
margin-left: auto;
margin-right: auto;
display: block;
max-width: 275px;
background-color: transparent;
outline: none;
font-size: 1.15em;
color: #3498db;
text-decoration: none;
-webkit-transition: all 300ms ease;
-moz-transition: all 300ms ease;
-o-transition: all 300ms ease;
transition: all 300ms ease;
}
.ghost-button:hover {
color: white;
background-color: #3498db;
}
h1 {
font-size: 2em;
color: #3498db;
font-weight: 100;
letter-spacing: -2px;
}
h2 {
font-size: 1.5em;
color: #3498db;
font-weight: 100;
letter-spacing: -2px;
}
h3 {
font-size: 1.2em;
color: #3498db;
font-weight: 100;
letter-spacing: -2px;
}
Raw
SassMeister-rendered.html
<body>
<div class="container">
<h1>Some text here</h1>
<h2>Subheader text</h2>
<a href="#" class="ghost-button">WAOHHHHH ghost button</a>
<br>
<br>
<ul>
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean
massa.</li>
<li>Cum sociis natoque penatibus et magnis dis
parturient montes, nascetur ridiculus mus. Donec quam
felis, ultricies nec, pellentesque eu, pretium quis,
sem.</li>
<li>Nulla consequat massa quis enim. Donec pede justo,
fringilla vel, aliquet nec, vulputate eget, arcu.</li>
<li>In enim justo, rhoncus ut, imperdiet a, venenatis
vitae, justo. Nullam dictum felis eu pede mollis
pretium. Integer tincidunt.</li>
</ul>
</div>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment