如何避免嵌套SCSS类中的重复代码？
在SCSS中避免嵌套类中的重复代码可以通过以下几种方式：
- 使用父选择器符号（&）：SCSS中的父选择器符号（&）可以引用父级选择器，从而避免重复代码。通过在嵌套类中使用父选择器符号，可以动态地生成唯一的选择器。
例如，假设有一个嵌套的SCSS类如下所示：
.parent {
color: red;
.child {
font-weight: bold;
&:hover {
color: blue;
}
}
}在编译后的CSS中，上述代码将被转换为：
.parent {
color: red;
}
.parent .child {
font-weight: bold;
}
.parent .child:hover {
color: blue;
}通过使用父选择器符号（&），可以确保生成的选择器是唯一的，避免了重复代码。
- 使用混合器（Mixin）：SCSS中的混合器可以将一组CSS属性和值封装起来，以便在需要的地方进行重用。通过定义一个混合器，可以在嵌套类中引用该混合器，避免重复代码。
例如，定义一个混合器来设置文本居中样式：
@mixin center-text {
text-align: center;
vertical-align: middle;
}然后，在嵌套类中引用该混合器：
.parent {
@include center-text;
.child {
@include center-text;
font-weight: bold;
}
}在编译后的CSS中，上述代码将被转换为：
.parent {
text-align: center;
vertical-align: middle;
}
.parent .child {
text-align: center;
vertical-align: middle;
font-weight: bold;
}通过使用混合器，可以将重复的代码封装起来，提高代码的可维护性和重用性。
- 使用继承（@extend）：SCSS中的继承功能可以使一个选择器继承另一个选择器的样式，从而避免重复代码。通过使用继承，可以将共享的样式定义在一个基础类中，然后在嵌套类中使用继承来继承这些样式。
例如，定义一个基础类来设置文本居中样式：
.center-text {
text-align: center;
vertical-align: middle;
}然后，在嵌套类中使用继承来继承这些样式：
.parent {
@extend .center-text;
.child {
@extend .center-text;
font-weight: bold;
}
}在编译后的CSS中，上述代码将被转换为：
.center-text, .parent, .parent .child {
text-align: center;
vertical-align: middle;
}
.parent .child {
font-weight: bold;
}通过使用继承，可以避免重复代码，并且生成的CSS选择器也更简洁。
总结起来，避免嵌套SCSS类中的重复代码可以通过使用父选择器符号（&）、混合器（Mixin）和继承（@extend）等方式来实现。这些方法可以提高代码的可维护性和重用性，减少重复代码的出现。
相关·内容
2回答
如何避免嵌套SCSS类中的重复代码？
optimization、sass、styles
如果可能的话，我想避免使用重复代码。我现在所做的基本上是对#menu-icon和#close-menu使用类似的代码，唯一的区别是我在height:属性中使用的百分比值。有没有使用SCSS的有效方法来避免代码的重复使用？
@import "../../resources/Variables.scss&quo
浏览 12提问于2019-11-21得票数 0
3回答
学习SCSS从旧的CSS代码-如何重写这个？
css、typescript、sass、spfx、scss-lint
我是一个使用SCSS的初学者，我不知道如何在TypeScript项目中使用SCSS将我以前的CSS重写成新的东西，现在我选择了下面的几个例子来问这个问题，如果有人能展示正确的方式，我想我可以计算出我必须重写的其余代码下面的示例总结了我需要学习的一切： outline: none; border:
浏览 0提问于2019-03-21得票数 0
回答已采纳
1回答
在不违反内联规则的情况下，优雅地将选择器中的元素定位为三个嵌套级别
sass、nested、bem、scss-lint
我正在重构一些SCSS，并且在我的SCSS文件中遇到了一个使用BEM语法的嵌套问题。 } }这是我看到的唯一合乎
浏览 5提问于2016-08-05得票数 0
回答已采纳
1回答
用@import SCSS嵌套多个类
css、sass
如何使用@import在SCSS中嵌套这样的类？.example.test {}.example { color:red;}.test {
浏览 8提问于2022-03-29得票数 0
2回答
d3 classed()对多个类不能正常工作吗？
javascript、css、d3.js、sass
我已经创建了以下scss定义：{ { opacityregionBackground在其classList[]中同时显示了regionBackgroundHighlighter和highlight，但实际的样式并没有应用于元素。但是，如果我将相同的类定义作为一级非嵌套类传递，则样式将按预期应用：
.regionBa
浏览 1提问于2017-03-23得票数 0
4回答
如何避免SCSS中样式的重复？
sass
我想要一个.scss文件，其中包含一些其他.scss文件的变量。但是，如果我这样做，它的.scss样式将在我的所有.scss文件中复制：$white: #FFF;$bg_red: red;
margin-top: 30px;header.scss -我想在这个文件中使用全局vars和样式
浏览 2提问于2014-06-12得票数 17
3回答
为什么我的代码复制文件的css？
sass、node-sass
在Sass中，我有一些组件(导航栏、页脚)和一些@mixins (字体)和一个控制字体的函数。我@import字体的位置，并在字体的函数中做@include，在这个函数中，我只选择我想要使用的字体。问题是，当我将组件(导航条和页脚)分隔为“部分”时，它们具有相同的源，并且我在每个.scss的源中给出了这些源中的.scss。
然后在我生成的
浏览 0提问于2019-01-28得票数 1
回答已采纳
我有三个相同的组件:推荐产品的旋转木马，折扣产品的旋转木马，特色产品的旋转木马。这些组件有一堆css样式应用于它们。当然，这些css类几乎是相同的。我应该在每个组件上重复css，还是应该将共享类放在全局styles.scss上。哪一个是最佳实践？如果使用全局styles.scss，我可以避免重复，并且可以在一个地方将更改应用到组件。我将不得不挑选styles.scss</e
浏览 0提问于2019-02-18得票数 3
1回答
如何避免SCSS/SASS中重复的条目？
css、sass
我最近已经开始在工作中结合使用SASS和Eclipse，一切都很好:通过Ant构建应用程序执行一个.bat，它运行一个.scss命令行，该命令行将所有相关的.scss文件编译成.css文件。然而，我们注意到的一件事是，可能存在重复。当然，一般的.css规则是适用的(最后一条)，但是使用相同语句的x值是相当多余的。看看下面的编译.css代码的例子(这并不完美，我只是在测试一些东西)。
浏览 3提问于2014-12-15得票数 1
1回答
问题是我的Sass代码在编译后的CSS文件中生成了重复的声明。我的Sass代码由多个部分组成，我@将它们导入到最终的screen.scss文件中
我有一个包含%alignright和%alignleft的_placeholders.scss。我有一个使用它们的_content.scss文件，所以我在该文件的顶部使用@import
浏览 2提问于2012-10-06得票数 7
1回答
NextJS:修改不同页面中的第三方组件CSS
css、reactjs、next.js、fullcalendar
对于第三方组件，包含其样式的方法是将样式表导入_app.tsx或将样式表导入使用第三方组件的组件中，如下面所述：或添加到next.config.js中，如下所示：const_app.tsx中；这些修改可能如下所示：.fc-col-header {}
另一个选项，至少对于我<
浏览 24提问于2021-12-17得票数 1
1回答
CSS模块，嵌套类中的组合
sass、css-modules
我正在进行一个项目，其中有一个主要的style.scss文件，用于许多组件。我想重组代码，因为每个组件都有自己的文件夹(index.js，styles.scss)。有一个嵌套类，它从另一个组件中使用一个类，现在我必须分离所有的样式，这个部分就坏了。我不能使用组合，因为它是一个嵌套类。我还能采取什么其他方法？代码如下所示：
// Component A styless.sc
浏览 2提问于2018-09-09得票数 0
其中每一个都可以有我想要样式化的子.special-price。.category-view .special-price, .search-results .special-price {
或者有没有更短的方法，比如
.category-view当他们低于父母中的任何一个时，会影响到这两个孩子吗？
浏览 0提问于2013-08-28得票数 0
2回答
用同样的键替代(嵌套的)字典？
python、class、dictionary、namedtuple
我发现自己避免使用字典，因为它们的代码通常有将近一半是重复的。我通常在嵌套字典中这样做，其中所有的子字典都包含相同的键，但值不同。虽然字典启用了显式代码，但使用重复键定义嵌套字典是很繁琐和容易出错的。在本例中，嵌套字典的一半是所有嵌套字典共有的代码重复代码。
浏览 0提问于2014-10-30得票数 12
回答已采纳
1回答
如何避免类函数中的代码重复？
python、oop
in self.body: else:因此，当程序检测到一个命令时，它会运行另一组类函数wake_on_lan(ip) except:注意，类中没有定义不过，我希望尽可能避免代码重复。因此，我试图重写process_command
浏览 2提问于2019-12-09得票数 0
回答已采纳
1回答
scss@extend后的重复代码
webpack、sass-loader
我想弄清楚如何在webpack身上塑造风格，但我遇到了一个问题。我希望使用相同的@extend将css类组合在一起，以避免代码重复。/common.scss";
@extend %common;c2.scss:style.css display: -ms-flex
浏览 0提问于2018-03-25得票数 3
2回答
@media查询是在课前还是课后？
css、html、sass、media-queries
我想知道哪个是媒体查询的最佳实践。button-small { margin-bottom: 6px;}}
.button-small { }而不是在类中嵌套@media查询，而是创建一个独立的
浏览 5提问于2016-04-19得票数 0
1回答
先按选择器或媒体查询对样式进行分组
css、sass、media-queries
假设我们有一个样式表，它有两个类，a和b，每个类的样式都在某个断点上改变： //styles //styles .a { } //mobile styles}
这些是按断点分组的。我对前一种模式的关注是，它可以鼓励开发人员编辑一段样
浏览 4提问于2021-10-18得票数 1
回答已采纳
1回答
Vim编辑器:最后一个子项和:第一个子项嵌套css错误
css、vim、sass
我已经启动了Vim (v8)，并为css3准备了适当的语法高亮符号。我正在使用postcss插件precss在我的代码中提供类似"SASS“的语法。但是，当我使用带有"&:last-child“或&:first-child的嵌套选择器时，语法抛出错误。它不会破坏代码或任何东西，但那个“红色”错误让我分心。查看下面的屏幕截图。有谁能想出解决这个错误的办法吗？？我使用了一个名为vim-css3-语法的插
浏览 3提问于2016-11-06得票数 0
1回答
根据环境/逻辑动态导入scss
ionic-framework、ionic3、ionic4
我有两个css/scss文件，我需要加载这个文件在特定的网页只根据条件 Example{}{}
浏览 25提问于2019-06-27得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频活动推荐
腾讯云开发者
