Skip to content

Instantly share code, notes, and snippets.

@Lobstrosity

Lobstrosity/SassMeister-input.scss

Created December 7, 2013 05:29
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Lobstrosity/7837619 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Lobstrosity/7837619 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Lobstrosity created this gist Dec 7, 2013.
    71 changes: 71 additions & 0 deletions SassMeister-input.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,71 @@
    // ----
    // Sass (v3.3.0.rc.1)
    // Compass (v0.13.alpha.10)
    // ----

    /* Modular syntax using the 3.3 at-root syntax. */
    .Component {
    border: 1px;

    @at-root #{&}-child {
    color: blue;
    }
    }

    // ...which is way too verbose.

    // Let's take a look at the ampersand:

    // This...

    /* Basic nesting */
    .outer {
    border: 1px;

    .nested {
    color: blue;
    }
    }

    // ...is basically just a shortcut for this...

    /* Basic nesting with an explicit ampersand */
    .outer {
    border: 1px;

    & .nested {
    color: blue;
    }
    }

    // I can chain by removing the space:

    /* Chained classes */
    .box {
    display: block;

    &.red {
    background: red;
    }
    }

    // So is there a good reason for them not to support modular
    // syntax by just allowing me to chain like this:

    // .Component {
    // border: 1px;
    //
    // &-child {
    // color: blue;
    // }
    // }

    // (Commented out since it's a syntax error.)

    // It's incredibly terse and makes the new syntax match
    // what developers are already accustomed to doing to
    // chain things together.

    // My question is, why do they care what character appears
    // immediately after the ampersand? Why not just let it
    // blindly chain?
    31 changes: 31 additions & 0 deletions SassMeister-output.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,31 @@
    /* Modular syntax using the 3.3 at-root syntax. */
    .Component {
    border: 1px;
    }
    .Component-child {
    color: blue;
    }

    /* Basic nesting */
    .outer {
    border: 1px;
    }
    .outer .nested {
    color: blue;
    }

    /* Basic nesting with an explicit ampersand */
    .outer {
    border: 1px;
    }
    .outer .nested {
    color: blue;
    }

    /* Chained classes */
    .box {
    display: block;
    }
    .box.red {
    background: red;
    }