Less学习笔记

发表于 更新于 分类于 阅读次数： 本文字数： 2.8k 阅读时长 ≈ 3 分钟
Less学习笔记

Less介绍

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

Less并没有减少CSS的功能，而是在现有的CSS语法上为CSS加入了程序设计语言的特性。

Less的安装

通过 npm 安装

npm i less -g

Less的基础使用

创建以.less为后缀名的文件，文件内书写less语句。

Less变量

@variableName: value

Less变量命名规范

  • 必须由@为前缀

  • 不能包含特殊字符

  • 不能以数字开头

  • 大小写敏感

    eg.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    @color: blue;
    @imgurl: "../img";
    @border: 1px;
    @background: {
        background: red;
        weight: 100px;
        border: @border solid red;
        }
    body{
        @background();
        backgroud-color: @color;
    }
    div{
        color: @color;
    }

    Less编译

    通过命令行

    语法：lessc --选项 源文件地址 目标文件名

    eg. lessc bootstrap.less bootstrap.css

    通过VScode插件

    下载 Easy LESS 插件将less文件编译为css，每次保存后会自动生成css文件。

    Less嵌套

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    .classname{
        width:100px;
        display: flex;
        .divclass{
            width: 50px;
            background-color: yellow;
            .imgname{
                width: 100%;
            }
        }
    }

    Less伪类选择器

    注意点：当遇见（交集、伪类、伪类选择器）

    • 内层选择器前若没有&符号，则被解析为父选择器后代。

    • 若有&符号，则被解析为父元素自身或父元素伪类。

    • &符表示本元素的父元素。

    1
    2
    3
    4
    5
    6
    a{
        color: red;
        &:hover{
            color: blue;
        }
    }

    Less的高级使用

    Less运算

    1
    2
    3
    4
    5
    6
    @border: 5px;
    div{
        height: (120px - 100);
        border: @border+5 solid black;
        background: #666 - #333;
    } //最好使用括号

    • 运算符两侧必须敲一个空格隔开。

    • 两数参与运算，且只有一个有单位，则结果以该单位为准。

    • 两数参与运算，且都有单位，则以第一个单位为准。

    无参方法与默认参数方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    .method1(){
        background-color: yellow;
        box-shadow: 1px 1px 1px gray;
    } //无参方法
    .method2(@a:1px,@b:2px,@c:3px,@color:#123123){
        border: @a solid @color;
        box-shadow: @arguments; //arguments代表全部参数
    }
    #main1{
        .method1();
    }
    #main2{
        .method2();
    } //两种方法均被调用才能生效

    不定参数

    1
    2
    3
    4
    5
    6
    .boxShadow(...){
        box-shadow: @arguments;
    }
    #main{
        .boxShadow(1px,2px,3px,red);
    }

    方法的匹配模式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    .method(top,@width:20px,@color:#666){
        border-top: @width solid @color;
    }
    .method(right,@width:20px,@color:#666){
        border-right: @width solid @color;
    }
    .method(bottom,@width:20px,@color:#666){
        border-bottom: @width solid @color;
    }
    .method(left,@width:20px,@color:#666){
        border-left: @width solid @color;
    }

    .method(@_,@width:20px,@color:#666){
        border: @width solid @color;
    }
    #main{
        .method(bottom,1px,#111)
    }

    相当于方法的重载

    方法的命名空间

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    #method(){
        background: red;
        .d(@w:300px){
            width: @w;
            #a(@h:300px){
                height: @h;
            }
        }
    }
    #main{
        #method > .d >#a(100px);
        #method > .d(100px);
        #method;
    }
    #main1{
        .d(122px); //错误的使用方法，没有调用其父元素则无法调用.d
    }

    • 在CSS中>选择器，选择的是儿子元素，就是必须与父元素有直接联系的元素。

    • 在引入命令空间时，如使用>选择器，父元素不能加括号。

    • 不得单独使用命名空间的方法必须先引入命名空间，才能使用其中方法。

    • 子方法可以使用上一层传进来的方法。

    条件筛选

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    #divclass{
        .boxShadow(@a,@b,@c,@color) when(@a>10px) and(@b<20px){  //且方法
            box-shadow: @arguments;
        }
        .background(@color) when not (@color=#666){  //非方法
            background: @color;
        }
        .font(@size:20px) when (@size>20px),(@size<60px){  //逗号为或方法
            font-size:@size;
        }
    }
    #main{
        #divclass>.boxShadow(1px,2px,3px,#777);
        
    }

    最高优先级

    1
    2
    3
    4
    5
    6
    7
    .border(){
        border:1px solid red;
        box-shadow: 1px 1px 1px black;
    }
    #main{
        .border() !important;
    }