less入门--常用

以下顺序不分重要主次，随意写的

1、编译工具

Koala http://koala-app.com/index-zh.html
node.js
浏览器使用

2、变量

定义: @变量名:值

@w:30px；
@c:red；
@xx:solid；

变量要在使用前定义，注意位置

// 变量定义
@w:30px；
@c:red；
// 变量的使用
border_arg(@w, @c, @xx){
     border:@arguments;
     // 等同于
     border: @w @c @xx;
}
@xx:solid；
// 以上代码会报错 xx未定义，因为它在调用之后定义的，获取不到

3、混合

.box也拥有了border的样式，也就是混合

.border{
	border:1px solid #000;
}
.box{
	.border; 
}

默认值

传参、及默认值概念（和es6函数参数的默认值一样）
若无默认值则调用时必须传值，否则会报错

.border(@w){
    border:@w solid #000;
}
.border(2px); // 正确使用
.border(); //会报错

传参

不传参则使用默认值2px
传参使用传的参数

.border(@w:2px){
	border:@w solid #000;
}
// 使用
.border();   --不传参
.border(10px);  --传参

@arguments变量，表示所传入的所有参数

border_arg(@w, @c, @xx){
     border:@arguments;
     // 等同于
     border: @w @c @xx;
}

4、匹配模式

// 定义
.pos(r){position:relative}
.pos(a){position:absolute}
.pos(f){position:fixed}
// 使用
.pipei{
	height:200px;
	width:200px;
	.pos(f);
}

5、循环

有个重点：.bgImageXXX是生成的类名，但是less中需要先定义 .bgImage样式，要不然出不来，具体原因还不太清楚

// 定义数组
@bgImageList：0,1,2,3;
// 定义循环
.bg-loop(@list,@i:1,@val:extract(@list,@i)) when (@i < length(@list)+1){
    .bgImage@{val}{
        width:100%;
        height:100%;
        display: inline-block;
        background: url("../image/@{val}.png") no-repeat center center;
        background-size: contain;
    }
    .bg-loop(@list,(@i+1));
}
.bg-loop(@bgImageList);
// 生成  .bgImage0，.bgImage1，.bgImage2，.bgImage3
// .bgImage必须定义
.bgImage{
    width:100%;
    height:80%;
    display: inline-block;
    background-size: contain;
}

类名的调用(react为例)
以拼接形式增加类型 bgImagexxx

import styles from 'xxx.less';
...
render(){
const list=[0,1,2,3];// 与less中数组定义内容一样
	return(
		{list.map((item)=>{
			return(
				<div className={styles.bgImage + item}></div>
			)
		})}
	)
}

6、单位换算定义，使用

单位换算定义

.vh(@name, @px){
   @{name}:(@px/(1080/100)) *1vh;
}

.vw(@name,@px){
   @{name}:(@px/(1920/100)) *1vw;
}

使用

body{
   .vw(width,540);
   .vh(height,46);
   .vh(line-height,46);
}

/*实际生成*/
body{
   width:540px;
   height:46px;
   line-height:46px;
}

7、注释

注释有两种
/**/ 编译时会保留注释
// 编译时会自动过滤（建议使用）

8、运算

+、-、*
只要变量带单位即可，运算时不用加单位

@test:300px;
.box{
	width:@test + 20;
}
// 生成 width:320px

也可以用于颜色值（不建议使用，因为颜色值没那么准确）

color:#ccc - 10;
// 表示比#ccc深一些，自动转换为255-10

9、嵌套规则

嵌套建议选择后代选择器，层级多找得多，比如 li>a 可以都写同级

// css
.list{}
.list li{}
.list a{}
// less嵌套写法
.list{
	.li{}
	a{}
}

&代表他的上一层选择器
如果类名为 title中的 .title_nav 也可以写成 &_nav

a{
	float:left;
	&:hover{
		color:red;
	}
}

10、避免编译

less不认识的专有语法，要在字符串中加 ~ ，表示不编译，原封放入css中

width:calc(100%-35);
需要写成  width:~ 'calc(100%-35)';

11、可引入其他less文件或css

@import ‘less文件名’； less文件可以不写后缀
@import (less) ‘a.css’; 写在哪里，导入的样式酒会编译在哪里

kingsha.

发布了18 篇原创文章 · 获赞 0 · 访问量 368

私信关注