Skip to content

Instantly share code, notes, and snippets.

@alecperkins

alecperkins/abstract_component.scss

Last active August 29, 2015 14:07
Show Gist options

  • Select an option

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

Select an option

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

Revisions

  1. alecperkins revised this gist Oct 10, 2014. 1 changed file with 14 additions and 0 deletions.
    14 changes: 14 additions & 0 deletions sample_markup.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,14 @@
    <div class="ProductShowcase">
    <img class="_Image" src="...">
    <p class="_Description">...</p>
    </div>

    <div class="TeamMemberProfile -featured">
    <img class="_Image" src="...">
    <p class="_Description">...</p>
    </div>

    <div class="TeamMemberProfile">
    <img class="_Image" src="...">
    <p class="_Description">...</p>
    </div>
  2. alecperkins revised this gist Oct 10, 2014. 4 changed files with 0 additions and 0 deletions.
    0 gistfile4.scss → abstract_component.scss
    View file
    File renamed without changes.
    0 gistfile2.sass → input.sass
    View file
    File renamed without changes.
    0 gistfile1.scss → input.scss
    View file
    File renamed without changes.
    0 gistfile3.css → output.css
    View file
    File renamed without changes.
  3. alecperkins revised this gist Oct 10, 2014. 3 changed files with 3 additions and 3 deletions.
    2 changes: 1 addition & 1 deletion gistfile1.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -3,7 +3,7 @@
    }
    .TeamMemberProfile {
    @include extend(Highlight, image left);
    &:first-child {
    &.-featured {
    @include extend-variants(Highlight, large);
    }
    }
    2 changes: 1 addition & 1 deletion gistfile2.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -3,5 +3,5 @@

    .TeamMemberProfile
    +extend(Highlight, image left)
    &:first-child
    &.-featured
    +extend-variants(Highlight, large)
    2 changes: 1 addition & 1 deletion gistfile3.css
    View file
    Original file line number Diff line number Diff line change
    @@ -8,7 +8,7 @@
    .TeamMemberProfile ._Image {
    float: left;
    }
    .TeamMemberProfile:first-child {
    .TeamMemberProfile.-featured {
    font-size: 18px;
    }
    .ProductShowcase {
  4. alecperkins revised this gist Oct 10, 2014. 1 changed file with 21 additions and 0 deletions.
    21 changes: 21 additions & 0 deletions gistfile4.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,21 @@
    %Highlight {
    color: black;
    font-size: 14px;
    &%-image--right {
    ._Image {
    float: right;
    }
    }
    &%-image--left {
    ._Image {
    float: left;
    }
    }
    &%-large {
    font-size: 18px;
    }
    &%-dark {
    background: black;
    color: white;
    }
    }
  5. alecperkins created this gist Oct 10, 2014.
    9 changes: 9 additions & 0 deletions gistfile1.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,9 @@
    .ProductShowcase {
    @include extend(Highlight, dark, image right);
    }
    .TeamMemberProfile {
    @include extend(Highlight, image left);
    &:first-child {
    @include extend-variants(Highlight, large);
    }
    }
    7 changes: 7 additions & 0 deletions gistfile2.sass
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,7 @@
    .ProductShowcase
    +extend(Highlight, dark, image right)

    .TeamMemberProfile
    +extend(Highlight, image left)
    &:first-child
    +extend-variants(Highlight, large)
    17 changes: 17 additions & 0 deletions gistfile3.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    .ProductShowcase, .TeamMemberProfile {
    color: black;
    font-size: 14px;
    }
    .ProductShowcase ._Image {
    float: right;
    }
    .TeamMemberProfile ._Image {
    float: left;
    }
    .TeamMemberProfile:first-child {
    font-size: 18px;
    }
    .ProductShowcase {
    background: black;
    color: white;
    }