less的基本语法

最新推荐文章于 2025-01-12 20:50:28 发布

flybirding10011

最新推荐文章于 2025-01-12 20:50:28 发布

阅读量204

点赞数

本文章主要简单了解一下less的用法，若想详细了解，请去官网：http://lesscss.cn/

一、语法
1.注释

// 单行注释，不会作为最终输出
/* 
    多行注释，以原生CSS的/*注释....*/形式作为最终输出
 */

2.变量
Less中的变量有以下规则：

1.以@作为变量的起始标识，变量名由字母、数字、_和-组成
2.没有先定义后使用的规定；
3.以最后定义的值为最终值；
4.可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；
5.定义时 “@变量名: 变量值;” 的形式；引用时采用 “@变量名” 或 “@{变量名}” 的形式；
6.存在作用域，局部作用域优先级高于全局作用域。

less源码

@color: color;
@dialog: .dialog;
@suffix: fix;
// 空格将被忽略，若要保留空格则需要使用单引号或双引号
@hi: 'hello ';
@dear: there  ;
  
.dialog{
  // 用于 rule属性部件，必须使用"@{变量名}" 的形式
  background-@{color}: #888;
  // 用于 rule属性，必须使用"@{变量名}" 的形式
  @{color}: blue;
}
// 用于 选择器，必须使用"@{变量名}" 的形式
@{dialog}{
  width: 200px;
}
@{dialog}::after{
  content: ': @{hi}@{dear}!';    // 用于 字符串拼接，必须使用"@{变量名}" 的形式
}
@h: 1000px;
// 用于 选择器部件，必须使用"@{变量名}" 的形式
.ie-@{suffix}{
  @h: 30px; // 存在作用域，局部作用域优先级高于全局作用域。
  height: @h; // 用于 属性值，两种形式均可使用
  line-height: 30px;
}
    
// 1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
// 2. 没有先定义后使用的规定；
@dialog-border-color: #666;
@dialog-border-width: 10px;
@dialog-border-width: 1px; // 3. 以最后定义的值为最终值；

最终输出：

.dialog {
  background-color: #888;
  color: blue;
}
.dialog {
  width: 200px;
}
.dialog::after {
  content: ': hello there!';
}
.ie-fix {
  height: 30px;
  line-height: 30px;
}

二、gulp编译less
1.安装

全局安装：npm install -g less
项目内安装：npm install gulp-less –save-dev

2.使用

var gulp=require("gulp");
var less=require("gulp-less");


gulp.task("less",function(){
gulp.src('src/css/*.less')
.pipe(less())
.pipe(gulp.dest("src/css"));
});

//监视文件的变化
gulp.task("watch",function(){
gulp.watch("src/css/*.less",['less']);
});