LESS

最新推荐文章于 2022-10-12 15:41:40 发布

探鱼不是鱼

最新推荐文章于 2022-10-12 15:41:40 发布

阅读量988

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/RollsRoycewk/article/details/109609893

版权

CSS 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

其他CSS预处理软件

CSS 预处理器技术已经非常的成熟了，而且也涌现出了越来越多的 CSS 的预处理器框架。其中最常用的是 Sass、Less、Stylus。

less

支持原生js,node，让CSS有了基本的逻辑运算能力 , 基于js写的

sass

ruby环境，让CSS有了更完整的逻辑和判断能力,比如支持if这些 ,基于ruby

stylus — node

VUE阶段开发项目中我们使用stylus，这个让CSS变成跟一门编程语言类似了

LESS基础

什么是less?

less是一种动态样式语言，属于css预处理器的范，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展 LESS 既可以在客户端上运行，也可以借助Node.js在服务端运行。

动态样式
- CSS是一门非程序式语言，需要书写大量没有逻辑的代码，不方便维护及扩展，不利于复用，所以出现了处理css的工具和框架
预处理器
- 对生成CSS前的某一语法的处理程序

安装less

全局使用

安装nodeJS

下载less,全局配置

npm i -g less

检查less版本

lessc -v

npm i -g less i Initialize g global 全局安装lessc -v 检查全局的版本
Less全局的安装以及全局版本的检查

Easy LESS

less注释

单行注释不会被编译到css中
- //
多行注释会编译到
- /* */

less使用

引入less文件

BootCDN赋值地址

然后按照less的语法去写即可

正常使用.less

body {
    width: 100%;
    height: 100%;
    background-color: orange;

    //bod内部有一个div
    div {
        width: 500px;
        font-size: 100px;
        /* height: 300px; */
        background-color: red;

        //div内部有一个p
        p {
            width: 200px;
            height: 200px;
            margin: 0 auto;
        }
    }
}

LESS变量

较少允许我们定义一些变量来管理css（变量必须以@开头），请注意LESS中的变量为完全的’常量’，所以只能定义一次，作用域由本地在父对象查找。

变量作为属性

@allColor:red;

变量作为选择器

使用@{变量名}

变量作为属性名

@b: box-shadow;

变量作为url

@url: “https://i0.hdslb.com/bfs/archive/997fa41b88c0426808c6d6c8168d29da5251ff85.jpg@880w_388h_1c_95q”;
@url: url(“https://i0.hdslb.com/bfs/archive/997fa41b88c0426808c6d6c8168d29da5251ff85.jpg@880w_388h_1c_95q”);

#box {
    width: 300px;
    height: 200px;
    background-color: @allColor;

    .@{s} {
        color: @allColor;

        span {
            border: 1px solid @allColor;
            @{b}: 0px 0px 0px 0px @allColor;
            // background: url(@url) 0 0 repeat;
            //background: url("https://i0.hdslb.com/bfs/archive/997fa41b88c0426808c6d6c8168d29da5251ff85.jpg@880w_388h_1c_95q") 0 0 repeat;

            background: @url 0 0 no-repeat;
            //background: url("https://i0.hdslb.com/bfs/archive/997fa41b88c0426808c6d6c8168d29da5251ff85.jpg@880w_388h_1c_95q") 0 0 no-repeat;
        }
    }
}

变量延时加载

-它会在当前作用域样式未加载之前先加载变量，而且是由内而外，先寻找作用域内的变量，如果没有在寻找作用域外的变量

less规则

基础嵌套

在使用标准CSS时，要为多层堆叠的元素定义样式，从外部到内部的嵌套定义，然后给这个元素加上类名或id来定义。这样的写法虽然很好理解，但维护起来很不方便，因为无法清晰了解到样式之间的关系。

在最小中，嵌套规则使这个问题迎刃而解。。嵌套规则允许在一个选择器中嵌套另一个选择器，这更容易设计出精简的代码，并且样式之间的关系一目了然。

建议嵌套不要超过四层

//嵌套最好不要超过4层
/* 
    <div class="outer">
        <ul class="list">
            <p class="con">
                <a href="">点击</a>
                <span>1100</span>
            </p>
        </ul>
    </div>
*/

.outer {
    height: 300px;

    >.list {
        height: 200px;

        >.con {
            overflow: hidden;
        }

        a {
            color: #ccc;
        }

        span {
            border: 1px solid #000;
        }

    }
}

&—父级引用

使用＆：代表前边的所有父级元素，常用在伪元素伪类css结构类等需求上

在一个内层选择器的前面，如果没有＆符号，则它被解析为父选择器的后代；如果有＆符号，它就被解析为父元素

父级引用1

ul{
    width: 200px;
    &>li{
        //这里代表ul
        overflow: hidden;

        &:nth-child(1){
            //这里代表ul
            color: #ccc;
        }
        &:nth-child(2){
            //这里代表ul
            color: #ccc;
        }
        &:nth-child(3){
            //这里代表ul
            color: #ccc;
        }
        &:nth-child(4){
            //这里代表ul
            color: #ccc;
        }
    }
}

父级引用2

//&代表父级引用其实就是代表当前层级的父级

/* 
    <div class="outer">
        <ul class="list">
            <p class="con">
                <a href="">点击</a>
                <span>1100</span>
            </p>
        </ul>
    </div>
*/

.outer{
    height: 300px;
    & > .list{
        //这里代表的就是.outer
        height: 200px;
        >.con{
            overflow: hidden;
            &:hover{
                //这里代表的就是.con
                background-color: #fff;
            }
        }
        a{
            color: #cce;
        }
        span{
            border: 1px solid #000;
        }
    }
}

less运算

任何数值，颜色，变量都可以运算
less会给你自动推算单位，所以不需要每一个都加单位，但保证至少有一个加了单位
运算符与数值之间要以空格分开，涉及优先级时以（）进行优先级计算

@var:40;

.outer{
    width: (100% - 30px);
    //70%

    width: calc("100% - 30px");
    //如果使用calc计算,则需要转义字符串~  否则它只是一个字符串
    .con{
        width: 1000 + 50px;
        //1050px
        //至少需要给一个加上单位 运算符之间要有空格

        width: 1000 * (50px - 30);
        //20000px

        border: 1px + 5 solid #000 + 40;
        //border: 6px solid #282828;

        height: @var + 60px;
        //100px
    }
}

less混合Mixin

在LESS中我们可以定义一些通用的属性集为一个类，然后在另一个类中去调用这些属性。
混合就是将各个属性从一个规则发布到另一个规则中
混合的定义：使用.+混合名+()+{属性的合集}

混合的使用：。+混合名+（）;

普通混合

// 普通混合
.position(){
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
}

.outer{
    width: 600px;
    height: 500px;
    background-color: pink;
    .position();

    >.inner{
        width: 500px;
        height: 400px;
        background-color: aqua;
        .position();

        .con{
            width: 200px;
            height: 200px;
            background-color:yellow;
            .position();
        }
    }
}

带着参数混合

在声明混合的时候，可以在小括号中声明形参。形参由@ +变量名定义。

调用的时候可以设定实参

.center(@w,@h,@bg){
    width: @w;
    height: @h;
    background-color: @bg;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

.outer{
    //通过形参:实参 的方法传参的时候,位置可以任意书写
    .center(@w:500px,@h:500px,@bg:red);

    >.inner{
        .center(@h:300px,@w:200px,green);

        .con{
            //也可以不写,但位置就不能换
            .center(100px,200px,yellow);
        }
    }
}

带参数混合默认值

可以直接在混合中定义形参的时候，给形参设置数值，例如（@color：red）。

当使用混合的时候，如果有实参传递，则使用实参的值，否则使用形参的替代值

//如果形参有默认值,那么调用的时候不传参,就是默认值
.center(@w,@h,@bg : pink){
    width: @w;
    height: @h;
    background-color: @bg;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
}

.outer{
    //通过形参:实参 的方法传参的时候,位置可以任意书写
    .center(@w:500px,@h:500px,@bg:red);

    >.inner{
        .center(@h:300px,@w:200px,green);

        .con{
            //也可以不写,但位置就不能换
            .center(100px,200px);
        }
    }
}

清除浮动组合

.clearFix(){

    &:after{
        content: "\200B";
        //也就是空,专业写法
        height: 0;
        //老版本浏览器没有高度会设置默认
        display: block;
        clear: both;
    }
}

.outer{
    width: 400px;
    .clearFix();
    .con1{
        height: 100px;
    }
    .con2{
        width: 100px;
    }
}

命名参数

在使用混合的时候，如果想要指定传递的实参对应哪一个形参，则可以对实参命名

参数变量

@arguments变量代表所有参数集合，不想单独处理每个一个参数的话，可以利用@arguments代替

模式匹配和守卫

在Less中尝试利用模式匹配替用if / else，其执行原理类似的开关/案例。
因为一个混合可能有多种形式，所以Less提供了一种机制，允许根据参数的值来改变mixin的行为。

其中当参数是@_开头的，是调用此混合必选的。

模式匹配

一个混合可能有多种样式,可以根据调用混合时传递的参数,选择使用哪一个混合

混合的参数是@_,那么代表必选

其它的是可选–

.center(@_){
    text-align: center;
    line-height: 20px;
    box-sizing: border-box;
}

.center(color){
    color: pink;
}

.center(bgcolor){
    background-color: #fff;
}


//调用
.outer{
    width: 200px;
    height: 200px;
    .center(bgcolor)
}

重载

重载:

一个混合可能有多种形式(参数数量不同)

可以根据调用混合时传递参数的个数来选择使用某一个混合

相同的混合，不同的行为，可以根据调用的时候重置的实参个数选择匹配的混合内容

.center(@color) {
    text-align: center;
    box-sizing: border-box;
    color: @color;
}

.center(@color, @lh) {
    text-align: center;
    line-height: @lh;
    box-sizing: border-box;
    color: @color;
}



//调用
.outer {
    width: 200px;
    height: 200px;
    .center(red,50px);
}

守卫

根据判断条件选择性Mixin的行为

最初是JavaScript的if / else，使用时语法

Guards允许我们使用>，> =，<，<=，=，关键字true（只匹配关键字true，非true不会匹配），支持逻辑，而不是（）

同时我们可以使用“，”分割多个Guards，其表示只要其中任意一个满足就为true

.test(@t) when(@t <=100) {
    line-height: @t + 0px;
}

.test(@t) when(@t>100)and(@t<=200){
    line-height: @t/2 + 0px;
}

.test(@t) when(@t>200){
    line-height: @t * 2 + 0px;
}


.outer {
    .test(100)
}

转义字符和插值

变量可以用类似ruby和php的方式嵌入到字符串中，通过** @ {name} **这样的结构：

@num:30;
@url:"http://baidu.com/img/";

.outer{
    width: @num + 0px; 
    //因为必须有一个值有单位,而变量没有.所以这样写,但是太low

    /* 
        字符串插值:在字符串中嵌套变量,需要使用@{变量名}的格式
        当属性值不是字符串的时候,需要把字符串转义,使用~
    */

    width: "@{num}px";
    //width: "30px";

    width: ~"@{num}px";
    //width: "30px";
    width: 30px;

    background: url("@{url}01.png");
    // background: url("http://baidu.com/img/01.png");

}

less函数

逻辑函数如if（），Boolean（）
数学函数如ceil（），floor（），sqrt（）等

…

.outer{
    width: 300px;
    height: floor(100px /3 );
    //33
}

文件导入

导入更少的文件：@import“ lib.less”; //等价于@import“ lib”（可以不带后缀）
导入css文件：@import“ lib.css”;

// @import "./01.样式重置.css";

/* @import "01.样式重置.css";
.outer {
  width: 100px;
  height: 100px;
} */


@import "./01.样式重置.less";
//所以文件样式导入要导入less
/* * {
    margin: 0;
    padding: 0;
  }
  .outer {
    width: 100px;
    height: 100px;
  } */
  
.outer{
    width: 100px;
    height: 100px;
}

转义

有时候，当需要约会无效的CSS语法或Less无法识别的字符，就需要使用转义字符。此时，就可以在字符串前面加一个〜，只需需要转义的字符串放在““中。

@num:30;
@url:"http://baidu.com/img/";

.outer{
    width: @num + 0px; 
    //因为必须有一个值有单位,而变量没有.所以这样写,但是太low

    /* 
        字符串插值:在字符串中嵌套变量,需要使用@{变量名}的格式
        当属性值不是字符串的时候,需要把字符串转义,使用~
    */

    width: "@{num}px";
    //width: "30px";

    width: ~"@{num}px";
    //width: "30px";
    width: 30px;

    background: url("@{url}01.png");
    // background: url("http://baidu.com/img/01.png");

}

探鱼不是鱼

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
LESS

其他CSS预处理软件CSS 预处理器技术已经非常的成熟了，而且也涌现出了越来越多的 CSS 的预处理器框架。其中最常用的是 Sass、Less、Stylus。less支持原生js,node，让CSS有了基本的逻辑运算能力 , 基于js写的sassruby环境，让CSS有了更完整的逻辑和判断能力,比如支持if这些 ,基于rubystylus — nodeVUE阶段开发项目中我们使用stylus，这个让CSS变成跟一门编程语言类似了LESS基础什么是less?less是一种动态样式语言，
复制链接

扫一扫

专栏目录