以//开头的注释不会编译到css文件中,但是/*开头的注释会被编译到css文件中
less中的变量都是在块作用域下的。
变量
less中用@声明一个变量,eg:@pink。
1.作为普通值来使用:@pink
2.作为选择器和属性名:(但是用的很少)
比如:
@m:margin;
@selector:#wrap;
*{
@{m}:0;//这是属性名
padding:0;
}
@{selector}{//这是选择器
}
3.作为url:@{url}
4.变量的延迟加载
@val:0;
.class{
@val:1;
.brass{
@val:2;
three:@val;//less中变量都是延迟加载的,就是说这里的val会等brass作用域的变量解析完,再看val的值是多少,所以应该是3
@val:3;
}
one:@val; //one:1
}
less中的嵌套规则
基本嵌套规则
#header {
color: black;
}
#header .navigation {
font-size: 12px;
}
#header .logo {
width: 300px;
}
#header {
color: black;
.navigation {
font-size: 12px;
}
.logo {
width: 300px;
}
}
&的使用
如果不用&,
#wrap{
...
:hover{
}
}
会被编译为
#wrap :hover{
}
多了一个空格,想要空格没有,就得加&。因为不加&,它俩就是父子关系,想让它俩平级,就加&。
less混合
混合就是讲一系列属性从一个规则集引入到另一个规则集的方式。
#wrap{
position:relative;
.inner{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
background:@color;
height:100px;
width:100px;
}
.inner2{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
background:@color;
height:100px;
width:100px;
}
}
在这段代码中,inner和inner2有大量重复代码。就可以用混合。
.mix{
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
background:@color;
height:100px;
width:100px;
}
#wrap{
.inner{
.mix;//混合的调用
}
.inner2{
.mix;
}
}
1.普通混合
2.不带输出的混合
3.带参数的混合
.mix(@width:10px,@height,@color){
position:absolute;
left:0;
right:0;
top:0;
bottom:0;
margin:auto;
background:@color;
height:@height;
width:@width;
}
#wrap{
.inner{
.mix(100,100,red);
}
.inner2{
.mix(200,200,blue);
}
}
4.带参数并且有默认值的混合
5.带多个参数的混合
6.命名参数(就是在传参的时候,如果顺序不对的话,告诉传入的变量对应的是哪个变量)
.inner2{
.mix(@color:black);
}
7.匹配模式
想在页面画三角形,方向自定义。
triangle.less:
.triangle(@_){//如果第一个混合的第一个参数是@_,那么不管调用下面哪个混合,都会把第一个混合带上。
width:0px;
height:0px;
}
.triangle(L,@w,@c){
width:0px;
height:0px;
border-width:@w;
border-style:solid;
border-color:transparent transparent transparent @c;
}
.triangle(R,@w,@c){
width:0px;
height:0px;
border-width:@w;
border-style:solid;
border-color:transparent @c transparent transparent;
}
xx.less:
@import "./triangle.less";
#wrap .inner{
.triangle(L,40px,red);
}
8.arguments变量
.border(@1,@2,@3){
border:@arguments;
}
#wrap .sjx{
.border(1px,solid,black);
}
less运算
就是加减乘除.
运算符的左右两侧必须有个空格隔开。
两个数参与运算,如果只有一个数有单位,最后结果就以这个单位为准
两个数参与运算,如果两个数都有单位,而且单位不一样,最后结果以第一个数的单位为准。
#wrap .sjx{
width:(100 + 100px);
}
less继承
继承性能比混合高,灵活性没有混合好。继承不能带参数。
.center{
position:absolute;
.....
}
.inner{//处理的时候会.center,#wrap .inner{},用.center的规则集
&:extends(.center);
&nth-child(1){
width:100px;
height:100px;
background:red;
}
}
less避免编译
*{
margin:100 * 10px;
padding:~"calc(100px + 100px)";//避免编译用~“”括起来,让浏览器自己计算
}
命名空间
#name(){
background:black;
.a{
....
}
}
.wrap{
background:red;
#name >.a;//这个就是命名空间
}
条件表达式
.mixin(@a) when(lightness(@a)>=50%){
background-color:black;
}
循环
.loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // next iteration
width: (10px * @counter); // code for each iteration
}
div {
.loop(5); // launch the loop
}
合并属性
1.在需要合并的属性的:前加上+就可以完成合并,合并以,分割属性
.mixin() {
box-shadow+: inset 0 0 10px #555;
}
.myclass {
.mixin();
box-shadow+: 0 0 20px black;
}
会被编译成
.myclass {
box-shadow: inset 0 0 10px #555, 0 0 20px black;
}
2.以空格分割,在需要合并的属性的:前加上+_完成合并
.mixin() {
transform+_: scale(2);
}
.myclass {
.mixin();
transform+_: rotate(15deg);
}
会被编译成
.myclass {
transform: scale(2) rotate(15deg);
}