scss 用于BEM风格选择器的Mixins。

Posted 2021-05-18

.media {
  border: 1px solid red;
}

.media__image {
  border: 1px solid green;
}

.media__image--full {
  content: "full";
}

.is-modifier .media__image {
  content: "modifier";
}

.page-header .media {
  content: "new";
}

.media--new {
  content: "new";
}

// ----
// libsass (v3.2.5)
// ----

// BEM Mixins for SASS
// http://www.sitepoint.com/structuring-css-class-selectors-with-sass/

@mixin new($block) {
  @at-root .#{$block} {
    @content;
  }
}

@mixin is($element) {
  .is-#{$element} & {
    @content;
  }
}
 
@mixin has($element) {
  &__#{$element} {
    @content;
  }
}
 
@mixin when($modifier) {
  &--#{$modifier} {
    @content;
  }
}

@mixin when-inside($selector) {
  #{$selector} & {
    @content;
  }
}


.media {
  border: 1px solid red;
  
  @include has("image") {
    border: 1px solid green;
    
    @include when('full') {
      content: "full";  
    }
    
    @include is('modifier') {
      content: "modifier";  
    }
    
  }
  
  @include when-inside('.page-header') {
    content: "new"
  }
  
  @include when('new') {
    content: "new"
  }
  
}