less学习笔记

一、什么是less？

Less是CSS预处理语言，可以使用变量、嵌套、运算等，便于维护项目CSS样式代码。

二、less安装

使用npm包管理工具，全局安装less包

npm install -g less

less安装好的同时，lessc也安装好了

通过 lessc -v 可查看lessc的版本

lessc的作用：

        将less文件转成css文件

lessc 文件名.less 文件名.css

在浏览器端使用less

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js"></script>

在VScode中配置less

1、在扩展中搜索Easy LESS并安装

2、点击设置找到Easy LESS，并在setting.json中编辑

3、在less.compile中添加配置项outExt

"less.compile": 
        
            "compress": false, // true => remove surplus whitespace
            "sourceMap": false, // true => generate source maps (.css.map files)
            "out": true, // false => DON'T output .css files (overridable per-file, see below)
           "outExt":".css" 
    },

配置完成后重启VScode即可

三、less语法

1、注释

less文件的注释有两种

        以//开头的注释，不会被编译到css文件中

        以/**/包裹的注释会被编译到css文件中

2、变量

变量可以当做普通的变量、选择器变量、属性变量、URL变量、声明变量来使用。

使用@来声明一个变量

        作为普通属性值使用：直接使用@pink

        作为选择器和属性名：#@{selector的值}的形式

//作为普通属性值来使用
@color:pink;

//作为选择器和属性名,#@{selector的值}的形式
@m:margin;
@selector:#warp;

* {
    @{m}:0;
    padding:0;
}

@{selector} {
    background:@color;
    position:relative;
}

变量定义语法：

@变量名：值

变量使用语法：

@变量名

变量的作用域与JS中变量的作用域一致

普通变量

less：

@bgColor: #ffffff;

.div {
  background-color: @bgColor;
}

编译后的css：

.div {
  background-color: #ffffff;
}

作为url：@{url}

变量的延迟加载

@mySelector: #wrap;
@wrap: wrap;
@{mySelector} {
  //display: @wrap;
  color: red;
  width: 50%;

}

//类选择器
.@{wrap} {
    color: blue;
    width: auto;
}

#@{wrap} {
    color: blue;
    width: auto;
}

//属性变量
@boderStyle:boder-style;
@soild:soild;

@{mySelector} {
    @{boderStyle}:@soild;
}

//url变量
@images:"../img";
body {
    background-image: url("@{images}/bg.jpg");
}

//声明变量
@background:{background-color: aliceblue;};
body {
    //注意要加括号
    @background();
}

//变量运算
//加减法时，以第一个数据的单位为准，乘除法时，单位要统一
//在连接运算的时候，注意添加空格，避免变量报错
@width:300px;
@color:red;
#wrap {
    width: @width + 10;
    height: @width / 2;
    color: @color;
}

//变量的作用域
//就近原则，谁离得近，听谁的
@var:@a;
@a:100%;
#wrap {
    width: @var;
    @a:9%;
}
/*
结果如下：

#wrap {
  width: 9%;
}

*/

&的用法：

//&代表的是上一层选择器的名字

.center {
  text-align: center;
  //代表.center选择器的子元素h1的样式
  & h1 {
    font-size: 2em;
  }
}

//媒体查询
#main{
    @media screen{
        @media (max-width: 600px) {
            width: 100px;
        }
    }
}

//定义私有样式
#main {
    &.show {
        display: block;
    }
}
.show {
    display: none;
}

3、less中的嵌套规则

1、基本嵌套

2、&的使用：&代表上一层选择器名字

        如果less文件中不加&，编译出的css文件就变成#warp .inner hover，就是把hover当成子元素导致中间有空格；正确写法如下，&:hover相当于#warp .inner:hover

4、less的混合

混合就是将一系列属性从一个规则集引入到另一个规则集的方式

混合的分类：

        1、普通混合（会编译到css文件中）
        2、不带输出的混合（普通混合的基础上加括号，就不会编译到css文件中）
        3、带参数的混合
        4、带参数并且有默认值的混合
        5、带多个参数的混合
        6、命名参数
        7、匹配模式

//无参数方法
//使用时类似声明的集合，使用时直接键入即可
// . 和 # 都可以作为方法前缀，方法后写不写()看个人习惯
.card {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px;
}
#wrap {
    .card;
}

/*

效果如下：
.card {
  background-color: #fff;
  border: 1px solid #ccc;
  padding: 10px;
}
#wrap {
  background-color: #fff;box
  border: 1px solid #ccc;
  padding: 10px;
}

*/

//默认参数方法
.border (@a:10px,@b:50px,@color:#ccc,@c:30px) {
    border:solid 1px @color;
    box-shadow: @arguments;
}
//方法调用
#wrap {
   .border();
}

//方法的匹配模式
.triangle(top,@width:20px,@color:#000) {
    border-color: transparent transparent @color transparent;
}
.triangle(right,@width:20px,@color:#000) {
    border-color: transparent @color  transparent transparent;
}
.triangle(bottom,@width:20px,@color:#000) {
    border-color:@color transparent transparent transparent;
}
.triangle(left,@width:20px,@color:#000) {
    border-color: transparent transparent transparent @color;
}
#main{
    .triangle(left, 50px, #999)
}
//展现效果
// #main {
//     border-color: transparent transparent transparent #999;
//   }
  
//方法的命名空间
#card() {
    background: red;
    .d(@w: 300px);
    width: @w;
    #a(@h: 300px) {
        height: @h;
    }
}
//父级方法不加括号
#main {
    #card .d(100px);
}

//方法的条件筛选
#card{
    //when 条件筛选
    .border(@width, @color, @style) when (@width > 100px) and(@color = #000){
        border: @style @color @width;
    } 
    //whennot 条件筛选
    .border(@width, @color, @style) when not (@width > 100px) and(@color = #000){
        border: @style @color @width;
    } 
    //default 条件筛选
    .border(@width, @color, @style) {
        border: @style @color @width;
    } 
    // , 逗号分隔多个条件筛选
    .font(@size, @weight) when (@size > 10px) and (@weight = bold) {
        font-size: @size;
    }
    //调用方法
    .border(20px, #000, solid);
}
#main {
    #card>.border(200px,#999,soild);
}

//数量不定的参数
.boxShadow(...){
    box-shadow: arguments;
} 
.textShadow(...){
    text-shadow: arguments;
} 
#main {
   .boxShadow(0 0 10px #000, 2px 2px 5px #ccc);
   .textShadow(2px 2px 5px #ccc, 0 0 10px #000);
}

//方法使用important
.border2 {
    border: 1px solid #ccc;
    margin: 50px;
}
#main {
    .border2 !important;
}

//循环方法
.generate-columns(4);
.generate-columns(@n,@i:1) when (@i =< @n) {
    .column-@{i}{
        width: (@i*100%/@n);
    }
    .generate-columns(@n,@i+1);
}

//属性拼接方法
.border3 {
    box-shadow: inset 0 0 10px #555;
}
#main {
    .border3();
    box-shadow+:0 0 20px #999;
}

5、arguments变量

使用arguments可以 在.border(1px,solid,black)不需要按照顺序写

6、less计算wmw

只要一个单位就可以计算

7、less继承

性能比混合高，灵活性比混合低

//extend 继承
.animation {
  transition: all 0.3s ease-in-out;
  .hide {
    transform: scale(0);
  }
}
#main{
    &:extend(.animation);
} 
#con {
    &:extend(.animation .hide);
}

//all 全局搜索替换
#main {
    width: 200px;
}
#main {
    &:after{
        content: 'less is good';
    }
}
#wrap:extend(#main all){

}

//减少代码的重复性
.Method{
    width: 200px;
    &:after{
        content: 'less is good';
    }
}
#main{
    .Method;
}

8、文件的导入

导入其他文件

@import “文件名”

        reference        导入但不编译

        once                仅导入一次

        multiple            允许导入多个同名文件