前端less学习

Posted 2020-06-17

Less 是什么？

Less is more,than CSS.

Less就是搞笑高效编写和维护CSS的一种语法。

1.下载Koala考拉，一款国人编写的less开发器。

2.可以用Sublime Text3编写Less文档。

 

好，开始学习啦！

1. 注释

/*会被编译到css文件的注释*/

//不会编译...

2.变量

声明：@变量名:值（+单位）

使用：@变量名

3.混合（有点像函数，又像宏定义）

把某个选择器（class或者id或者一些html标签）的效果应用在当前的选择器，

当前{

 　　.某个类;
}

可以加参数

.当前类{
     .某个类(一个数);  
}
.某个类(@参数1){
    属性:@参数1;
}    

参数可带默认值

.当前类{
     .某个类(可省略);
//括号不能省略  
}
.某个类(@参数1:默认值){
    属性:@参数1;
}  

3.匹配模式（就像if判断）

.当前类{
     .某个类(flag1,值);
//调用flag1的那个  
}
.某个类(flag1,@参数1:默认值){
    属性:@参数1;
}  
.某个类(flag2,@参数1:默认值){
    属性:@参数1;
}  

固定带上的

.某个类(@_,@参数1:默认值){
    属性:...
}  

4.运算

就是变量的+-*/()运算。

width:@w+20;

可不带单位

5.嵌套

将下面css写法改为嵌套写法

.list{
    ...
}
.list a{
   ...
}
.list span{
   ...
}

 这样嵌套

.list{
   ...
   a{...}
   span{...}
}

另外&符号表示上一层选择器

.list{
   ...
   a{
    ...
    &:hover{...}
    }
}

 [email protected]变量

可以代表所有传参。

.border(@w:30px,@c:red,@xx:solid){
     border:@w,@c,@xx;
}

.border(@w:30px,@c:red,@xx:solid){
     border:@arguments;
}

@arguments(40px);

这样就可以设置第一个参数。

7.避免编译 和 !important

~‘这里面的内容不会编译出来‘

可以用来放滤镜、不需要less计算出来的内容。

.test_important{
    .border()!important;
}

它会在混合的所有属性后面加上!important

8.导入less/css文件

@import "ku" ;
//导入ku.less，编译时一起编译出来
@import "a.css";
//导入a.css，不编译，在css里还是有‘导入a.css‘的作用
@import (less) "a.css";
//导入a.css，编译。

9.加个括号可以让没用到的混合不编译

.xx(){...}