demo1.scss

body{    //选择器嵌套
background-color:lightgray;
header{
background-color:lightgreen;
}
footer{
background:{ //属性嵌套,仅仅对中划线样式有效
color:red;
size:100% 50%;
}
}
a {
color:red;
&:hover{ //引用父选择器,& = a
color:blue;
}
& span{
color:green;
}
&.content{
color:green;
}
}
@at-root .container{ //跳出body
width:996px;
}
@media screen and (max-width:600px){
color:red; //屏幕600以下使用这个样式
} @media screen and (max-width:600px){
@at-root (without:media){
.container{
color:red; //屏幕600以下使用这个样式
}
}
} @at-root .text-info{
color:red;
@at-root nav &{
color:blue;
}
}
}
.alert{
background-color:#FFEEDD;
}
.s{
font-size:12px;
}
.alert-info{
@extend .alert,.s; //继承
color:red;
} .one{
border:1px solid red;
}
.two{
@extend .one;
color:red;
}
.three{
@extend .two;//链式继承
boder:1px;
} //交叉继承,会出现错误
a span{
font-weight:blod;
}
div .content{
@extend span;
} %abc{ //占位符,没人继承他不会编译到css,有人继承也不会编译他自己,别人继承的会编译
color:blue;
}
.ws{
@extend %abc;
} /*
默认@at-root只会跳出选择器嵌套,而不能跳出@media或@support,如果要跳出这两种,则需使用@at-root (without: media),@at-root (without: support)。这个语法的关键词有四个:all(表示所有),rule(表示常规css),media(表示media),support(表示support,因为@support目前还无法广泛使用,所以在此不表)。我们默认的@at-root其实就是@at-root (without:rule)。 虽然能继承的选择器数量很多,但也有很多是不被支持的。如包含选择器(.one .two)或者是相邻兄弟选择器(.one+.two)
如果继承的元素是a,恰巧这个元素a又有hover状态的形式,那么hover状态也会被继承 占位选择器%:优势在于:如果不调用则不会有任何多余的css文件,避免了以前在一些基础的文件中预定义了很多基础的样式,然后实际应用中不管是否使用了@extend去继承相应的样式,都会解析出来所有的样式。占位选择器以%标识定义,通过@extend调用。
*/

demo1.css

@charset "UTF-8";
body {
background-color: lightgray;
}
body header {
background-color: lightgreen;
}
body footer {
background-color: red;
background-size: 100% 50%;
}
body a {
color: red;
}
body a:hover {
color: blue;
}
body a span, body a div .content, div body a .content {
color: green;
}
body a.content {
color: green;
}
.container {
width: 996px;
}
@media screen and (max-width: 600px) {
body {
color: red;
}
}
body .container {
color: red;
} .text-info {
color: red;
}
nav .text-info {
color: blue;
} .alert, .alert-info {
background-color: #FFEEDD;
} .s, .alert-info {
font-size: 12px;
} .alert-info {
color: red;
} .one, .two, .three {
border: 1px solid red;
} .two, .three {
color: red;
} .three {
boder: 1px;
} a span, a div .content, div a .content {
font-weight: blod;
} .ws {
color: blue;
}

sass04 嵌套、继承、占位符的更多相关文章

  1. sass 继承 占位符 %placeholder

    @extend //SCSS .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { b ...

  2. spring源码分析之配置文件名占位符的解析(一)

    一.直接写个测试例子 package com.test; import org.junit.Test; import org.springframework.context.ApplicationCo ...

  3. Spring PropertyResolver 占位符解析(二)源码分析

    Spring PropertyResolver 占位符解析(二)源码分析 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) ...

  4. SpringBoot环境属性占位符解析和类型转换

    前提 前面写过一篇关于Environment属性加载的源码分析和扩展,里面提到属性的占位符解析和类型转换是相对复杂的,这篇文章就是要分析和解读这两个复杂的问题.关于这两个问题,选用一个比较复杂的参数处 ...

  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混合宏、继承、占位符

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

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

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

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

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

随机推荐

  1. java properties类读取配置文件

    1.JAVA Properties类,在java.util包里,具体类是java.util.properties.Properties类继承自Hashtable类并且实现了Map接口,也是使用一种键值 ...

  2. 上传文件 nginx 413错误

    nginx : 413 Request Entity Too Large 上传文件过程发生413 Request Entity Too Large错误,翻译为请求实体过大,断定为nginx限制了请求体 ...

  3. js解析网络中的json数据

    <?php echo <<<_END <html> <head> </head> <body> <div id=" ...

  4. 固比固布局 圣杯布局 css实现传统手机app布局

    手机app的布局大致上都是头部.内容.底部三部分: 我们需要实现的是头部.底部高度固定:中间内容区域自适应且可以滚动:直接贴代码: css: html,body { width: 100%; heig ...

  5. mysql导入数据,涉及到时间转换,乱码问题解决

    表结构: drop table if exists `qi_an_log`;CREATE TABLE `qian_log` (`dt` LONG NOT NULL COMMENT '产生日期,格式yy ...

  6. SharePoint 网站中定义的页面背景图片不起作用

    If you are working on custom SharePoint 2013 master pages, designs and/or CSS, these little CSS clas ...

  7. Windows 10 10586 升级

  8. (转载)打开一个本地apk进行安装

    1 2 3 4 5 6 Intent intent = new Intent(); intent.setAction(Intent.ACTION_VIEW); File file = new File ...

  9. 【算法】Bellman-Ford算法(单源最短路径问题)(判断负圈)

    单源最短路问题是固定一个起点,求它到其他所有点的最短路的问题. 算法: 设 d[i]  表示 起点 s 离点 i 的最短距离. [1.初始化]  固定起点s,对所有的点 , 如果 i =  s ,  ...

  10. cg基础

    1. row-major or column-major 2.orthogonal matrices 3.why cameras always point along the world coordi ...