less语法详解

最新推荐文章于 2024-01-16 17:05:33 发布

王佳斌

最新推荐文章于 2024-01-16 17:05:33 发布

阅读量1.1w

点赞数 37

分类专栏： + Sass 文章标签： less

本文链接：https://blog.csdn.net/weixin_44198965/article/details/90240858

版权

+ Sass 专栏收录该内容

11 篇文章 3 订阅

订阅专栏

Less为什么出现？

作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。
Less有助于你学习Sass。

了解Less

它是一门CSS预处理，扩充了CSS，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充，Less 也可以运行在 Node 或浏览器端。
总结：让CSS更具维护性、主题性、扩展性！

Less注释符

在less中，注释符为“ // ”，与JavaScript等语言注释符相同。
在less中，如果注释符为“ /**/ ”（CSS注释符），则代表less文件编译成css文件后，在其css文件里显示的注释。

style.less：

//我只能在less文件中显示，经过编译后，css文件里不显示！
/*我只能在css文件中显示，经过编译后，less文件里不显示！*/

编译模式

因为less不像css一样，直接被浏览器解析渲染，所以需要通过编译软件（我推荐koala）进行编译。
koala有两种常用编译模式，分别为normal与compress。

（1）normal（默认）：
编译成css格式，不压缩为一行。（利于更新和维护）
（2）compress：
编译成压缩的CSS格式，只有一行，紧凑贴紧，对浏览器更加友好，且大小相比未压缩要小一些（推荐发布使用）

延时加载特性

（1）变量不需要预先声明
（2）变量可以在任意位置出现

一、变量

一个属性值经常用到？不妨试试赋给变量！
语法：@变量名:值;

//定义变量(全局变量)
@COLOR:rgb(255,0,0);
@WIDTH:200px;

header{
  background:@COLOR;
}
div{
  background:@COLOR;
  padding:@WIDTH;
}

生成的css代码：

header{
  background: #ff0000;
}
div{
  background: #ff0000;
  padding: 200px;
}

变量写在class里，会变为局部变量，无法继续复用！
我们来证实这一点：

header{
  // @COLOR为局部变量，作用域只在header
  @COLOR:rgb(255,0,0);
  background:@COLOR;
}
div{
  // 出错，@COLOR不存在！
  background:@COLOR;
}

当header类执行完成后，@COLOR变量会立刻销毁，所以会导致div{background的值}出错，其特性和其他语言类似。

二、变量用作属性名

一个属性名太长？嫌弃background-color？

语法：@变量名:属性名;

//定义变量（属性名）
@bg-img:background-image;

div{
  @{bg-img}:路径;
}

生成的css代码：

div {
  background-image: 路径;
}

也许使用路径二字，更能让你快速认识less。

三、变量用作类名

把变量用作类名？当然可以！
语法：@属性名:类名;

//定义
@demo:newClass;

.@{demo}-new{ // "-new"在类名基础上，新的类名 newClass-new
   @bg:rgb(0,0,0);
   background:@bg;
}
//div使用此类名
<div class="newClass-new">
	<p>demo</p>
</div>

生成的css代码：

.newClass-new {
  background: #000000;
}

四、变量用作链接

语法：@变量:路径;

//链接可以为任何链接*注意放置的位置
@bg-img:"路径";

header{
  background:url(@bg-img);
}

生成的css代码：

header {
  background: url("路径");
}

使用路径两个字，加深对less的认识，灵活运用变量！

五、定义多个变量

less会从当前作用域中从下往上搜索，这个行为类似于css的定义：始终使用最后定义的属性值！
当然，定义同一变量名称（名字）两次或多次后，less只会选择最后定义的！

@bg-img:"路径1";
@bg-img:"路径2";
@bg-img:"路径3";

header{
    background:url(@bg-img);
}
//结果为：background: url("路径3");

header{
    background:url(@bg-img);
}

@bg-img:"路径1";
@bg-img:"路径2";
@bg-img:"路径3";
//结果为：background: url("路径3");

这点充分证明了less规定，只会选择最后所定义的！

六、混合

语法：.规则集名称{…}
将一系列属性从一个规则集中引入到另一个规则集方式。
简单说就是less中定义的类可以直接放到其他类中，复用性极强。

//定义规则集
.public{
    @COLOR:rgb(245,200,110);
    background:@COLOR;
}

div{
    .public;
}

生成的css代码：

.public {
  background: #f5c86e;
}
div {
  background: #f5c86e;
}

不难发现“ .public ”这个规则集在css代码中也有显示，这显然不是我们需要的“ 简洁代码 ”。
方法很简单，只需要在此规则集中加入“ () ”，如.public(){…}。

七、混合（带选择器）

在规则集中，你可以放入选择器。
语法：.规则集名称{&:选择器}

//定义规则集,包含:hover伪类选择器
.public(){
    &:hover{
        @COLOR:rgb(245,200,110);
        background:@COLOR;
    } 
}

header{ //此时&:hover父级元素变为header
    .public;
}
div{ //此时&:hover父级元素变为div
    .public;
}

生成的css代码：

header:hover {
  background: #f5c86e;
}
div:hover {
  background: #f5c86e;
}

总结：” &:选择器 “，选择当前所在规则集（类）的父元素。

八、混合（带参数）

像函数一样，传递参数！
语法：.规则集名称(形参1,形参2,…){…}

.public(@COLOR;@WIDTH){
    background:@COLOR;
    width:@WIDTH;
}

header{
    .public(red;100%); //red传给@CLOLR形参 100%传给@WIDTH形参
}

生成的css代码：

header {
  background: red;
  width: 100%;
}

形参也可以使用默认值，如上述例子：@COLOR → @COLOR:red，这样就不需要传递实参了。

九、混合（多个参数）

实参存在多个值，如：1px solid green，这些都需要传入形参，那么该如何分隔？

.public(@width;@demo){
    border:@demo;
    width:@width;
}

header{
    .public(1px solid red;100%);
}

生成的css代码：

header {
  border: 1px solid red;
  width: 100%;
}

总结：根据属性值的语法使用即可。

一个组合可以带多个参数，参数之间使用逗号或分号进行分割。
（1）.public(@COLOR;@WIDTH)
（2）.public(@COLOR,@WIDTH)
注意：
（1）由于逗号可解释为mixins参数分隔符或css列表分隔符，所以尽量使用分号。
（2）如果参数是多个的话，使用逗号分隔开，然后分号代表结束。
（3）如果传参的括号里面全部都是以逗号分割，那么会依次传给各个参数值。
（4）如果传参的括号里既有逗号，又有分号，则分号之前的当作一个整体，发给第一个参数。

十、arguments变量

argument代表所有的可变参数，按照形参列表先后顺序。

.public(@demo1:1px;@demo2:solid;@demo3:red){
    border:@arguments;
}

div{
    .public();
}

生成的css代码：

div {
  border: 1px solid red;
}

注意：值要一一对应

十一、匹配模式

.f_l(){
    float:left;
}
.f_r{
    float:right;
}

div{
    .f_l;
}

生成的css代码：

div {
  float: left;
}

十二、得到混合变量的返回值

在规则集中进行运算，返回值由使用该规则集的类，通过传递参数并返回。

.public(@pd1;@pd2){
    @s:(@pd1+@pd2)
}

div{
    .public(10;10);
    padding:@s;    
}

生成的css代码：

div {
  padding: 20;
}

十三、嵌套规则

HTML代码：

<header>
	<ul>
		<li><a href="#">demo1</a></li>
		<li><a href="#">demo2</a></li>
		<li><a href="#">demo3</a></li>
	</ul>
</header>

Less代码：

header{
        border:1px solid rgb(0,0,255);
    ul{
        list-style:none;
    }
    li{
        background:rgb(255,255,0);
        a{
            text-decoration:none;
        }
    }
}

生成的css代码：

header {
  border: 1px solid #0000ff;
}
header ul {
  list-style: none;
}
header li {
  background: #ffff00;
}
header li a {
  text-decoration: none;
}

试用方法非常简单，与HTML结构相似，从而使得CSS结构清晰、更加利于后期维护和扩展。

十四、父元素选择器&

使用＆运算符来引用父选择器。

a {
  color: rgb(0,0,0);
  &:hover {
    background-color: red;
  }
}

生成的css代码：

a {
  color: rgb(0,0,0);
}
a:hover {
  background-color: red;
}

这样也是可以的：

.header{
  &>p{
    color:red;
  }
  &+.content{
    color:yellow;
  }
  & div{
    color:red;
  }
  &~p{
    color:green;
  }
  &&{
    color:green;
  }
  &>&{
    color:blue;
  }
}

生成的css代码：

.header > p {
  color: red;
}
.header + .content {
  color: yellow;
}
.header div {
  color: red;
}
.header ~ p {
  color: green;
}
.header.header {
  color: green;
}
.header > .header {
  color: blue;
}

十五、改变 & 顺序及生成所有可能的选择器列表

将&后置，将当前的选择器提到父级。

.side{
  div&{
    color:cyan;
  }
}
#side{
  div&{
    color:green;
  }
}

ul{
  li{
    .item{
      div &{
        color:orange;
      }
    }
  }
}

生成的css代码：

div.side {
  color: cyan;
}
div#side {
  color: green;
}
div ul li .item {
  color: orange;
}

生成所有可能的选择器列表、
当多个同级选择器用“，”隔开时，其子级使用连续多个&时，例如&+&或&-&或& &等，会生成所有可能的组合。

div,p,a,li{
  &+&{
    color:green;
  }
}

生成的css代码：

div + div,
div + p,
div + a,
div + li,
p + div,
p + p,
p + a,
p + li,
a + div,
a + p,
a + a,
a + li,
li + div,
li + p,
li + a,
li + li {
  color: green;
}

十六、运算

less会为你自动推断数值的单位，所以你不必每一个值都加上单位，但最好有一个。
任何数值，颜色和变量都可以进行运算。

.div{
   padding:500px + 300;
}

生成的css代码：

.div{
  padding:800px;
}

注意：运算符与值之间必须以空格分开，涉及优先级时可以以()进行优先级运算。

十七、命名空间

将一些需要的混和组合在一起，可以通过嵌套多层id或者class来实现。
当我们拥有了大量选择器的时候，特别是团队协同开发时，如何保证选择器之间重名问题？

#mynamespace() { //加 () 表示不输出到css
   .home {...}
   .user {...}
}

这样我们就定义了一个名为 mynamespace 的命名空间，如果我们要复用 user 这个选择器的时候，在需要混入这个选择器的地方，只需使用 #mynamespace > .user 就可以了。

将一个选择集其中的一部分拿出来，只采用这一部分数据操作

#bgcolor(){ // 加()默认不输出
    background: #ffffff;
    .a{
        color: #888888;
        &:hover{
            color: green;
        }
        .b{
            background: red;
        }
    }
}
.bgcolor1{
    background: yellow;
    #bgcolor>.a;    // >符号表示选中混合中的每一个样式
}
.bgcolor2{
    // #bgcolor>.a>.b;
    #bgcolor .a .b;  // 省略写法：将>换成空格即可
}

生成的css代码：

.bgcolor1 {
  background: yellow;
  color: #888888;
}
.bgcolor1:hover {
  color: green;
}
.bgcolor1 .b {
  background: red;
}
.bgcolor2 {
  background: red;
}

作用域：首先会在局部查找变量和混合，如果没找到，编译器会在父作用域中查找，以此类推。

引入（importing）：你可以引入一个或者多个less文件，这些文件中的所有变量都可以在当前的less项目中使用
引入方式：@import “main.less”; 必须有;结尾，最好写上后缀名
注意：应用.css文件会被原样输出到编译的文件中，所以无法对其进行加工，无法运用里面的样式
可以带参数：

默认是once，一次
import (reference) “mian.less”; 这样引用的那个文件编译后的css文件只会采用计算后的变量值，原样的css样式不会输出
inline 原样输出到css文件中，不能在less文件中取变量等操作
less 将文件作为less对象，而不管事什么文件扩展名
css 将文件作为css对象，而不管是什么文件扩展名
multiple 允许引入多次文件名相同的文件，和once对立

@import "main.css";  // 原样输出，无法用里面的变量等
@import "main.less"; //可以用里面的变量
@import (reference) "main"; // 引用less文件，但不输出原本的内
@import (inline) "main.less";// 必须添加后缀名，否则报错，引用less文件，但不能操作
@import (once) "main.less"; // 原样输出，且进行加工，只能使用一次
@import (less) "main.css";  // 将css文件作为less文件使用，原样输出，并加工一次
@import (css) "main.less";  // 将less文件作为css文件使用，只能原样输出，并不能操作
@import (multiple) "main.less"; // 引用几次就输出几次
@import (multiple) "main.less";     
@import (multiple) "main.less";

十八、Less函数

请点击这里查看函数库大全。

王佳斌

关注

37
点赞
踩
204

收藏

觉得还不错? 一键收藏
打赏
2
评论
less语法详解

Less为什么出现？作为一门标记性语言，CSS 的语法相对简单，对使用者的要求较低，但同时也带来一些问题：CSS 需要书写大量看似没有逻辑的代码，不方便维护及扩展，不利于复用，尤其对于非前端开发工程师来讲，往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码，造成这些困难的很大原因源于 CSS 是一门非程序式语言，没有变量、函数、SCOPE（作用域）等概念。了解Less...
复制链接

扫一扫