526互联

LESS--对官方文档的理解

发布时间 2023-07-12 17:22:18作者: tripl3T

使用less一定要注意是有一定语义的，不能随意修改之前的样式。尤其是你需要对某个样式进行引用时，即使在引用之后在进行修改，也会对之前的引用造成影响。

变量

基本语法:

@width : 10px; //@变量名：值  为变量基本形式
.d {
    width: @width;
    height: @width + 10;
}

变量不止可以用来规定值，还可以表示其他

表示选择器名称

@my-selector: banner;
.@{my-selector} {
  font-weight: bold;
  line-height: 40px;
  margin: 0 auto;
}

表示路径

URL路径

在项目进行过程中，可能会导致资源位置发生变化，使用变量表示路径前半部分可以简化对路径的修改

@images: "../img";
body {
  color: #444;
  background: url("@{images}/white-sand.png");//注意使用时需要用{}包裹
}
导入语句路径
@themes: "../../src/themes"; 
@import "@{themes}/tidal-wave.less";//也需要用{}包裹

表示属性名

@property: color;
.widget {
  @{property}: #0ee; //注意用{}
  background-@{property}: #999;
}

编译后的css为

.widget { 
	color: #0ee; 
	background-color: #999; 
}

作为变量的属性

使用$prop语法将属性视为变量

.widget {
    color: #efefef;
    background-color: $color;
}

父级选择器

使用父级选择器&

  1. 首先的用途是嵌套伪类选择器时使用
  2. 其次可以用于生成重复类名
  3. 值得注意的是&指的不仅仅是最近的父选择器而是所有父选择器
//生成重复类名
.button {
    &-ok {
      background-image: url("ok.png");
    }
    &-cancel {
      background-image: url("cancel.png");
    }
    &-custom {
      background-image: url("custom.png");
    }
}

@import规则

less中@import规则（引入外部样式）不必放在所有规则最前面，任意位置都可以
如果文件有.css扩展名则视为css文件，有其他扩展名或者没有扩展名都会被视作less文件

导入选项

实现语法：@import (keyword) "filename";
选项名称：reference,inline,less,css,once,multiple,optional

具体内容在官方文档中

继承

混入

可以混合使用类选择器和ID选择器

.a, #b { 
	color: red; 
} 
.mixin-class { 
	.a(); 
} 
.mixin-id { 
	#b(); 
}

带括号的混入不会被编译为css输出，这意味着将选择器只作为变量（类似）是可能的

参数混合

.border-radius(@radius) { //定义
	-webkit-border-radius: @radius; 
	-moz-border-radius: @radius; 
	border-radius: @radius; 
}
#header { //使用
	.border-radius(4px); 
} 
.button { 
	.border-radius(6px); 
}

还可以给参数设置默认值

.border-radius(@radius: 5px) { //定义
	-webkit-border-radius: @radius; 
	-moz-border-radius: @radius; 
	border-radius: @radius; 
}
#header { //使用
	.border-radius(); 
}

mixin中的@arguments变量和JavaScript中函数的argument数组类似，包含着mixin的所有参数。
使用...来接受可变数量的参数
.mixin(@a, @rest...)@rest包含除了a之外的所有变量

模式匹配（Pattern-matching）

根据传入的参数改变混入的行为

//定义mixin
.mixin(dark, @color) { 
	color: darken(@color, 10%); 
} 
.mixin(light, @color) { 
	color: lighten(@color, 10%); 
} 
.mixin(@_, @color) { 
	display: block; 
}

根据上面定义运行下面代码

@switch: light; 
.class { 
	.mixin(@switch, #888); 
}

得到的css如下

/*根据light得到浅色*/
.class { 
	color: #a2a2a2; 
	display: block; 
}

下面这个例子阐述了另一个用法

.mixin(@a) { //如果只有一个参数匹配这个定义
	color: @a; 
} 
.mixin(@a, @b) { //两个参数匹配这个定义
	color: fade(@a, @b); 
}

使用混入作为函数

使用[]从混入规则中选择某一个值

.average(@x, @y) { 
	@result: ((@x + @y) / 2); 
} 
div { 
	padding: .average(16px, 50px)[@result];//传参再选择其中一个值 
}

递归混入

less简单例子

.loop(@counter) when (@counter > 0) { 
	.loop((@counter - 1)); // 调用自身 
	width: (10px * @counter); 
} 
div { 
	.loop(5); // 开始递归
}

转换的css代码为

div { 
	width: 10px; 
	width: 20px; 
	width: 30px; 
	width: 40px; 
	width: 50px; 
}

更高级的例子（很好的说明了如何用循环选中相似选择器）

.generate-columns(4); 
.generate-columns(@n, @i: 1) when (@i =< @n) { //传入参数为4，i初始化为1
	.column-@{i} { //变量用作选择器名
	width: (@i * 100% / @n); 
	} 
	.generate-columns(@n, (@i + 1)); //调用自身
}

转换为css

.column-1 { 
	width: 25%; 
} 
.column-2 { 
	width: 50%; 
} 
.column-3 { 
	width: 75%; 
} 
.column-4 { 
	width: 100%; 
}

嵌套（可代替级联）

.d1 {
    background-color: #888;
    .d1-1 {
        width: 5px;
        height: 5px;
        background-color: #0e7dec;
    }
}

清除浮动写法  &代表当前元素选择器父类

.clearfix {
    display: block;
    zoom: 1;
    &:after {
      content: " ";
      display: block;
      font-size: 0;
      height: 0;
      clear: both;
      visibility: hidden;
    }
  }

通过嵌套写@规则

.d2 {
    width: 200px;
    @media (min-width:800px) {
        width: 600px;
        @media (min-height:500px) {
            background-color: black;
        }
    }
}

less中的计算操作

计算时结果的单位以最左边出现的单位为准，如果其他单位可以转换则转换，
无法转换则忽视单位只看其数值部分的结果。

/*此注释在编译为css输出时被保留*/
@conversion-1: 5cm + 10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm
// 单位无法转换
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%
//除法必须要用（）包住
background-color: (#FFFFFF / 16); //结果是 #101010

//转义：允许用任何字符串表示属性或变量值
@min768: ~"(min-width: 768px)";
@min768: (min-width: 768px);  现在直接这样写就可以了
.d3 {
    @media @min768 {
        font-size: 1.2rem;
    }
}
//函数：less提供了很多函数，在需要使用的时候查文档即可
#bundle() { //在后面加（），里面的就可以用了
	.button {
		display: block;
	    border: 1px solid black;
	    background-color: grey;
	    &:hover {
	        background-color: white;
        }
    }
    .tab { ... }
    .citation { ... }
}
#header a {
     color: orange;
     #bundle.button();  // 在这里使用
}
  
//映射：多个颜色放在一起，以使用

#colors() {
    primary: blue;
    secondary: green;
}
.button {
    color: #colors[primary];
    border: 1px solid #colors[secondary];
}