Less知识点

最新推荐文章于 2025-05-19 09:45:31 发布

原创最新推荐文章于 2025-05-19 09:45:31 发布 · 545 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#less

Less 专栏收录该内容

1 篇文章

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Less知识点</title>
    <!--
      注意点：
        1、link的rel不是stylesheet,而是stylesheet/less（写错不会起到任何的作用）
        2、我们最好把引入的JS插件放在head中，当结构渲染之前就把less编译为css，渲染结构的过程中，直接的呈现出样式
    -->
    <link rel="stylesheet/less" href="css/less.less">
    <script src="less-2.5.3.min.js"></script>

    <!--生产环境-->
    <!--<link rel="stylesheet" href="1.min.css">-->
</head>
<body>

一、变量

/*
 * @变量名:变量值
 *   特点:变量值修改,以后所有用到变量的地方都会跟着修改
 *
 *   1、凡是公共的值我们一般都使用变量来进行处理（牵一发动全身）
 *   2、less中的变量也是可以进行数学运算的
 *   3、创建函数定义形参(形参也是变量)
 *   ...
 */
@text: #555; //=>代表默认的字体颜色
@img: '../img'; //=>存储的是图片所在目录地址

.box a {
  color: @text;

  &:hover { /*.box a:hover*/
    color: lighten(@text, 20%); //=>基于默认颜色变浅
  }
}

margin-left: unit(-@w/2, px); //=>unit是less中内置的方法,可以给一个值设置或者去除单位（原来有单位就是去除，没有就是设置），例如：unit(10,px)->10px  unit(10px,px)->10

二、函数

.box {
  //=>即是样式类,也是一个函数
  width: 100px;
  height: 100px;
}

.link {
  .box; //=>把BOX中的样式克隆到LINK中一份
  /*
   width: 100px;
   height: 100px;
  */
}

//=======================

.box() {
  //=>和不加括号相比:加括号的在最后进行编译的时候,不进行编译(也就是样式中没有BOX这个样式类,它是一个纯函数)
  width: 100px;
  height: 100px;
}

.link {
  .box(); //=>.box; 不传递参数的情况下,小括号可加可不加
  /*
   width: 100px;
   height: 100px;
  */
}

//=================
.box(@A:10,@B:20) {
  //=>函数可以设置形参,也可以设置默认值
  //=>函数体中有@arguments
}

.link {
  .box; //=>都走默认值
  .box(100); //=>@A:100 @B:20
  .box(@B: 200); //=>@A:10 @B:200
  //...
}

三、嵌套

//=>LESS中每一个大括号都是一个私有作用域（私有变量 / 作用域链）
@H: 200;
.box {
  width: 100px;
  height: unit(@H, px); //=>300px
  @H: 300;

  a {
    color: red;
    height: unit(@H, px); //=>300px

    span {
      font-size: 12px;
    }

    //=>&:连字符,紧挨着链接内容
    &:hover { //=>a:hover

    }

    & > i { //=>a>i 子集筛选
      
    }
  }
}

---------------------------------------------------------------------------------------

//压缩less：

lessc less1.less>../css/style1.css
压缩后的
lessc less1.less>../css/style1.min.css -x

//压缩less（js文件里写如下）

let less=require("less");
less.render('@h:100px;.box{height:@h}',{compress: true},(e,val)=> {
    //compress: true  是否压缩
    //e: 错误信息
    //val:是一个对象 {css:编译后的css}
    //css属性:编译后的css
    console.log(val);
    //{ css: '.box {\n  height: 100px;\n}\n', imports: [] }
    //压缩 { css: '.box{height:100px}', imports: [] }
});

</body>
</html>