LESS

LESS嵌套规则与运算

2019-05-26  本文已影响0人  Leophen
1. 嵌套规则

(1)什么是嵌套规则:嵌套规则模仿了 HTML 的结构,让 CSS 代码更简洁明了

(2)示例:

#header{
    color:red;
    .nav{
        font-size:16px;
    }
    .logo{
        width:300px;
    }
}
#header {
    color: red;
}
#header .nav {
    font-size: 16px;
}
#header .logo {
    width: 300px;
}
2. 改变选择器的顺序

(1)说明:将&放到当前选择器之后,就会将当前的选择器插入到所有的父选择器之前

(2)示例:

ul{
    li{
        .conter &{
            background:red;
            width:200px;
            height:200px;
        }
    }
}
.conter ul li {
    background: red;
    width: 200px;
    height: 200px;
}
3. 组合使用生成所有可能的选择器列表
p,a,ul,li{
    border-top:2px solid red;
    & &{
        border-top:0;
    }
}
p,a,ul,li {
    border-top: 2px solid red;
}
p p,p a,p ul,p li,a p,a a,a ul,a li,ul p,ul a,ul ul,ul li,li p,li a,li ul,li li {
    border-top: 0;
}
4. 运算

(1)说明:任何数值、颜色和变量都可以进行运算

(2)数值型运算:less 会自动推断数值的单位,所以不必每个值都加上单位

(3)示例:

.wp{
    width: 450px+450;
}
.wp {
    width: 900px;
}
5. 颜色值运算

(1)less 在运算时,先将颜色值转换为 rgb 模式,然后在转换为 16 进制的颜色值并且返

(2)示例

.content{
    background:#000000 + 21;
}
.content {
    background: #151515;
}

注意:既然是转换为 rgb 模式,由于 rgb 的取值范围是 0~255,所以计算时不能超过这个区间,超过默认使用最大值 255 计算,同时不能使用颜色名称(如:red、green等)进行计算

上一篇 下一篇

猜你喜欢

热点阅读