less实例

最新推荐文章于 2022-07-07 21:50:05 发布

徐同保

最新推荐文章于 2022-07-07 21:50:05 发布

阅读量1.2k

点赞数 1

分类专栏： web前端前端技术分享文章标签： javascript less

本文链接：https://blog.csdn.net/xutongbao/article/details/78192961

版权

web前端同时被 2 个专栏收录

735 篇文章 15 订阅

订阅专栏

前端技术分享

251 篇文章 3 订阅

订阅专栏

1.目录结构

2.index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>less</title>
    <link  href="styles.css" type="text/css" rel="stylesheet"/>
    <script src="https://cdn.bootcss.com/less.js/3.0.0-pre.4/less.js"></script>
</head>
<body>
    <div class="dialog"></div>
</body>
</html>

3.styles.less

@color: color;
@dialog: .dialog;
@suffix: fix;
// 空格将被忽略，若要保留空格则需要使用单引号或双引号
@hi: '徐 ';
@dear: 同保   ;

.dialog{
  // 用于 rule属性部件，必须使用"@{变量名}" 的形式
  background-@{color}: #888;
  // 用于 rule属性，必须使用"@{变量名}" 的形式
  @{color}: #000eff;
  border-color: @dialog-border-color;
  border-width: @dialog-border-width;
  border-style: solid;
}
// 用于 选择器，必须使用"@{变量名}" 的形式
@{dialog}{
    width: 200px;
}
@{dialog}::after{
  content: '@{hi}@{dear}';    // 用于 字符串拼接，必须使用"@{变量名}" 的形式
}
@h: 1000px;

// 用于 选择器部件，必须使用"@{变量名}" 的形式
.ie-@{suffix}{
  @h: 30px; // 存在作用域，局部作用域优先级高于全局作用域。
  height: @h; // 用于属性值，两种形式均可使用
  line-height: 30px;
}

// 1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
// 2. 没有先定义后使用的规定；
@dialog-border-color: #f70009;
@dialog-border-width: 10px;
@dialog-border-width: 1px; // 3. 以最后定义的值为最终值；

4.安装和命令行用法

$ npm install -g less

$ lessc styles.less styles.css

5.生成styles.css

.dialog {
  background-color: #888;
  color: #000eff;
  border-color: #f70009;
  border-width: 1px;
  border-style: solid;
}
.dialog {
  width: 200px;
}
.dialog::after {
  content: '徐 同保   ';
}
.ie-fix {
  height: 30px;
  line-height: 30px;
}

6.运行结果