/*继承:@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基础—继承及占位符的更多相关文章

  1. Sass混合宏、继承、占位符

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

  2. Sass 混合宏、继承、占位符 详解

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

  3. sass---Sass混合宏、继承、占位符

    混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...

  4. 详解scss的继承、占位符和混合宏

    1.继承和占位符 两者都是通过@extend来引用. 1.1 继承 一个已经存在的css样式类,可以被其他样式类继承. 例如,实现以下css样式: .btn, .btn--primary, .btn- ...

  5. sass中 混合宏 VS 继承 VS 占位符 各自的使用时机和特点

    初学者都常常纠结于这个问题“什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 举例代码见 2-24 行 编译出 ...

  6. css编译工具Sass中混合宏,继承,占位符分别在什么时候使用

    //SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @ ...

  7. Sass之混合宏、继承、占位符

    1.混合宏. 当样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目的了.这个时候混合宏就派上用场了. 而使用混合宏时,首先要声明混合宏,而声明混合宏时有两种,不带参数混合宏和带参数 ...

  8. sass04 嵌套、继承、占位符

    demo1.scss body{ //选择器嵌套 background-color:lightgray; header{ background-color:lightgreen; } footer{ ...

  9. Sass--混合宏 VS 继承 VS 占位符

    什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 总结:编译出来的 CSS 清晰告诉了大家,他不会自动合并相同 ...

随机推荐

  1. JS 字符串处理相关(持续更新)

    一.JS判断字符串中是否包含某个字符串 indexOf() indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置.如果要检索的字符串值没有出现,则该方法返回 -1. var str ...

  2. JQ——利用一个开关,点击一个按钮完成展开收起功能

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  3. AssetBundle打包

    为热更新打基础(xlua\tolua) 素材.源码链接:http://www.sikiedu.com/course/74/task/1812/show 一.AssetBundle的定义和作用 1,As ...

  4. 复习IIC协议---以AT24C02为例

    1.总纲--复习IIC(inter integrated circuit)协议以及自己顺便读一下数据手册. /********************************************* ...

  5. Luogu P3600 随机数生成器(期望+dp)

    题意 有一个长度为 \(n\) 的整数列 \(a_1, a_2, \cdots, a_n\) ,每个元素在 \([1, x]\) 中的整数中均匀随机生成. 有 \(q\) 个询问,第 \(i\) 个询 ...

  6. 【Spring】Spring bean的实例化

    Spring实现HelloWord 前提: 1.已经在工程中定义了Spring配置文件beans.xml 2.写好了一个测试类HelloWorld,里面有方法getMessage()用于输出" ...

  7. 洛谷 P4302 【[SCOI2003]字符串折叠】

    又来填一个以前很久很久以前挖的坑 首先如果先抛开折叠的内部情况不谈,我们可以得到这样的一个经典的区间DP的式子 $ f[l][r]=min(f[l][r],f[l][k]+f[k+1][r])(l&l ...

  8. CAN总线报文浅析

    CAN的报文格式 在总线中传送的报文,每帧由7部分组成.CAN协议支持两种报文格式,其唯一的不同是标识符(ID)长度不同,标准格式为11位,扩展格式为29位. 在标准格式中,报文的起始位称为帧起始(S ...

  9. txt文件按行处理工具类(可以截取小说、分析日志等)【我】

    txt文件按行处理工具类(可以分析日志.截取小说等) package file; import java.io.BufferedReader; import java.io.BufferedWrite ...

  10. pta寒假作业2

    题目二币值转换 题目代码 #include<stdio.h> int main (void) { int n, initial_n; scanf("%d", & ...