美文网首页
sass中的继承

sass中的继承

作者: 最爱喝龙井 | 来源:发表于2019-09-26 19:23 被阅读0次

sass中的继承需要用到@extend这个关键字
语法:@extend 需要继承的选择器

例:
style.scss文件

body {
    padding: 15px;
}
body a {
    font-weight: 600;
}
div {
    @extend body;
    color: #ccc;
}

*编译之后的style.css文件

body, div {
  padding: 15px;
}

body a, div a {
  font-weight: 600;
}

div {
  color: #ccc;
}

注意:继承某个选择器的样式之后,连带着会继承所有和这个选择器有关的样式。

相关文章

  • 扩展/继承

    在 Sass 中也具有继承一说,也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已...

  • sass中的继承

    sass中的继承需要用到@extend这个关键字语法:@extend 需要继承的选择器 例:style.scss文...

  • Sass 延伸

    本节我们学习 Sass 中的延伸,也可以理解为继承。在 Sass 中,我们可以通过 @extend 指令来实现将...

  • Sass 延伸

    本节我们学习 Sass 中的延伸,也可以理解为继承。在 Sass 中,我们可以通过 @extend 指令来实现将...

  • vue中如何使用SCSS

    SASS是CSS的预处理器,SCSS是SASS3.0版本中引入的新语法,兼容CSS3和继承SASS的动态功能。 安...

  • Sass 和 SCSS 有什么区别?

    SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。Sass 和...

  • Sass快速学习掌握

    学习Sass为的是要紧跟技术流行趋势,提高项目组织与维护。Sass中增加了规则、变量、继承等特性。大大的提高了cs...

  • Sass 语法 移动端布局

    1. sass 创建变量 、继承 、@mixin 1)变量 2)继承 3)@mixin // mixin的强大之处...

  • Scss中的混合宏、继承和占位符

    Sass中的混合宏、继承和占位符 一、混合宏 1.不带参数的混合宏 @mixin border-radius {-...

  • SCSS用法汇总

    SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。由于 SCS...

网友评论

      本文标题:sass中的继承

      本文链接:https://www.haomeiwen.com/subject/tyxgyctx.html