less简单入门(CSS 预处理语言)

前端之家收集整理的这篇文章主要介绍了less简单入门(CSS 预处理语言)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

Less

是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数功能,让 CSS 更易维护、方便制作主题、扩充。

Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。

官网地址

less手册

bootstrap官网less介绍

一、浏览器端环境搭建

github下载地址:

1、js引入

搭建Less的学习环境非常简单,只需在
标签前通过

Note:注意你的less样式文件一定要在引入less.js前先引入。

2、less的css样式处理

less内联样式和外联样式

基于我们现在使用的是浏览器端进行预编译,因此Less可用于内联样式和外联样式当中。

内联样式如下:

代码

外联样式引入如下:

Note:注意rel的值是stylesheet/less

二、语法

1、注释

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

2、变量

Less中的变量有以下规则:

@作为变量的起始标识,变量名由字母、数字、_和-组成 没有先定义后使用的规定; 以最后定义的值为最终值; 可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接; 定义时 "@变量名: 变量值;" 的形式;引用时采用 "@变量名" 或 "@{变量名}" 的形式; 存在作用域,局部作用域优先级高于全局作用域。 Note:注意直接拷贝网页中代码可能因为一些空白符的原因导致编译出错。

less源码

.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. 以最后定义的值为最终值;

最终输出

三、gulp编译less

1、安装

全局安装:npm install -g less

项目内安装:npm install gulp-less --save-dev

2、使用

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']);
});

参考:

猜你在找的JavaScript相关文章