sass基础—继承及占位符
/*继承:@extend ,继承多个类时使用逗号隔开*/
.alert{
color: #f00;
}
.info{
width: 100px;
}
.text-danger{
background-color: #f0f;
@extend .alert,.info;
}
/*链式继承*/
.one{
color: #f0f0;
}
.two{
@extend .one;
background-size: 100% 100%;
}
.three{
@extend .two;
border-color: #f00;
}
/*继承交叉合并(实际应用中应该避免该种用法):
.four a, .four .five .six, .five .four .six {
font-size: 16px;
}
*/
.four a{
font-size: 16px;
}
.five .six{
@extend a;
}
/*media继承(注意要继承的类需要在media内部,且选择器不能与外部的重名,若是把.text提到外部则无法继承)*/
@media screen and (max-width: 600px){
.text{
border:1px solid #f00;
}
.content{
@extend .text;
}
}
/*占位选择器(作用在于公共的部分使用继承即可,不调用则不生成多余的css。)*/
%warning{
border:10px solid #f0f;
}
.success_info{
@extend %warning;
color: #f00;
}
占位选择器的渲染结果:
.success_info{
border:1px solid #f0f;
color:#f00;
}
sass基础—继承及占位符的更多相关文章
- Sass混合宏、继承、占位符
混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...
- Sass 混合宏、继承、占位符 详解
混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...
- sass---Sass混合宏、继承、占位符
混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...
- 详解scss的继承、占位符和混合宏
1.继承和占位符 两者都是通过@extend来引用. 1.1 继承 一个已经存在的css样式类,可以被其他样式类继承. 例如,实现以下css样式: .btn, .btn--primary, .btn- ...
- sass中 混合宏 VS 继承 VS 占位符 各自的使用时机和特点
初学者都常常纠结于这个问题“什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 举例代码见 2-24 行 编译出 ...
- css编译工具Sass中混合宏,继承,占位符分别在什么时候使用
//SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @ ...
- Sass之混合宏、继承、占位符
1.混合宏. 当样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目的了.这个时候混合宏就派上用场了. 而使用混合宏时,首先要声明混合宏,而声明混合宏时有两种,不带参数混合宏和带参数 ...
- sass04 嵌套、继承、占位符
demo1.scss body{ //选择器嵌套 background-color:lightgray; header{ background-color:lightgreen; } footer{ ...
- Sass--混合宏 VS 继承 VS 占位符
什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 总结:编译出来的 CSS 清晰告诉了大家,他不会自动合并相同 ...
随机推荐
- 合并K个有序数组(链表)【字节跳动面试算法题】
本题是本人字节跳动一面考的算法题原题是有序数组,一时没想到怎么解决数组的问题,但是如果给的是有序链表数组,则可以用下面的方法解决 可以利用最小堆完成,时间复杂度是O(nklogk),具体过程如下: 创 ...
- 使用按钮触发element 时间事件 --时间戳
本日 本周 本月 本年 时间按钮 date 组件内添加 pickerOptions2: { shortcuts: [ { text: '今日', onClick(picker) { picker ...
- EasyTouch5ForSiki学院
总结: 这里面的一些功能,就可以拿来做移动或者PC的很多功能了,这是一个很有用的插件. 禁用0618错误 EasyTouch4_x的写法: using HedgehogTeam.EasyTouch; ...
- mpvue——小程序修改input的placehold样式
前言 官方地址 https://developers.weixin.qq.com/miniprogram/dev/component/input.html 用placeholder-class的时候没 ...
- poj 3764 The xor-longest Path (01 Trie)
链接:http://poj.org/problem?id=3764 题面: The xor-longest Path Time Limit: 2000MS Memory Limit: 65536K ...
- DaishaPocedureOfMine(代码)
create procedure GetGoodsInfoByPageNumber ( @provideID int, @pageNumber int, @GoodsCountOfOnePage fl ...
- ubuntu不能联网的问题
控制面板\网络和 Internet\网络和共享中心-->更改>配器设置-->以太网-->右键属性-->共享-->允许其他网络用户通过此计算机的internet连接来 ...
- 第三十七节、人脸检测MTCNN和人脸识别Facenet(附源码)
在说到人脸检测我们首先会想到利用Harr特征提取和Adaboost分类器进行人脸检测(有兴趣的可以去一看这篇博客第九节.人脸检测之Haar分类器),其检测效果也是不错的,但是目前人脸检测的应用场景逐渐 ...
- FreeNAS插件打造ownCloud私有云网盘
ownCloud 是一个自由开源的个人云存储解决方案,可以自由获取无需付费,但用户需要自行架设服务器,好在FreeNAS可以通过插件轻松的构建ownCloud服务器. ownCloud 分为服务器端和 ...
- 2018年秋季学期《c语言程序设计》编程总结
<c语言程序设计>第四周编程总结 <c语言程序设计>第五周编程总结 <c语言程序设计>第六周编程总结 <c语言程序设计>第七周编程总结 <c语言程 ...