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. HDU 4332 Contest 4

    顶好的一道题.其实,是POJ 2411的升级版.但POJ 2411我用的插头DP来做,一时没想到那道题怎么用状态DP,于是回头看POJ 2411那一道的状态DP,其实也很简单,就是每一行都设一个状态, ...

  2. 为powerpc交叉编译nginx

    HOST: MINT NGINX VERSION: nginx-1.8.0(nginx-1.8.0.tar.gz) ZLIB VERSION: zlib-1.2.8 PCRE VERSION: pcr ...

  3. jquery时间格式化插件

    插件的代码: (function($){ $.formatDate = function(pattern,date){ //假设不设置,默觉得当前时间 if(!date) date = new Dat ...

  4. MS UI Automation简介

    转自:http://blog.csdn.net/ffeiffei/article/details/6637418 MS UI Automation(Microsoft User Interface A ...

  5. poj_3468线段树成段更新求区间和

    #include<iostream> #include<string.h> #include<cstdio> long long num[100010]; usin ...

  6. 解读HDFS(转载)

    是蛮久木有写过关于hadoop的博客了额,虽然最近也看了一些关于linux的基础知识,但似乎把这个东西忘记了,其实时不时回顾一下以前的知识还是蛮有意思的,且行且忆! 我们Hadoop 主要由HDFS和 ...

  7. luogu 2679 子串

    子串 史上最简短的一篇博客,毕竟看题解ac心疼我的kmp /* f[i][j][k][0/1]表示A的前i个,B的前j个,用到了k个子串,当前字符选或者不选. 所以f[0][0][0][0]的方案数为 ...

  8. 今天犯的一个错误,导致method GET must not have a request body

    事件经过: 1.在本地机器运行完全正常的程序,手动人工发包到测试环境上,后台日志频频报method GET must not have a request body. 2.使用postman发送pos ...

  9. <%=%>、<%%>、<%@%>、<%#%>的区别

    1.<%= %> 里面放变量名,获取后台的变量值,直接输入变量到页面上,里面放的变量名,未经过encode eg: 后台: seession["ab"]=ab; 前台: ...

  10. CF 287(div 2) B Amr and Pins

    解题思路:一开始自己想的是找出每一次旋转所得到的圆心轨迹,将想要旋转到的点代入该圆心轨迹的方程,如果相等,则跳出循环,如果不相等,则接着进行下一次旋转.后来看了题解,发现,它的旋转可以是任意角度的,所 ...