Sass

Posted 2021-01-26 yuesu

1.使用变量

1) 变量声明

2) 变量引用

3) 变量中中划线和下划线指向同一个变量

$font-color:red;
$font-border:1px solid $font-color;

.box{
    border:$font_border;//$font-border===font_border
    color:$font-color;
}

2. 嵌套CSS 规则

1) 父选择器的标识符&

应用：添加伪类； 在父选择器之前添加选择器

$font-color:red;
.box{
    color:$font-color;
    &:hover{
        color:blue;
    }
    body.ie & { color: green }//编译后 body.ie .box {color: green; }
    
}

 2) 群组选择器的嵌套

.box {
    h1, h2, h3 {
      color:red;
    }
}

 3) 子组合选择器和同层组合选择器：>、+和~

 

//  >:选择.box下紧跟着的子元素,
.box > span{
    color:red;
}

//  +:选择.box后紧跟着同层的元素,
.box + span{
    color:red;
}

//  ~:选择.box后同层的元素,不管它们之间隔了多少其他元素：
.box ~ span{
    color:red;
}