前端设计HTML与CSS开发工具_Less

前端移动端怎么开发工具|动态前端开发工具|ws 前端开发工具

web学习笔记-css预处理器Less

Get新技能真的是再好不过的事情了,久闻Less,Sass的大名,终于有机会来学习、使用它。
[quote]本篇你将get到:
什么是css预处理器?
如何使用Less?
Less特点
Less的优缺点[/quote]

什么是css预处理器?

css预处理器是一种语言为css增加了一些编程的特征,并且无需考虑浏览器的兼容性,你可以在你的css样式中使用变量,简单的逻辑处理,甚至函数。

我的理解这个处理器就是把你的写的这些less,saas,stylus也好,统统转换成浏览器能识别的css样式。

目前比较普遍的是这3款预处理器架构,分别是Sass(http://sass-lang.com/)、Less css(http://lesscss.org/) 、stylus(http://stylus-lang.com/)。Sass文件使用.sass扩展名,Less使用.less扩展名,相应的Stylus使用.styl扩展名

关于css预处理器less,如题, 因为项目中使用到了Less,今天稍微学习总结了一下它的用法。

#####如何使用Less?
node环境下运行: npm install less
客户端使用Less的话,直接在项目中引入less.js文件即可,但得在.less文件前引入。

Less特点:

a.使用变量
例如一些通用的颜色值,图片路径等,
使用变量的两个好处: 多处利用 和方便维护,只需改变量值就行了。
less中变量名使用@符合开始,在Saas中则是使用$开头,在Stylus中无限制。
[quote]@mainColor: #333;
@width: 1024px;
span {
width: @width;
border:1px solid @mainColor;
}[/quote]
编译结果:
[quote]span {
width: 1024px;
border:1px solid #333;
}
[/quote]

b.使用嵌套语法
例子
[quote].lTopBar {
padding: 14px 0;
border-bottom: 1px solid #eeeeee;
line-height: 28px;

        .ddColor {
                  color: #0fa6d2!important;
                a{
                  text-decoration: none;
                &:hover{
                      border-width: 1px;

              }

           }
        }

    }[/quote]

编译结果:
[quote].lTopBar {
padding: 14px 0;
border-bottom: 1px solid #eeeeee;
line-height: 28px;
}
.TopBar .ddColor {
color: #0fa6d2!important;
}
.TopBar .ddColor a {
text-decoration: none;
}
.TopBar .ddColor a:hover {
border-width: 1px;
}[/quote]
这里之后的 样式嵌套在.TopBar下, 可以省略嵌套前的标签属性类等。

c.运算符
css都能加减乘除了,我的天,要不要这么复杂啊!
例子:
[quote]@color:#111;
div {
background:@color+#222;
}[/quote]
编译结果:
[quote]div{

333333;

}[/quote]

d.处理浏览器兼容
这个是我认为最实用的一个功能,避免了做重复的事情。
例如解决浏览器兼容问题,使用 border-radius需要加上浏览器前缀,麻烦而且多处书写。
例子:
[quote].border-radius(@values){
-webkit-border-radius: @values;
-moz-border-radius: @values;
border-radius: @values;
}
div {
@border-raduis(10px);
}[/quote]

编译结果:
[quote]div {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}[/quote]

例子
[quote].transition(@transition) {
-webkit-transition: @transition;
-moz-transition: @transition;
-o-transition: @transition;
transition: @transition;
}
a{.transition(all 0.4s);}
[/quote]
编译结果:

[quote]a {
-webkit-transition: all 0.4s;
-moz-transition: all 0.4s;
-o-transition: all 0.4s;
transition: all 0.4s;
}[/quote]

e:Mixins (混入)
有点类似于js定义的全局变量,到处都能直接调用。
例子:
定义了一个错误提示,字体变大变红。
[quote].error(@fontsize: 20px) {
font-size:@fontsize;
color:red;
}[/quote]
其他地方直接调用 .error(10px);即可。

f:less的导入
Less中可以导入css文件也可以导入Less文件。导入的css文件会保持原样,less文件会被编译。并且less的导入不要求放在顶部。
例如:
[quote]@import “utils”;
@import “bootstrap-theme”;[/quote]
这里并没有指定less后缀文件,导入时会默认为less文件,等同于
[quote]@import “utils.less”;
@import “bootstrap-theme.less”;

例如:
span{
@import “bootstrap-theme”;
}[/quote]
那么这里导入的样式将作用于span标签。
甚至还可以针对媒体查询的结果来指定导入less文件
例如
[quote]@import “utils.less” screen and (max-width: 400px);
编译结果:
@media screen and ( max-width: 400px){
utils.css样式…..
}[/quote]
g.less中使用注释
单行注释使用 // 或者css的注释符号 /单行/,多行注释使用/ 多行/
[quote] // Hi, I’m a silent comment。
.class { color: white }

/Hi,
I’m a silent comment。
/
.class { color: white }
[/quote]

大概总结了一下Less的优缺点:
[quote]优点:
a.css的语法不够强大,需要重复书写很多重复的选择器.less刚好解决了这一问题。
b.提供变量和逻辑控制
c.合理的样式复用机制 减少代码的冗余
d.提高代码的可维护性
e.mixin 混入
缺点:
a.也需花费一定时间去了解学习使用这个预处理,团队协作的难度加大
b.个人感觉是css本来就是很简单的东西,less中有些处理反而让它变得更复杂。[/quote]

最后
Less的官方学习网站http://lesscss.org

github地址:https://github.com/less/less.js

膜拜一下大神,less作者 Alexis Sellier

前端开发工具sublime|javascript 前端开发工具|w3c前端开发工具箱

» 本文来自:前端开发者 » 《前端设计HTML与CSS开发工具_Less》
» 本文链接地址:https://www.rokub.com/3937.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!