【LESS】less的基本用法

最新推荐文章于 2024-06-19 18:31:50 发布

Jacano

最新推荐文章于 2024-06-19 18:31:50 发布

阅读量590

点赞数 2

分类专栏：前端 less 文章标签： less

本文链接：https://blog.csdn.net/jzq950522/article/details/88109443

版权

前端同时被 2 个专栏收录

43 篇文章 0 订阅

订阅专栏

less

1 篇文章 0 订阅

订阅专栏

在vue和react的开发中，常常使用到了less作为css的处理方式。Less作为css的预处理语言，它保留了css的所有功能，在此基础上增加了许多变量、循环、继承等特性，拓展了css的用法。

1.使用less

本地使用less

按照官网可以下载less.js文件，也可以直接使用cdn服务，在这里我直接使用了cdn，先上代码。

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Less</title> 
  <link rel="stylesheet/less" type="text/css" href="main.less" >
  <script src="//cdnjs.cloudflare.com/ajax/libs/less.js/2.5.3/less.min.js"></script>
</head>
<body>
  
</body>
</html>

新建了index.html文件，引入了less文件，注意这里rel值为"stylesheet/less"，接着又引入了less的cdn文件。样式文件引入一定要放在less.js之前

// main.less
@color: #5B83AD;

body {
  background-color: @color;
  padding:50px;
}

保存后打开浏览器，一般情况下会发现报错
在这里插入图片描述
这是因为通过ajax来获取less文件的，本地打开会有跨域或者获取不到的问题，网上有许多解决方案，可以修改浏览器属性，还可以用npm包解决，我是通过后者解决的，贴上解决方案。
利用http-server将本地网站放到本地服务器上（解决file协议跨域问题）
再次打开，就可以看到整个页面的样式已经被我们修改好了。

服务端打开

npm install -g less

全局安装less，接下来可以使用命令行对less进行处理了

lessc styles.less > styles.css // 将styles.less转译成css代码并且输入到styles.css文件中

2.变量

less的变量很容易理解，也让整个样式文件更加方便管理，只要修改一处代码，就可以改变多处的样式

@color: #5B83AD;
@light-color: yellow;

还可以用变量名作为变量

@name: "John";
@var: "name";
content: @@var;

输出后:
content: "John" // 当然，这种方式不常用

@color: blue;
@var: color;
body {
  background-@{var}: @color;
  padding:50px;
}
// 当变量用于样式名时，必须要用{}包裹变量名

3.混合

我们可以使用less去定义一些通用的class作为集合，然后在另一个class中去调用它们，比如有这样这样一个类:

.font-base {
  color: green;
  font-size: 10px;
}

.font-a {
  .font-base;
  font-style: italic;
}

输出:

.font-a {
  color: green;
  font-size: 10px;
  font-style: italic;
}

我们还可以加上参数进行混合，有点函数传参的味道

// 可以加上默认值
.base-color(@color: yellow) {
  color: @color;
  background-color: @color;
}
// 调用.base-color类，传递color值，如果不传，将默认为yellow
.box-a {
  .base-color(blue)
}

@arguments代表了所有传递进来的变量

.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #fff) {
  box-shadow: @arguments;
  -moz-box-shadow: @arguments;
  -webkit-box-shadow: @arguments;
}
.box-shadow (5px, 2px)

输出:

box-shadow: 5px 2px 1px #fff;
-moz-box-shadow: 5px 2px 1px #fff;
-webkit-box-shadow: 5px 2px 1px #fff;

4.嵌套

嵌套是less中最常用的功能，嵌套往往让整个样式更加直观简介。

.box {
  color: yellow;

  .brand {
    font-size: 20px;
  }
}

输出

.box { color: yellow; }
.box .brand { font-size: 20px; }

&代表了上一层选择器的名字，例子:

.box {
  color: yellow;

  .brand {
    font-size: 20px;
  }

  &-size {
    height: 100px;
    widows: 200px;
    background-color: green;

    &::after {
      content: "less"
    }

    &:hover{
      background-color: black
    }
  }
}

输出

.box {
  color: yellow;
}
.box .brand {
  font-size: 20px;
}
.box-size {
  height: 100px;
  widows: 200px;
  background-color: green;
}
.box-size::after {
  content: "less";
}
.box-size:hover {
  background-color: black;
}

5.导入

导入less文件时，后缀名可带可不带

@import "styles.less";
@import "styles";

如果要导入css文件，需要加上后缀
@import "styles.css"

6.作用域

在less中也有作用域，和JavaScript的作用域相似

@color: yellow;

#header {
  background-color: @color;			// yellow
}

.box {
  @color: blue;
  background-color: @color;			// blue
}

7.注释

// 单行注释

/*
多行注释
*/

Jacano

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
【LESS】less的基本用法

在vue和react的开发中，常常使用到了less作为css的处理方式。Less作为css的预处理语言，它保留了css的所有功能，在此基础上增加了许多变量、循环、继承等特性，拓展了css的用法。1.使用less本地使用less按照官网可以下载less.js文件，也可以直接使用cdn服务，在这里我直接使用了cdn，先上代码。// index.html&amp;lt;!DOCTYPE html...
复制链接

扫一扫

专栏目录