// 在嵌套类中使用父级选择器 background-color: red; } } 在上面的示例中,.container是父级选择器,.nested-class是嵌套类。通过使用&符号,我们可以在嵌套类中引用父级选择器,从而限定样式的作用范围。在这个例子中,.nested-class的背景颜色将会是红色。 这种预置带有选择器的嵌套类在编写SCSS样式时非...
使用BEM 命名规范:BEM(Block Element Modifier)是一种常用的CSS命名规范,可以有效地管理复杂的嵌套选择器。BEM 规范将样式分为 block、element 和 modifier 三个层级,使代码结构更清晰,易于理解和维护。 利用SCSS 的特性:SCSS 提供了许多方便的特性,如变量、函数、混合器等,可以帮助简化和优化代码。例如,可以使用变量...
1.嵌套选择器 SCSS的入门就是使用嵌套选择器,SCSS 允许将一套 CSS 样式嵌套进另一套样式中,内层的样式将它外层的选择器作为父选择器. 例如: HTML 你好 Scss body{p{color:red;}} 上面的代码中HTML中body下面只有一个p标签,我们通过Scss的标签嵌套来为p标签添加样式,这样能够选择页面中的p标签并为它添加样式 ...
在上面的示例中，.button选择器是父选择器。在嵌套规则中，使用&引用父选择器。&:hover表示当鼠标悬停在.button元素上时，应用这个样式。&.active表示当.button元素有.active类时，应用这个样式。.icon表示嵌套在.button元素内的.icon元素，不使用&引用父选择器。在编译为CSS后，生成的代码如下：.button { backgr...
1 选择器嵌套（选择器与css中选择器一致）（id选择器、类别选择器、标记选择器、并集选择器、交集选择器、后代选择器等） 选择器嵌套 选择器嵌套 2 属性嵌套： 属性嵌套 3 伪类嵌套： 伪类嵌套 伪类嵌套 伪类嵌套 4 父选择器标识符&： 1.父选择器标识符& 2.父选择...
群组选择器的嵌套: 一、父选择器重复: 来看一段代码实例: .container h1, .container h2, .container h3{margin-bottom:.8em} 上面的群组选择器中,我们需要不断的重复书写.container选择器。 使用scss就可以避免此问题,代码如下: .container{h1, h2, h3 {margin-bottom:.8em}} ...
在上面的示例中,.button选择器是父选择器。在嵌套规则中,使用&引用父选择器。 &:hover表示当鼠标悬停在.button元素上时,应用这个样式。 &.active表示当.button元素有.active类时,应用这个样式。 .icon表示嵌套在.button元素内的.icon元素,不使用&引用父选择器。 在编译为CSS后,生成的代码如下: ...
1)选择器嵌套ul{ li{} } 嵌套默认表示后代选择器,如果需要子代选择器,可以在选择器前面加> 可以在选择器的大括号中,使用&表示上一层的选择器。 2)伪类嵌套: li{ $:hover} 在选择器的{}中,使用&配合伪类事件,可以表示当前选择器的伪类 3)属性嵌套:font:{size:18px} -->font-size:18px; ...
{// 图片平级width:100rpx;height:100rpx;}.text{// 文字平级color:#c00000;font-size:16px;&.border{// & 符号表示当前选择器的父级选择器, 这里翻译为: class="text border"border:1rpx solid orange;}&::before{// & 符号表示当前选择器的父级选择器,这里翻译为: text::beforecontent:'123';}}...