`

Sass之&引用父选择器

    博客分类：
  • css
sassscss 
阅读更多
Sass之&引用父选择器

描述:
您可以使用＆字符选择父级选择器。 它告诉父选择器应该插入的位置。


例一：&在前 
h3 {
  font-size: 20px
  margin-bottom: 10px
  &.some-selector {
    font-size: 24px
    margin-bottom: 20px
  }
}

输出CSS： 
h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
h3.some-selector {
  font-size: 24px;
  margin-bottom: 20px;
}



例二：&在后 
h3 {
  font-size: 20px
  margin-bottom: 10px
  .some-parent-selector & {
    font-size: 24px
    margin-bottom: 20px
  }
}

输出CSS： 
h3 {
  font-size: 20px;
  margin-bottom: 10px;
}
.some-parent-selector h3 {
  font-size: 24px;
  margin-bottom: 20px;
}







转载请注明，
原文出处：http://lixh1986.iteye.com//blog/2428306









-

https://www.w3cschool.cn/sass/parent_selectors.html










-
分享到：
| ReactJS - 02 - ReactJS之入门之00之示例
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Sass中文文档

    Sass允许我们在父选择器内部定义子选择器，使得代码结构更清晰。例如： ```scss nav { ul { margin: 0; padding: 0; li { display: inline-block; } } } ``` 编译后，这将转换为标准CSS： ```css nav ul {...

    Sass基础教程-快速入门

    使用&符号可以表示父选择器，例如.parent { & { color: red; } }。 2. 群组选择器的嵌套 Sass允许开发者使用群组选择器来嵌套CSS规则，例如.header { .logo { width: 100px; } }。 3. 子组合选择器和同层组合选择...

    Sass的简单介绍及使用方法

    4. **嵌套选择器**：Sass允许使用`&`符号引用父选择器，简化编写复杂的级联选择器。例如： ```scss .hover-effect { &:hover { transform: scale(1.1); } } ``` 5. **函数**：Sass提供内置函数，如`lighten...

    code school sass

    8. 父选择器（&）用于引用嵌套规则中当前选择器的父级。这在诸如伪类（如:hover）和伪元素（如::before）的使用场景下特别有用。 9. 由于CSS具有可扩展性，但随着复杂性的增加，保持简单性越来越难，Sass提供了一种...

    sass与compass实战--源代码

    当CSS规则需要相互关联时，可以将它们嵌套在父选择器内，如 `.parent .child {}`。 3. **混合（Mixins）**：混合允许你创建可复用的代码块，类似于函数。定义一个`@mixin`，然后在需要的地方`@include`，可以避免...

    Python库 | django-sass-processor-0.4.4.tar.gz

    3. **选择器继承**：子选择器可以直接继承父选择器的属性，减少了代码冗余。 4. **运算符**：Sass 支持数学运算，可以用于计算尺寸、颜色等值。 5. **混合（Mixins）**：类似于函数，可以将一组样式定义为一个混合，...

    vue脚手架中配置Sass的方法

    3. **父选择器的引用 `&`**： - 当你需要创建后代选择器或伪类时，`&` 符号非常有用。例如： ```scss article a { color: blue; &:hover { color: red; } } ``` 编译后的 CSS 会生成正确的后代选择器 `...

    sass

    4. 嵌套选择器：Sass允许使用&符号引用父选择器，简化复杂的选择器链。例如： ```scss .parent { &__child { color: red; } } ``` 编译后为： ```css .parent__child { color: red; } ``` 5. 函数：...

    CSS预处理器Sass详解

    - 父选择器（Parent Selectors）：使用 `&` 符号代表父选择器，方便编写伪类和上下文相关的样式。 - 属性（Properties）：Sass允许在属性名前使用 `!default` 或 `!important` 关键字，控制其覆盖规则。 总的来说，...

    CSS_with_SASS-Masterclass：具有SASSCSS的超级强大功能

    5. **嵌套选择器与父引用（&）**：SASS允许在选择器内部使用父引用符号`&`来表示父选择器。这在处理CSS伪类和后代选择器时特别有用。例如，`.button:hover`可以写成`.button:hover { ... }`，但更简洁的方式是`....

    jade-sass:玉器和无礼的初学者的样板

    2. **嵌套规则**：CSS的规则可以嵌套在父选择器下面，减少代码重复。 3. **混合（Mixins）**：定义可复用的样式块，通过`@include`调用。 4. **函数**：提供内置和自定义函数，如`lighten()`调整颜色亮度。 5. **...

    web开发-css完整笔记

    7. **伪类选择器**：除了动态伪类（如`:link`, `:visited`, `:hover`, `:active`）和UI伪类，还包括`:first-child`（选择父元素的第一个子元素）、`:nth-child(n)`和`:nth-last-child(n)`（选择特定位置的子元素）、...

    css总结

    - **基本选择器**：包括标签选择器（如`p`）、类选择器（如`.myClass`）、ID选择器（如`#myID`）和通配符选择器（如`*`）。 - **组合选择器**：允许同时选择多个元素，如相邻兄弟选择器（`div + p`）和后代选择器...

    sos

    - **选择器组合**：Sass允许组合选择器，例如使用`&`符号引用父选择器，简化复杂的CSS选择器编写。 5. **Sass的社区和库** - **Bourbon**：一个简洁的Sass mixin库，提供了一系列实用的CSS3功能。 - **Neat**：...

    Trillo:在遵循“高级CSS和Sass”课程的同时创建的项目

    当你有嵌套的HTML结构时，可以将相关的CSS规则直接写在父选择器下面，提高代码的可读性。比如，`.container > .element { ... }` 可以在Sass中嵌套表示。 Sass还支持混合（Mixins），这是一个可复用的代码块，可以...

    kids网站SASS

    SASS允许我们将相关的CSS选择器嵌套写在一起，使得代码结构更加清晰。例如，对于一个`.child`类的样式，我们可以在`.parent`类内嵌套书写，直观地表达出父元素与子元素的关系。 ```scss .parent { color: #333; ...

    css.rar_CSS样式文档_css

    CSS提供了多种选择器，包括元素选择器、类选择器（`.class`）、ID选择器（`#id`）、属性选择器（`[attribute]`）以及伪类（`:hover`, `:active`, `:focus`等），它们组合使用可以精准地控制样式应用。 **3. 布局...

    非常不错的css学习资料

    了解选择器的优先级（内联样式 > ID选择器 > 类选择器 > 标签选择器）对于精准控制样式至关重要。 2. **盒模型**：CSS盒模型是理解元素尺寸计算的基础。它包括边距（margin）、边框（border）、填充（padding）和...

    在微信小程序中使用cssnext

    - **嵌套规则（Nesting）**：在CSS规则内使用`&`引用父选择器，如`.parent { & > .child {} }`。 - **函数（Functions）**：例如`calc()`, `var()`, `custom-function()`等。 - **颜色操作**：使用`hsl()`, `hwb...

Magicbox
Global site tag (gtag.js) - Google Analytics