【Less】Less使用总结

1 介绍

Less 是一门 CSS 预处理语言，通过工具可以编译成CSS，它扩展了 CSS 语言，增加了嵌套、变量、Mixin混合、函数、继承等特性，Less可以帮助我们更好地组织CSS代码，提高代码复用率和可维护性。

中文网址: lesscss.cn/

2 常见的预处理语言

Sass 诞生于2007年基于Ruby 编写。
Less 诞生于2009年基于JS写的，编译快，入门简单，功能相差不大。
Stylus 诞生于2021年来自 Node.js 社区。

以下将简介 Less 的功能特性：

3 嵌套

less 支持嵌套书写形式，反映层级和约束

普通嵌套

CSS 复制代码

#app{
    #header{
        .logo{      
        }
        // &:代表上一层选择器的名字，此例便是header
        &:after{
           content:"hello";
        }
    }
}

媒体查询

CSS 复制代码

.left{
    height:500px;
    background-color:#adb;
    // >=1200
    @media screen and(min-width:1200px) {
       background:#6e4848; 
    }
    // >=1200,<=900
    @media screen and(max-width:1200px) and (min-width:900px){
        background:#baa; 
    }
    //<900
    @media screen and (max-width:900px){
        background:#abd; 
    }
}

4 变量

减少重复代码的书写

值变量

CSS 复制代码

@color:#adf;
@fontSize:14px;
@wrap:1156px；

header{
    background-color:@color;
    font-size:@fontSize;
    width:@wrap;
}

名称要求：字母、数字、下划线、中横线
首字母可以为数字，可以为纯数字
区分大小写
变量值随意

变量运算

css 复制代码

header{
    height:100px+200px;
}
section{
    height:100px*2%;  // 200px; 
    width:900/33px;   //27.2727px;
    // 如果只有一个有单位，则使用该单位
}

5 混合方法

将重复使用的代码封装到一个类中，在需要使用的地方调用。

普通混合

css 复制代码

.getBG(@picname) {
    background-image: url('/static/module/class/content/img/@{picname}');
    background-size: 100%;
    background-position: center;
}
#header{
    .getBG(01.png)
}

css 复制代码

.ellipsis(@rows) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: @rows;
    -webkit-box-orient: vertical;
}

参数混合

css 复制代码

// 定义混合
.border(@border_color){
    border:2px solid @border_color;
}
// 使用混合
.div{
    .border(#f60);
    // 使用时我们需要传入一个参数进去
}

参数默认值

css 复制代码

// 定义混合
.border(@border_color:#f60;){
    border:2px solid @border_color;
}
// 使用混合
.div{
    .border();
}

条件混合

Less 没有 if else，可是它有 when

css 复制代码

// and 运算符 ，相当于 与运算 &&，必须条件全部符合才会执行
.border(@width,@color,@style) when (@width>100px) and(@color=#999){
    border:@style @color @width;
}

循环方法

Less 并没有提供 for 循环功能，是使用递归去实现。下面是官网中的一个 Demo，模拟了生成栅格系统。

css 复制代码

Less复制代码/* Less */
.generate-columns(4);

.generate-columns(@n, @i: 1) when (@i =< @n) {
  .column-@{i} {
    width: (@i * 100% / @n);
  }
  .generate-columns(@n, (@i + 1));
}
/* 生成后的 CSS */
.column-1 {
  width: 25%;
}
.column-2 {
  width: 50%;
}
.column-3 {
  width: 75%;
}
.column-4 {
  width: 100%;
}

6 函数

Less 提供了内置函数来处理，文档地址 less.bootcss.com/functions/

函数和混合的区分：

混合相当于是自定义函数
函数相当于是内置函数

数学函数

ceil 向上取整
floor 向下取整
percentage 将小数转化为『百分比』

颜色操作

lighten 加亮
darken 加暗
fadein 提高透明度
fadeout 降低透明度

7 继承

类似混合方法，混合是直接把代码结果拿出来，而extend是把选择器提取出来，公共的代码写到一起。

css 复制代码

.animation{
    transition: all .3s ease-out;
    .hide{
      transform:scale(0);
    }
}
#main{
    &:extend(.animation);
}
#con{
    &:extend(.animation .hide);
}

/* 生成后的 CSS */
.animation,#main{
  transition: all .3s ease-out;
}
.animation .hide , #con{
    transform:scale(0);
}

8 导入

Less 支持组件化，对一些公共文件进行复用，从而优化css文件目录结构

导入less 文件后缀可省略

CSS 复制代码

@import "base"; 
//等价于
@import "base.less";

导入css 文件需要加文件后缀
CSS 复制代码
```
@import "common.css"; 
```

@import 的位置可随意放置

以上便是个人对于 Less 的特性总结，希望本文能对你有所帮助。