Less学习笔记

最新推荐文章于 2022-04-04 11:17:39 发布

魏MJ

最新推荐文章于 2022-04-04 11:17:39 发布

阅读量747

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS 文章标签： Less CSS

本文链接：https://blog.youkuaiyun.com/qq_36952874/article/details/83107567

CSS 专栏收录该内容

1 篇文章

订阅专栏

本文是关于Less的学习笔记，介绍了Less的使用方法，包括变量、嵌套、混合、继承、导入等功能，并探讨了变量作用域、特殊用法及媒体查询等。Less作为CSS预处理语言，提供更丰富的编程特性，简化CSS编写，提高代码可维护性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

简介

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。
Less 可以运行在 Node 或浏览器端。

目前CSS预处理语言主要有SASS、SCSS、Less、Stylus。相比于其他的预处理语言，Less在功能的丰富性上略输一筹，相应的学习成本也较低，基本满足了咱们对于CSS编程式开发的需求。
因为在工作中接触到vue，使用了Less，因此简单学习一下，做以下笔记留待后期进一步的回顾和学习。

下载地址：[https://raw.githubusercontent.com/less/less.js/v2.5.3/dist/less.min.js]

中文文档：[http://lesscss.cn/#]

1.使用方法

安装Less

npm install -g less

编译Less

lessc styles.less

转译Less–>SCSS

lessc styles.less styles.css

2.变量

用@开头定义变量，在使用时也是以@开头使用。

/* Less */
@color: #fff;
@width: 100%;
.main {
  color: @color;
  width: @width;
}

/*转译后*/
.main {
  color: #fff;
  width: 100%;
}

选择器变量（动态选择器）

/*Less*/
@testSelector: .main;
@Header: header;
@{testSelector} {
  color: #fff;
  width: 100%;
}
.@{Header} {
  color: #f0f0f0;
  width: 80%;
}

变量值可以是clas或者id啥的名称，使用时.或#加@{}引入变量，变量值也可以是.className或#idName，使用时直接用@{}引入变量即可使用。
当然，选择器变量也是可以组合使用的。

属性变量

/*Less*/
@paddingTop: padding-top;
@Width: 30px;
.header {
  @{pddingTop}: @Width;
}

Less变量也可以用在css属性的动态上。用法如上。

URL变量

/*Less*/
@images: '../src/imgs';
body {
  background: url("@{images}/main.png");//变量名需要使用大括号
}

声明变量

声明变量就是直接定义一套完整的样式，然后通过@Name()来调用

/*Less*/
@Border: {
  border-style: solid;
  width: 3px;
  color: red;
}
.div1 {
  @Border();
}

变量运算

做加减法运算时，以第一个运算元的单位为基准，后续的运算元的单位不做影响。
做乘除法时，每一个运算元的单位需要统一

/*Less*/
@Width: 300px;
@Color: #222;
#wrap{
  width:@width-20;
  height:@width-20*5;
  margin:(@width-20)*5;
  color:@color*2;
  background-color:@color + #111;
}

/*转译*/
#wrap{
  width:280px;
  height:200px;
  margin:1400px;
  color:#444;
  background-color:#333;
}

变量作用域

Less的变量的定义是懒加载的，即类似于js的变量提升，可以先使用变量，后定义；
变量的作用域则是就近原则。

特殊用法：用变量定义变量

/* Less */
@fnord:  "I am fnord.";
@var:    "fnord";
#wrap::after{
  content: @@var; //将@var替换为其值 content:@fnord;
}
/* 生成的 CSS */
#wrap::after{
  content: "I am fnord.";
}

3.嵌套

Less通过大括号来嵌套子选择器，写法如下：

.main {
  ...
  .header {
    ...
  }
  .content {
    ...
    .left-content {
      ...
    }
  }
}

大括号包含的就是选择器的父子关系、相邻关系等。这样子的写法更加简洁明了

&：上一层选择器的名称

/*Less*/
.link {
  &:hover {
    color: #f0f0f0;
  }
  &-content {//-->.link-content
    color: red;
  }
}

媒体查询
可以使用大括号的嵌套替换媒体查询写法中的and

4.混合方法

1.无参

/*Less*/
/*.和#都可以做作为方法名前缀，()在无参情况下可以不加，建议加一下*/
.header {//-->.header()
  width: 100%;
  background: #f0f0f0;
}
#main {
  .header;//-->.header()
}

2.默认参数方法

/*Less*/
.header(@Width: 100%, @Height: 50px) {
  width: @Width;
  height: @Height;
}
#main {
  .header(100px, 20px);
  //.header-->使用默认参数值
}

3.方法匹配模式

/*Less*/
.border(solid, @Width: 10px, @Color: red); {
  border: solid @Width @Color;
}
.border(dotted, @Width: 10px, @Color: red); {
  border: solid @Width @Color;
}
.border(@_, @Width: 10px, @Color: red); {
  border: solid @Width @Color;
}
/*以上是三个方法名相同，但是参数不同的方法
使用时，会去依次匹配参数， 变量会匹配到@_*/
#main {
  .border(solid, 1px, green);//-->匹配第一个方法
  .border(dotted, 1px, red);//-->匹配第二个
  .border(@type, 1px red);//-->匹配第三个
}

4.方法的嵌套

/*Less*/
#myDiv() {
  width: 100px;
  .childDiv() {
    width: 50px;
    #p(@color: red) {
      color: @color;
    }
  }
}
#main {
  #myDiv > .childDiv > #p(blue);
}
/*要想引用子方法，必需先引用父方法，且父方法不带()，更多的用法还有待实战，看了中文文档貌似没有具体详解*/

5.条件筛选

/*Less*/
/*用when开启条件查询*/
/*and表示且*/
#mydiv(@Width, @height, @color) when (@width>200px) and (@height<100px) {
  width: @width;
  height: @height;
  color: @color;
}
/*not表示非*/
#mydiv(@Width, @height, @color) when (@width>200px) not (@height<100px) {
  width: @width;
  height: @height;
  color: @color;
}
/*，表示或*/
#mydiv(@Width, @height, @color) when (@width>200px) , (@height<100px) {
  width: @width;
  height: @height;
  color: @color;
}
/*特殊的地方是，=表示相等，除true以外的值都是false*/

6.不定量参数

/* Less */
.boxShadow(...){
    box-shadow: @arguments;
}
.textShadow(@a,...){
    text-shadow: @arguments;
}
#main{
    .boxShadow(1px,4px,30px,red);
    .textShadow(1px,4px,30px,red);
}

/* 生成后的 CSS */
#main{
  box-shadow: 1px 4px 30px red;
  text-shadow: 1px 4px 30px red;
}

7.!important
如果为了使用新样式强制覆盖其他的样式，可以在方法后面直接加上!important即可
8.方法的循环
使用递归方式，通过参数控制来递归循环方法，实现多个样式
9.属性拼接方法

//+代表的是 ,
.boxShadow() {
    box-shadow+: inset 0 0 10px #555;
}
.main {
  .boxShadow();
  box-shadow+: 0 0 20px black;
}
/* 生成后的 CSS */
.main {
  box-shadow: inset 0 0 10px #555, 0 0 20px black;
}

//+_代表的是空格
.Animation() {
  transform+_: scale(2);
}
.main {
  .Animation();
  transform+_: rotate(15deg);
}

/* 生成的 CSS */
.main {
  transform: scale(2) rotate(15deg);
}

10.变量在方法中的作用域
在方法中定义的变量可以在调用方法后，直接使用该变量

/* Less */
.average(@x, @y) {
  @average: ((@x + @y) / 2);
}

div {
  .average(16px, 50px); // 调用 方法
  padding: @average;    // 使用返回值
}

/* 生成的 CSS */
div {
  padding: 33px;
}

继承

extend是Less中的一个伪类，可以继承匹配的声明的全部样式。

.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);
}

使用all关键字可以继承匹配到的声明的所有样式

#main{
  width: 200px;
}
#main {
  &:after {
    content:"Less is good!";
  }
}
#wrap:extend(#main all) {}

/* 生成的 CSS */
#main,#wrap{
  width: 200px;
}
#main:after, #wrap:after {
    content: "Less is good!";
}

导入

@import “main.less”; //.less可以省略
导入语句的位置也可以随意放
1.@import (reference) “test.less”;
只引用不编译
2.@import (once) “test.less”;
相同的文件只引用一次
3.@import (multiple) “test.less”;
允许导入多个同名文件