Skip to content

Instantly share code, notes, and snippets.

@iamravenous

iamravenous/_bem-builder.scss

Last active February 28, 2020 09:47
Show Gist options
  • Save iamravenous/b5fb378a14a2bf5ae63d399dcf83a287 to your computer and use it in GitHub Desktop.
Save iamravenous/b5fb378a14a2bf5ae63d399dcf83a287 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. Franco Moya revised this gist Jun 30, 2017. 2 changed files with 2 additions and 2 deletions.
    2 changes: 1 addition & 1 deletion _navbar.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -11,7 +11,7 @@
    }
    @include element('link') {
    display: block;
    padding: 20px;
    padding: 1.25rem;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    2 changes: 1 addition & 1 deletion styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -16,7 +16,7 @@

    .navbar__link {
    display: block;
    padding: 20px;
    padding: 1.25rem;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
  2. Franco Moya revised this gist Jun 29, 2017. 2 changed files with 1 addition and 1 deletion.
    0 _mixins.scss → _bem-builder.scss
    View file
    File renamed without changes.
    2 changes: 1 addition & 1 deletion styles.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -1,2 +1,2 @@
    @import 'mixins';
    @import 'bem-builder';
    @import 'navbar';
  3. Franco Moya created this gist Jun 29, 2017.
    17 changes: 17 additions & 0 deletions _mixins.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,17 @@
    @mixin element($name) {
    @at-root #{&}__#{$name}{
    @content;
    }
    }

    @mixin modifier($name) {
    @at-root #{&}--#{$name} {
    @content;
    }
    }

    @mixin modified-by($arg) {
    .#{$arg} & {
    @content;
    }
    }
    26 changes: 26 additions & 0 deletions _navbar.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,26 @@
    .navbar {
    padding-top: 1.875rem;
    @include element('list') {
    display: block;
    @include modified-by('navbar--center') {
    display: inline-block;
    }
    }
    @include element('item') {
    float: left;
    }
    @include element('link') {
    display: block;
    padding: 20px;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    @include modifier('active') {
    background-color: crimson;
    color: white;
    }
    }
    @include modifier('center') {
    text-align: center;
    }
    }
    32 changes: 32 additions & 0 deletions styles.css
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,32 @@
    .navbar {
    padding-top: 1.875rem;
    }

    .navbar__list {
    display: block;
    }

    .navbar--center .navbar__list {
    display: inline-block;
    }

    .navbar__item {
    float: left;
    }

    .navbar__link {
    display: block;
    padding: 20px;
    font-size: 1rem;
    font-weight: bold;
    text-transform: uppercase;
    }

    .navbar__link--active {
    background-color: crimson;
    color: white;
    }

    .navbar--center {
    text-align: center;
    }
    2 changes: 2 additions & 0 deletions styles.scss
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,2 @@
    @import 'mixins';
    @import 'navbar';