占位符选择器 %

占位符选择器 %

占位符选择器的作用,个人看来是将一类属性分组,但是改组不需要转化css,而是在之后的编辑中可能用到,为了避免重复工作,使用占位符选择器预先定义好,使用的时候使用继承直接拉到需要的选择器中,可以重复使用

%aBtn{  
font-size: 20px; 
  text-align: center; 
    color: #fff; 
      border-radius: 5px;  
       box-shadow: 3px 3px 5px 0 #666;
        }
         .btn {
          width: 200px;
             height: 50px; 
               background-color: red;
                  @extend %aBtn; } 

结果是

.btn {
  font-size: 20px;
  text-align: center;
  color: #fff;
  border-radius: 5px;
  box-shadow: 3px 3px 5px 0 #666;
}

.btn {
  width: 200px;
  height: 50px;
  background-color: red;
}

/*# sourceMappingURL=b.css.map */

缺点是,没有综合起来而是将其分作两次生成了同一个选择器的两次编辑,使用css的层叠性来使用

posted @ 2021-04-23 18:25  山茶-峰  阅读(124)  评论(0编辑  收藏  举报