美文网首页
Sass扩展/继承@extend

Sass扩展/继承@extend

作者: 混吃等死小前端 | 来源:发表于2020-02-19 15:25 被阅读0次

% 占位符,%xx{}声明的代码,如果不被 @extend 调用的话,不会被编译

//.scss
%mt5 {
  margin-top: 5px;
}
%pt5{ //不会被编译,因为没有被调用
  padding-top: 5px;
}
.btn {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
  }
.btn-primary {
    background-color: #f36;
    color: #fff;
    @extend .btn;
    @extend %mt5 ;
  }
//.css
.btn, .btn-primary {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px; 
}
.btn-primary {
 margin-top: 5px;
}
.btn-primary {
  background-color: #f36;
  color: #fff; 
}
image.png

相关文章

  • Sass扩展/继承@extend

    % 占位符,%xx{}声明的代码,如果不被 @extend 调用的话,不会被编译

  • sass中的继承

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

  • 扩展/继承

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

  • SASS - @extend(继承)指令

    SASS – 简介 SASS – 环境搭建 SASS – 使用Sass程序 SASS – SASS – 语法 SA...

  • Scss 基本使用 ( @extend、 @mixin、@imp

    继承( @extend )@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。如果一个样式与另外...

  • Sass 延伸

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

  • Sass 延伸

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

  • 八、sass - @extend样式继承

    在设计网页的时候常常遇到这种情况:一个元素使用的样式与另一个元素完全相同,但又添加了额外的样式。通常会在 HTML...

  • Java面向对象 基础知识(二)

    继承的实现:继承是用来扩展父类的功能,用extend关键字来完成继承格式:class 子类 extends 父类 ...

  • 6.Sass @extend 与 继承

    @extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。如果一个样式与另外一个样式几乎相同,只有少量...

网友评论

      本文标题:Sass扩展/继承@extend

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