Skip to content

Instantly share code, notes, and snippets.

@kirkas

kirkas/SassMeister-input-HTML.html

Created September 16, 2014 12:03
Download ZIP

Revisions

  1. kirkas created this gist Sep 16, 2014.
    21 changes: 21 additions & 0 deletions SassMeister-input-HTML.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    <table>
    <thead>
    <tr>
    <th class="selected">Nom</th>
    <th>Âge</th>
    <th>Pays</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Carmen</td>
    <td>33 ans</td>
    <td>Espagne</td>
    </tr>
    <tr>
    <td>Michelle</td>
    <td>26 ans</td>
    <td>États-Unis</td>
    </tr>
    </tbody>
    </table>
    144 changes: 144 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,144 @@
    // ----
    // Sass (v3.4.4)
    // Compass (v1.0.1)
    // ----

    /*------------------------------------*\
    VARIABLE
    \*------------------------------------*/
    $UI_sizing_ratio: 1.2;

    $UI_size: (
    tiny 1 / $UI_sizing_ratio / $UI_sizing_ratio,
    small 1 / $UI_sizing_ratio,
    regular 1,
    medium 1 * $UI_sizing_ratio,
    large 1 * $UI_sizing_ratio * $UI_sizing_ratio
    );

    $UI_state: (
    default #73C4F2,
    warning #FFAA4A,
    error #F51F21,
    success #00C55D
    );

    $base-font-size: 14px;
    $base-line-height: 1.57142857143;
    $base-radius: 3px;
    $button-radius: $base-radius;
    $form-radius: $base-radius;


    /*------------------------------------*\
    BASE
    \*------------------------------------*/
    html {
    box-sizing: border-box;
    }
    *, *:before, *:after {
    box-sizing: inherit;
    }

    html, body {
    font-family: DIN;
    font-weight: regular;
    font-size: $base-font-size;
    line-height: $base-line-height;
    }

    button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
    line-height: 1.57142857143;
    }


    /*------------------------------------*\
    MIXIN
    \*------------------------------------*/
    @function strip-unit($num) {
    @return $num / ($num * 0 + 1);
    }

    @mixin rem($property, $values...) {
    $max: length($values);
    $pxValues: '';
    $remValues: '';

    @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $pxValues: #{$pxValues + $value * $base-font-size};

    @if $i < $max {
    $pxValues: #{$pxValues + " "};
    }
    }

    @for $i from 1 through $max {
    $value: strip-unit(nth($values, $i));
    $remValues: #{$remValues + $value}rem;

    @if $i < $max {
    $remValues: #{$remValues + " "};
    }
    }

    #{$property}: $pxValues;
    #{$property}: $remValues;
    }

    @mixin mm($modifier, $extend-from-parent: false) {
    @at-root {
    $selector: nth(&, 1);
    $direct-parent: nth($selector, length($selector));
    @if $extend-from-parent == true {
    #{$direct-parent}--#{$modifier} { @extend #{$direct-parent}; }
    }
    #{&}--#{$modifier} { @content; }
    }
    }


    table {
    text-align: left;
    width: 100%;
    border: 2px solid #eee;
    border-collapse: collapse;

    thead {
    tr {
    background: #eee;
    th {
    font-size: 12px;
    line-height: 30px;
    height: 30px;
    padding: 0 12px;
    color: #727272;
    font-weight: normal;
    &.selected {
    font-weight: bold;
    }
    }
    }
    }


    tbody {
    tr {

    &:hover {
    background: #F6F6F6;
    }

    td {
    line-height: 40px;
    height: 40px;
    padding: 0 12px;
    }
    }
    }

    }

    59 changes: 59 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,59 @@
    /*------------------------------------*\
    VARIABLE
    \*------------------------------------*/
    /*------------------------------------*\
    BASE
    \*------------------------------------*/
    html {
    box-sizing: border-box;
    }

    *, *:before, *:after {
    box-sizing: inherit;
    }

    html, body {
    font-family: DIN;
    font-weight: regular;
    font-size: 14px;
    line-height: 1.57143;
    }

    button, input, optgroup, select, textarea {
    margin: 0;
    font: inherit;
    color: inherit;
    line-height: 1.57142857143;
    }

    /*------------------------------------*\
    MIXIN
    \*------------------------------------*/
    table {
    text-align: left;
    width: 100%;
    border: 2px solid #eee;
    border-collapse: collapse;
    }
    table thead tr {
    background: #eee;
    }
    table thead tr th {
    font-size: 12px;
    line-height: 30px;
    height: 30px;
    padding: 0 12px;
    color: #727272;
    font-weight: normal;
    }
    table thead tr th.selected {
    font-weight: bold;
    }
    table tbody tr:hover {
    background: #F6F6F6;
    }
    table tbody tr td {
    line-height: 40px;
    height: 40px;
    padding: 0 12px;
    }
    21 changes: 21 additions & 0 deletions SassMeister-rendered.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    <table>
    <thead>
    <tr>
    <th class="selected">Nom</th>
    <th>Âge</th>
    <th>Pays</th>
    </tr>
    </thead>
    <tbody>
    <tr>
    <td>Carmen</td>
    <td>33 ans</td>
    <td>Espagne</td>
    </tr>
    <tr>
    <td>Michelle</td>
    <td>26 ans</td>
    <td>États-Unis</td>
    </tr>
    </tbody>
    </table>