目录
一、变量
二、混合
1. 混合写法：
2. 混合带参数：
3. 混合带参数,参数可以带默认值
三、匹配模式
四、嵌套
五、运算
六、逻辑函数
七、字符串函数
1. escape()
2. e()
3. %()
4. replace()
官网地址：Less 函数 | Less.js 中文文档 - Less 中文网
先引入文件：
<!-- 注意less文件一定要在js的文件上面 -->
<link rel="stylesheet/less" type="text/css" href="./css/1.less" />
<script src="https://cdn.jsdelivr.net/npm/less@4" ></script>
一、变量
// 定义变量
@w:100px;
//定义属性名，用的时候要加一个大括号
@aa:color;
//定义路径变量必须加引号，用的时候要加一个大括号
@images:'../images';
.box{
width: @w+100;
height: @w;
background-color: pink;
@{aa}: green;
background-image: url('@{images}/02.jpg');
}二、混合
1. 混合写法：
把一个选择器放入另一个选择器样式里，第二个就具有第一个的样式
.box1{
font: 20px/40px '微软雅黑'; //大小20，行高40
text-align: center;
background: green;
margin: 2px;
}
//混合写法：把另一个选择器名放在这个样式里，这个样式就具有放入选择器的样式
.box2{
width: @width;
height: @width;
.box1(); //可以加括号，可以省略
.bg(pink)
}2. 混合带参数：
//混合带参数
.bg(@a){
background-color: @a;
}
.box3{
width: @width+50;
height: @width+50;
.bg(blue)
}3. 混合带参数,参数可以带默认值
注意：调用时不带实参，使用默认值。带实参，传递实参。
//混合带参数,参数可以带默认值
.border(@b:10px){
border: @b solid green;
}
.box4{
height: @width+20;
width: @width+20;
.border(15px) //不带实参，使用默认值。带实参，传递实参。
}
.border2(@b:5px,@style:solid,@color:black){
border: @b @style @color;
}
.box5{
height: @width+50;
width: @width+50;
// .border2(@b:10px); // 写法一
.border2(10px,dotted,red) //写法二
}
//兼容
.boxShadow(@x:5px,@y:5px,@area:5px,@color:#ccc){
-webkit-box-shadow: @x @y @area @color; //谷歌
-moz-box-shadow: @x @y @area @color; //火狐
-ms-box-shadow: @x @y @area @color; //IE
-o-box-shadow: @x @y @area @color; // opera
box-shadow: @x @y @area @color;
}
.box6{
.boxShadow();
height: @width+50;
width: @width+50;
}三、匹配模式
注意：匹配模式中的第一个值是 自定义的
注意：公用样式 第一个参数是固定的格式【@_】，后面的参数与上面保持一致
.triangle(top,@w:5px,@c:red){
border-width: @w; //边框大小
border-color: transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
.triangle(right,@w:5px,@c:red){
border-width: @w; //边框大小
border-color: transparent transparent transparent @c;
border-style: dashed dashed dashed solid;
}
//公用样式，第一个参数是固定的格式【@_】,后面的参数与上面保持一致
.triangle(@_,@w:5px,@c:red){
width: 0;
height: 0;
overflow: hidden;
}
.box2{
.triangle(top)
}四、嵌套
注意：& ：是上一层选择器
.box {
width: 500px;
padding: 20px;
border: 1px solid rgb(255, 0, 0);
&{ // & : 上一层选择器
border: 5px solid rebeccapurple;
}
h2 {
font-size: 20px/20px '微软雅黑';
}
ul {
margin: 0;
padding: 0;
list-style: none;
li {
height: 30px;
background-color: #ccc;
a {
color: #f00;
&:hover{ // & : 上一层选择器
color: pink;
}
}
}
}
}五、运算
注意：less到4版本后，使用减法，需要在 - 号两边加上空格
注意：多次运算也要加括号
~" "：转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出。不编译
@w:100px;
@q:200px;
.box{
width: @w+100;
height: @w - 50; // 注意使用减法 需要在两边加上空格
border: 1px solid saddlebrown;
position: relative;
left: @w*2;
top: (@w/5); //注意：less到4版本后，必须要加括号。或者在/前加点(./)
margin: ((@q/2) / 2); //注意：多次运算也要加括号
//编码编译，在内容前加【~'内容'】
filter: ~'alpha(opacity:60)'; //在IE中设置透明
}六、逻辑函数
//if
div{
width: (@q / 2); //100
height: (@q / 2);
background-color: if((2>1),blue,pink);
}
//布尔值
@bg:boolean(3<2);
.box3{
width: @q;
height: @q;
background-color: if(@bg,red,black);
}七、字符串函数
1. escape()
escape()函数：将字符串中 url 特殊字符进行编码处理
如下特殊字符：# ^ ( ) { } | : > < ; [ ] =
不转义编码有： , / ? @ & + ' ~ ! $
例如：
// less中
.box{
height:escape('123=abc');
}/*css中*/
.box {
height: 123%3Dabc;
}2. e()
原样输出内容，避免编译。css转义，也可用 ~' '
//less中
.box2{
width: e('1200px');
height: ~'200px';
}/*css中*/
.box2 {
width: 1200px;
height: 200px;
}3. %()
格式化一个字符串
补充：less中占位符分为：a、A、d、D、s、S
a、A、d、D能被任何类型参数替换（颜色值、数字、转义值、表达式…），如果是在字符串中结合使用，整个字符串都会替换进去，包括它的引号，然后，引号会被替换到字符串参数的原来位置，可能被转义或者没有被转义，这取决于占位符是大写字母还是小写字母
s、S能被除了颜色值以外的任何类型的参数替换，如果在字符串中结合使用，只会替换成字符串参数的值，而字符串参数引号被忽略
//less
.box3{
height: 100px;
width: 100px;
background-color: %('%a',pink);
font-family: %('%a %a',"思源宋体","思源黑体");
}/*css中*/
.box3 {
height: 100px;
width: 100px;
background-color: '#ffc0cb';
font-family: '"思源宋体" "思源黑体"';
}4. replace()
参数：
-
string：要搜索和替换的字符串。 -
pattern：要搜索的字符串或正则表达式模式。 -
replacement: 替换匹配模式的字符串。 -
flags：（可选）正则表达式标志。
返回： 具有替换值的字符串。
//less
.box3::after{
content: replace("hello,mars?", "mars?", "dui");
}//css
.box3::after {
content: "hello,dui?";
}
