使用less一段时间了，之前一直用sass，有时间把项目中用到的方法写下来，好记性不如烂笔头。
1. 变量
值是变量
选择器是变量
属性是变量
图片url是变量
1)值是变量
签名为 @变量名：值。一般我们会把全局用的单独封装一个文件，例如全局换肤颜色，公共组件的css样式。使用时候直接使用 签名。
@toolbar-hover: #F7F5FF;
@toolbar-active: #E6E4F1;
@toolbar-hover-two: #F1F0F7;
.container {
cursor: pointer;
&:hover {
background-color: @toolbar-hover;
}
&:active {
background-color: @toolbar-active;
}
}
2）selector是变量
选择器是变量时候 值不要加引号。例如 @prefixClass：fontcolor，@{prefixClass}这个整体可以是 .fontcolor 也可以是 #fontcolor，如果加类选择器或者id选择器前缀，调用时候就直接是@{prefixClass}。大括号括起来选择器是变量。
.status(@name;@prefixClass) {
@names: @prefixClass;
transition: border-color 0.3s;
&:hover {
.@{prefixClass} {
.bg-img(@name, @endHover);
}
}
}
.status('color',fontcolor);
3）属性是变量
属性是变量，变量必须用大括号括起来。
@width: width;
@height: height;
.dropListTypeGlobalStyle(@cardTwo,@itemWidth,@itemHeight,@menuWidth,@menuHeight) {
.ant-menu-vertical .ant-menu-item {
@{width}: @itemWidth;
@{height}: @itemHeight;
.dropCardTwoSingle(@cardTwo);
.dropCardItemCommon();
}
}
.dropListTypeGlobalStyle(false,73px,88px,290px,327px)
4）img url为变量
变量名 必须使用大括号包裹 ，路径必须用引号。
@iconUrl: 'assets/png/toolbarIcon/';
@endNormal: '-normal.png';
@endHover: '-hover.png';
.bg-img(@name, @endname) {
transition: background-image .3s;
background: url('@{iconUrl}@{name}@{endname}');
&.hover,&.active {
background: url('@{iconUrl}@{name}-hover.png');
background-size: contain;
}
}
2. 嵌套
&符号
媒体查询
1）&符号
&代表选择器名称
.custom {
cursor: pointer;
color: #000;
opacity: 0.6;
&:hover {
color: @primary-color;
}
}
2）media
替代：@media screen and (max-width:1280px){
@media screen{
@media (max-width:1280px){
.container {
left: calc(50% - 450px);
}
}
}
3. 方法函数
无参数时,调用可以加括号也可以不加。
.iconActive {
filter: contrast(0) brightness(2);
opacity: 1;
}
#wrap{
.card;//等价于.card();
}
有参数时，可以设置参数默认值，也可以不设置。@arguments 犹如 JS 中 @arguments 指代的是 全部参数。传的参数中 必须带着单位。
.status(@name;@prefixClass) {
@names: @prefixClass;
transition: border-color 0.3s;
&:hover {
.@{prefixClass} {
.bg-img(@name, @endHover);
}
}
}
.status('color',fontcolor);
.border(@a:10px,@b:50px,@c:30px,@color:#000){
border:solid 1px @color;
box-shadow: @arguments;//指代的是 全部参数
}
#main{
.border(0px,5px,30px,red);//必须带着单位
}
#wrap{
.border(0px);
}
参数不定时候，使用 ... ，ES6 的扩展运算符。
.shadowOne(...){
box-shadow: @arguments;
}
.shadowTwo(@a,...){
box-shadow: @arguments;
}
#shadow{
.shadowOne(1px,4px,30px,red);
.shadowTwo(1px,4px,30px,red);
}
有条件判断时候，无if else，有when and；
#card{
// and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
.border(@width,@color,@style) when (@width>100px) and(@color=#999){
border:@style @color @width;
}
// not 运算符，相当于 非运算 !，条件为 不符合才会执行
.background(@color) when not (@color>=#222){
background:@color;
}
// , 逗号分隔符：相当于 或运算 ||，只要有一个符合条件就会执行
.font(@size:20px) when (@size>50px) , (@size<100px){
font-size: @size;
}
}
#main{
#card>.border(200px,#999,solid);
#card .background(#111);
#card > .font(40px);
}
需要循环方法调用时候,可以使用each。
@iconUrl: 'assets/svg/toolbar/';
@buttons: LineHeight, Orderlist;
.state(@icon, @state) {
background-image: url("@{iconUrl}@{icon}_@{state}.svg");
}
each(@buttons, {
.@{value} {
&:hover div div {
.state(@value, "Hover");
}
}
})
4. 继承
extend
extend可以继承声明的所有样式
.transition{
transition: all .3s ease-out;
}
#wrap{
&:extend(.transition);
}
5. 导入文件
reference
引入但是不编译，使用@import (reference)导入外部文件，但不会添加 把导入的文件 编译到最终输出中，只引用。
@import (reference) "bootstrap.less";
#wrap:extend(.navbar all){}
once
@import语句的默认行为。这表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。
@import (once) "common.less";
@import (once) "common.less"; // this statement will be ignored
multiple
使用@import (multiple)允许导入多个同名文件。
@import (multiple) "common.less";
@import (multiple) "common.less";
6. 注释
可以使用css中的注释：/**/
也可以使用 // 注释 （// 编译的时候会自动过滤掉）
两者的区别：
/**/ 中的注释在编译的是会被编译出来的，会在编译生成的CSS中会出现。
// 是不会被编译的，编译时自动过滤，在编译生成的CSS中没有。
