sass04 嵌套、继承、占位符
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 嵌套、继承、占位符的更多相关文章
- sass 继承 占位符 %placeholder
@extend //SCSS .btn { border: 1px solid #ccc; padding: 6px 10px; font-size: 14px; } .btn-primary { b ...
- spring源码分析之配置文件名占位符的解析(一)
一.直接写个测试例子 package com.test; import org.junit.Test; import org.springframework.context.ApplicationCo ...
- Spring PropertyResolver 占位符解析(二)源码分析
Spring PropertyResolver 占位符解析(二)源码分析 Spring 系列目录(https://www.cnblogs.com/binarylei/p/10198698.html) ...
- SpringBoot环境属性占位符解析和类型转换
前提 前面写过一篇关于Environment属性加载的源码分析和扩展,里面提到属性的占位符解析和类型转换是相对复杂的,这篇文章就是要分析和解读这两个复杂的问题.关于这两个问题,选用一个比较复杂的参数处 ...
- sass中 混合宏 VS 继承 VS 占位符 各自的使用时机和特点
初学者都常常纠结于这个问题“什么时候用混合宏,什么时候用继承,什么时候使用占位符?”其实他们各有各的优点与缺点,先来看看他们使用效果: a) Sass 中的混合宏使用 举例代码见 2-24 行 编译出 ...
- css编译工具Sass中混合宏,继承,占位符分别在什么时候使用
//SCSS中混合宏使用 @mixin mt($var){ margin-top: $var; } .block { @include mt(5px); span { display:block; @ ...
- Sass混合宏、继承、占位符
混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...
- sass---Sass混合宏、继承、占位符
混合宏-声明混合宏如果你的整个网站中有几处小样式类似,比如颜色,字体等,在 Sass 可以使用变量来统一处理,那么这种选择还是不错的.但当你的样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无 ...
- Sass之混合宏、继承、占位符
1.混合宏. 当样式变得越来越复杂,需要重复使用大段的样式时,使用变量就无法达到我们目的了.这个时候混合宏就派上用场了. 而使用混合宏时,首先要声明混合宏,而声明混合宏时有两种,不带参数混合宏和带参数 ...
随机推荐
- NoReferencedTableError: Foreign key associated with column ** with which to generate a foreign key to target column 'id'
1.使用 python flask 框架做项目时,在实体类中配置了 映射关系, message: id = db.Column(db.Integer, primary_key=True)message ...
- [terry笔记]文件操作
如下记录一次作业: 很显然,我这个应该属于二逼青年版,会在以后更新文艺青年版的答案. 1.模仿sed,一个文件中,用新字符串替换老字符串. # file = input("file_name ...
- nginx配置修改
改变nginx配置想让它生效而不停止服务,如下两种方式都可以:1) 检查nginx配置: nginx -t; 配置重载: nginx -s reload2) 检查nginx配置: nginx -t; ...
- UVALIVE 4256 Salesmen
Salesmen Time Limit: 3000ms Memory Limit: 131072KB This problem will be judged on UVALive. Original ...
- ZJU 2676 Network Wars
Network Wars Time Limit: 5000ms Memory Limit: 32768KB This problem will be judged on ZJU. Original I ...
- Core abstraction layer for telecommunication network applications
A new sub-system, the core abstraction layer (CAL), is introduced to the middleware layer of the mul ...
- stl之hash_map
- vijos-1382 寻找主人
题意: 给出两个同样长度的数字串: 求两个串是否本质同样.同样则输出最小表示. 长度L似乎给的不正确,大概是2000000左右吧: 题解: 最小表示法裸题.证明正确性啥的详见论文吧: 这东西大体的思路 ...
- 15.boost最小生成树 prim_minimum_spanning_tree
#include <iostream> #include <boost/config.hpp> //图(矩阵实现) #include <boost/graph/adjac ...
- Linux基础02
** Linux基本操作常用命令(二) ** 用户名与主机名 当你进入Linux终端时,你会看到如下样式的图片: 其中[z@z01]方括号内的z表示当前系统登录操作的用户名,@后的z01表示当 ...