less的运用

目录

一、变量 

二、混合

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?";
}