码迷,mamicode.com
首页 > 其他好文 > 详细

Sass

时间:2018-12-13 14:27:11      阅读:152      评论:0      收藏:0      [点我收藏+]

标签:变量   嵌套   标识   选择   span   使用   font   其他   添加   

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;
}

 

 

 

 

Sass

标签:变量   嵌套   标识   选择   span   使用   font   其他   添加   

原文地址:https://www.cnblogs.com/yuesu/p/10113609.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!