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

Revisions

  1. kdooley89 revised this gist Jul 23, 2014. No changes.
  2. kdooley89 revised this gist Jul 23, 2014. 4 changed files with 57 additions and 29 deletions.
    3 changes: 2 additions & 1 deletion SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    <body>
    <div class="container">
    <h1>Some text here</h1>
    <h2>Subheader text</h2>

    @@ -19,5 +20,5 @@ <h2>Subheader text</h2>
    vitae, justo. Nullam dictum felis eu pede mollis
    pretium. Integer tincidunt.</li>
    </ul>

    </div>
    </body>
    45 changes: 31 additions & 14 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -5,7 +5,6 @@

    @import 'compass';


    //partials
    $blue: #3498db;
    $green: #27ae60;
    @@ -15,12 +14,26 @@ $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;
    @@ -32,30 +45,29 @@ $body-color: #7f8c8d;
    body{
    background:$grey;
    font-family: $default;
    margin-left: 15%;
    margin-right: 15%;
    margin-left: 10%;
    margin-right: 10%;
    color: $body-color;
    }

    h1,h2,h3,h4,h5,h6{
    font-family: $default;
    line-height: inherit;
    text-align: left;
    }

    h1{
    font-size:$large;
    @include thin;
    color: $blue;
    }

    h2{
    h2{
    font-size:$med;
    @include thin;
    color: $blue;
    }


    .container{
    min-width: 90%;
    padding-left: 10%;
    padding-right: 10%;
    }

    //list styles
    ul{
    margin-left:35px;
    @@ -72,24 +84,29 @@ ul{
    padding-left: 15px;
    padding-right: 15px;
    border: 1px solid $blue;
    @include border-radius(5px);
    @include border-radius($radius);
    @include center;
    max-width: 275px;
    background-color: transparent;
    min-width: 150px;
    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;
    }
    }
    }

    35 changes: 22 additions & 13 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -1,31 +1,27 @@
    body {
    background: #ecf0f1;
    font-family: "Source Sans Pro", arial, san-serif;
    margin-left: 15%;
    margin-right: 15%;
    margin-left: 10%;
    margin-right: 10%;
    color: #7f8c8d;
    }

    h1, h2, h3, h4, h5, h6 {
    font-family: "Source Sans Pro", arial, san-serif;
    line-height: inherit;
    text-align: left;
    }

    h1 {
    font-size: 3em;
    font-weight: 100;
    letter-spacing: -2px;
    color: #3498db;
    }

    h2 {
    font-size: 2em;
    font-weight: 100;
    letter-spacing: -2px;
    color: #3498db;
    }

    .container {
    min-width: 90%;
    padding-left: 10%;
    padding-right: 10%;
    }

    ul {
    margin-left: 35px;
    }
    @@ -44,12 +40,19 @@ ul li {
    -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;
    min-width: 150px;
    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 {
    @@ -60,14 +63,20 @@ ul li {
    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;
    }
    3 changes: 2 additions & 1 deletion SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,5 @@
    <body>
    <div class="container">
    <h1>Some text here</h1>
    <h2>Subheader text</h2>

    @@ -19,5 +20,5 @@ <h2>Subheader text</h2>
    vitae, justo. Nullam dictum felis eu pede mollis
    pretium. Integer tincidunt.</li>
    </ul>

    </div>
    </body>
  3. kdooley89 created this gist Jul 22, 2014.
    23 changes: 23 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    <body>
    <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>

    </body>
    95 changes: 95 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,95 @@
    // ----
    // 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;

    @mixin thin{
    font-weight:100;
    letter-spacing:-2px;
    }

    @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: 15%;
    margin-right: 15%;
    color: $body-color;
    }

    h1,h2,h3,h4,h5,h6{
    font-family: $default;
    line-height: inherit;
    text-align: left;
    }

    h1{
    font-size:$large;
    @include thin;
    color: $blue;
    }

    h2{
    font-size:$med;
    @include thin;
    color: $blue;
    }


    //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(5px);
    background-color: transparent;
    min-width: 150px;
    outline: none;
    font-size: $smll;
    color: $blue;
    text-decoration: none;
    }

    .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;
    }
    }
    73 changes: 73 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,73 @@
    body {
    background: #ecf0f1;
    font-family: "Source Sans Pro", arial, san-serif;
    margin-left: 15%;
    margin-right: 15%;
    color: #7f8c8d;
    }

    h1, h2, h3, h4, h5, h6 {
    font-family: "Source Sans Pro", arial, san-serif;
    line-height: inherit;
    text-align: left;
    }

    h1 {
    font-size: 3em;
    font-weight: 100;
    letter-spacing: -2px;
    color: #3498db;
    }

    h2 {
    font-size: 2em;
    font-weight: 100;
    letter-spacing: -2px;
    color: #3498db;
    }

    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;
    background-color: transparent;
    min-width: 150px;
    outline: none;
    font-size: 1.15em;
    color: #3498db;
    text-decoration: none;
    }

    .ghost-button:hover {
    color: white;
    background-color: #3498db;
    }

    h1 {
    font-size: 2em;
    color: #3498db;
    }

    h2 {
    font-size: 1.5em;
    color: #3498db;
    }

    h3 {
    font-size: 1.2em;
    color: #3498db;
    }
    23 changes: 23 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,23 @@
    <body>
    <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>

    </body>