sass基础—属性嵌套以及跳出嵌套 @at-root

/*注意:定义的变量若是没有使用则不会编译到css文件中。*/
/*1）sass的局部变量*/
$font:14px;//定义
$font:12px ！default; //没有default时是重新赋值，有了它则先取12再重新赋值为14
$maps:(color:black,border-color: blue);//maps定义多值变量
$className:main;//定义类名（此处修改了类名则使用该类名的地方也会相应改变）
body{
/*局部变量*/
$color:red;
/*2）全局变量*/
$color: yellow !global;
color: $color;
}
footer{
font-size: $font;
color: $color;
background-color: map-get($maps,color);
border-color: map-get($maps,border-color);
}

/*3）使用定义好的类*/
.#{$className}{
color: map-get($maps,color);
}
/*4）中横线和下划线的效果一致*/

$text-info:blue;
$text_info:green;
h1{
color: $text-info; //结果为green，因为重新赋值了
}

/*5）样式导入：@import 文件名
1、部分文件（约定：文件名以下划线开头，不会编译成对应的css文件）
2、嵌套导入
3、css原生导入（以.css结尾；导入地址是url：http://xx/css.css;
文件名是css的url()值）
4、scss导入：@import scss文件名(可以不写后缀名或下划线)
*/

/*6）样式书写步骤
1、根据布局html文件的布局来书写样式嵌套的层级关系如：
body{
header{
.logo{
img{}
}
.nav{

}
}
}

*/

/*属性嵌套*/
body{
footer {
background:{
color: red;
size: 100% 100%;
}
}
a{
color: yellow;
&:hover{
color:blue;
}
span{
color: lightgreen;
}
.content{
color: lightgrey;
}
/*引用父选择器a*/
&.box{
color: lightpink;
}
@at-root .container{
width: 1920px;
}
/*跳出嵌套后的效果不再是body和a下面的了，而是独立出来的一个选择器

.container {
width: 1920px;
}

*/
}
}
/*属性嵌套编译结果
body footer {
background-color: red;
background-size: 100% 100%;
}
body a {
color: yellow;
}

body a:hover {
color: blue;
}

body a span {
color: lightgreen;
}
body a .content {
color: lightgrey;
}
body a.box {
color: lightpink;
}
*/

/*7)跳出嵌套
@at-root跳出选择器嵌套，不能跳出@media或@support,若要跳出这两种
则需要使用@at-root(without:midia),@at-root(without:support),

语法关键词：@at-root（@at-root（without:rule）常规css）;
：all (表所有)
：rule(表常规)
：media(表media)
:support;(表support)

*/

/*跳出media*/
header{

.danger{
color: #f00;
}
.warning{
color: pink;
}
.info{
color: blue;
}

/*未跳出media*/
@meida screen and (max-width: 600px){
@at-root .danger{
color: #f0f;
}
}

/*已跳出midia但是header还在
header .warning {
color: #00f;
}

*/
@media screen and(max-width: 600px){
@at-root(without: media){
.warning{
color: #00f;
}
}
}

/*真正跳出media嵌套
.info {
color: #f00;
}

*/
@media screen and(max-width: 600px){
@at-root(without: media rule){
.info{
color: #f00;
}
}
}

 

/*使用all也可以跳出所有

.warning{

color:#00f;

}

*/
@media screen and(max-width: 600px){
@at-root(without: media  all){
.warning{
color: #00f;
}
}
}
}

 

/*实现跳出header,nav下面也有一个text-danger，此时不需要再次跳出，就是跳出了就违背要在nav下的原则了:
.text-danger{
color:#ddd;
}
nav .text-danger{
color:#ccc;
}
*/
@at-root .text-danger{
color: #ddd;
nav &{
color: #ccc;
}
}

}

转载于:https://www.cnblogs.com/LindaBlog/p/10394442.html