less中的变量
什么是变量?和js中的概念基本一样
less中定义变量的格式
@变量名称:值;
- less中使用变量的格式
@变量名称;
@w: 400px;
@h: 200px;
- 和js一样可以将一个变量赋值给另外一个变量
@变量名称 : @变量名称;
@h: @w;
和js一样less中的变量也有全局变量和局部变量
定义在{}外面的就是全局的变量,什么地方都可以使用，定义在{}里面的就是局部变量, 只能在{}中使用
注意: less中的变量是延迟加载的,写到后面也能在前面使用和js一样不同作用域的变量不会相互影响, 只有相同作用域的变量才会相互影响，和js一样在访问变量时会采用就近原则
@c: red;
.box1{
@c: blue;
width: @w;
height: @h;
background: @c;
margin-bottom: 20px;
@c: pink;
}
.box2{
width: @w;
height: @h;
background: @c;
}
@c: red;
变量插值
什么是变量插值?在less中如果属性的取值可以直接使用变量, 但是如果是属性名称或者选择器名称并不能直接使用变量，如果属性名称或者选择器名称想使用变量中保存的值,那么必须使用变量插值的格式
变量插值的格式
格式: @{变量名称}
@{s}{
@{w}: @size;
height: @size;
background: red;
}
Less中的运算
- less中的运算和CSS3中新增的calc函数一样, 都支持+ - * / 运算
div{
width: 200px;
height: 200px;
background: blue;
position: absolute;
left: 50%;
/*less中的运算和CSS3中新增的calc函数一样, 都支持+ - * / 运算*/
//margin-left: (-200px * 0.5);
margin-left: (-200px / 2);
}
