CSS中预处理语言的示例分析-梓潼大橙子建站
CSS中预处理语言的示例分析
小编给大家分享一下CSS中预处理语言的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
专注于为中小企业提供成都网站制作、成都网站设计、外贸营销网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业南谯免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了上1000家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。
Less是一门 CSS 预处理语言,它扩充了 CSS 语言,增加了诸如变量、混合(mixin)、函数等功能,让 CSS 更易维护、方便制作主题、扩充。
Less 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。
官网地址
http://lesscss.org/
less手册
www.lesscss.net/
bootstrap官网less介绍
http://less.bootcss.com/
一、浏览器端环境搭建
github下载地址:https://github.com/less/less.js
1、js引入
搭建Less的学习环境非常简单,只需在
标签前通过引入处理器即可实现浏览器端中将less预编译为css样式。
更有效的方式是通过如下代码监测less样式,自动编译为css样式,从而减少我们修改less代码后需按F5后才看到实际效果的繁琐步骤。
Note:注意你的less样式文件一定要在引入less.js前先引入。
2、less的css样式处理
less内联样式和外联样式
基于我们现在使用的是浏览器端进行预编译,因此Less可用于内联样式和外联样式当中。
内联样式如下:
外联样式引入如下:
Note:注意rel的值是stylesheet/less
二、语法
1、注释
// 单行注释,不会作为最终输出
/*
多行注释,以原生CSS的/*注释....*/形式作为最终输出
*/
2、变量
Less中的变量有以下规则:
以@
作为变量的起始标识,变量名由字母、数字、_和-组成
没有先定义后使用的规定;
以最后定义的值为最终值;
可用于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;
}
三、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']);
});
以上是“CSS中预处理语言的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!
网站栏目:CSS中预处理语言的示例分析
网址分享:http://myzitong.com/article/goecpe.html