less实例

来源：互联网发布：淘宝网短袖女装编辑：程序博客网时间：2024/06/04 19:28

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.运行结果

阅读全文

1 0