当前位置：首页 > 资讯 > 技术文档

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

时间：2020-12-01 22:59 编辑：来源：阅读：
扫一扫，手机访问

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

[b]Less [/b]是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。 Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。 [b]官网地址[/b] [url=http://lesscss.org/]http://lesscss.org/[/url] less手册 [url=http://www.lesscss.net/]www.lesscss.net/[/url] bootstrap官网less介绍 [url=http://less.bootcss.com/]http://less.bootcss.com/[/url] [b]一、浏览器端环境搭建[/b] github下载地址：[url=https://github.com/less/less.js]https://github.com/less/less.js[/url] [b]1、js引入 [/b]搭建Less的学习环境非常简单，只需在</body>标签前通过<script type="text/javascript" src="less.js"></script>引入处理器即可实现浏览器端中将less预编译为css样式。更有效的方式是通过如下代码监测less样式，自动编译为css样式，从而减少我们修改less代码后需按F5后才看到实际效果的繁琐步骤。

<script>less = { env: 'development'};</script>
<script src="less.js"></script>
<script>less.watch();</script>

Note:注意你的less样式文件一定要在引入less.js前先引入。 [b]2、less的css样式处理[/b] less内联样式和外联样式基于我们现在使用的是浏览器端进行预编译，因此Less可用于内联样式和外联样式当中。内联样式如下：

<style type="text/less">
 // less 代码
</style>

外联样式引入如下： Note:注意rel的值是stylesheet/less <link rel="stylesheet/less" type="text/css" href="文件.less" rel="external nofollow" /> [b]二、语法[/b] [b]1、注释[/b]

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

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

[b]三、gulp编译less[/b] [b]1、安装 [/b]全局安装：[code]npm install -g less[/code] 项目内安装：[code]npm install gulp-less --save-dev[/code] [b]2、使用[/b]

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

参考：[url=http://www.1sucai.cn/article/107875.htm]http://www.1sucai.cn/article/107875.htm[/url]

全部评论(0)

上一篇：JavaScript的React Web库的理念剖析及基础上手指南
下一篇：移动设备web开发首选框架：zeptojs介绍

资讯排行榜
更多>>