SCSS扩展嵌套选择器并覆盖嵌套规则集 [英] SCSS extend a nested selector and override the nested rulesets

问题描述

好，所以我有一个嵌套选择器的占位符：

 ％block {
 .title {
 font-size：12px; 
} 
} 
  

我想扩展它并添加到 .title class：

  .superblock {
 @extend％block ; 
 .title {
 font-weight：bold; 
} 
} 
  

答案I WANT是：

  .superblock .title {
 font-size：12px; 
 font-weight：bold; } 
  

但是，我得到的答案是：

  .superblock .title {
 font-size：12px; } 
 
 .superblock .title {
 font-weight：bold; } 
  

我做错了什么，还是这是怎么工作的？要澄清我想合并它。如果我直接在 .superblock 中添加一些东西，并添加像另一个 .superblock2 问题。

解决方案

Sass没有合并重复选择器的功能。

@extend 配置参数不仅仅是使用类代替mixins的方式（类似于LESS样式的mixin调用）。为什么 @extend 的工作方式很清楚，当你扩展正常的类，而不是扩展类：

  .block {
 font-size：12px; 
} 
 
 .foo {
 @extend .block; 
 font-weight：bold; 
} 
  

输出：

  .block，.foo {
 font-size：12px; 
} 
 
 .foo {
 font-weight：bold; 
} 
  

使用extend类只是抑制原始类名的释放。 p>

现在你已经看到为什么 @extend 的工作方式， code> @extend 提供？如果答案是否定的，那么您需要使用mixin：

  @mixin block {
 // styles 
 .title {
 font-size：12px; 
 @content; 
} 
} 
 
 .superblock {
 @include块{
 font-weight：bold; 
} 
} 
  

输出：

  .superblock .title {
 font-size：12px; 
 font-weight：bold; 
} 
  

Ok so I have a placeholder with a nested selector:

%block {
  .title {
    font-size:12px;
  }
}

I want to extend it and ADD to the .title class:

.superblock {
  @extend %block;
  .title {
    font-weight:bold;
  }
}

The answer I WANT is this:

.superblock .title {
  font-size: 12px;
  font-weight: bold; }

However, the answer I get is this:

.superblock .title {
  font-size: 12px; }

.superblock .title {
  font-weight: bold; }

Am I doing something wrong or is this just how it works? To clarify I want to merge it. If I add something directly inside the .superblock and add like another .superblock2 which also extends %block they merge without any problems.

解决方案

Sass has no functionality for "merging" duplicate selectors. You'll need to find another utility to do this after the CSS has been compiled.

The @extend directive isn't just a way to use classes in place of mixins (similar to LESS style mixin calls). Why @extend works the way it does becomes clear when you're extending normal classes instead of extend classes:

.block {
  font-size:12px;
}

.foo {
    @extend .block;
    font-weight: bold;
}

Output:

.block, .foo {
  font-size: 12px;
}

.foo {
  font-weight: bold;
}

Using an extend class just suppresses the emission of the original class name.

Now that you've seen why @extend works the way it does, do you still want what @extend offers? If the answer is no, then you need to use a mixin:

@mixin block {
    // styles
    .title {
        font-size: 12px;
        @content;
    }
}

.superblock {
    @include block {
        font-weight: bold;
    }
}

Output:

.superblock .title {
  font-size: 12px;
  font-weight: bold;
}

这篇关于SCSS扩展嵌套选择器并覆盖嵌套规则集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！