码迷,mamicode.com
首页 > 其他好文 > 详细

LESS 与 SASS

时间:2015-02-15 23:14:22      阅读:619      评论:0      收藏:0      [点我收藏+]

标签:样式   color   less   sass   

作为 CSS 的一种扩展,Less 不仅完全兼容 CSS 语法,而且连新增的特性也是使用 CSS 语法。这样的设计使得学习 Less 很轻松,而且你可以在任何时候回退到 CSS。

用less来控制样式,更加的方便,写好的less代码,可以通过编译生成css,这是对css非常强大的扩展,让我们写起代码时,更加的顺畅。


变量,在less中声明变量用@,例如:

@test: red;

.test{

color: @test;

}

编译后:

.test{

color: red;

}

注:变量只能定义一次,本质就是常量

混合(Mixin),在两块样式中,可以引用另一个块的样式,例如:

.cls{

width: 100px;

height: 100px;

}

.cls1{

background: green;

.cls;

}

.cls2{

background: #ccc;

.cls;

}

编译后:

.cls1{

background: green;

width: 100px;

height: 100px;

}

.cls2{

background: #ccc;

width: 100px;

height: 100px;

}

嵌套规则,选择器可以嵌套写,一层一层的,模仿html的DOM结构写,例如:

.parent{

width: 100px; height: 100px;

background: #000DFF;

.first{

color: #00FF20;

}

.second{

color: red;

}

}

编译后:

.parent{

width: 100px; height: 100px;

background: #000DFF;

}

.first{

color: #00FF20;

}

.second{

color: red;

}

运算,任何数字、颜色或者变量都可以参与运算,(+-*/)例如:

@border: 1px;

border: @border * 5 solid #000;


函数,Less 内置了多种函数用于转换颜色、处理字符串、算术运算等。可参考函数手册。


注释,块注释和行注释都可以使用:

/* */     //


导入,以导入一个.less文件。

@import "library"; // library.less @import "typo.css"; 


这只是less一些简单的使用方法,还有很多高级的东西,慢慢看吧,很值得学习,会继续关注less,并在项目中使用。

学习链接:http://less.bootcss.com/


LESS和Sass在语法上有些共性,比如下面这些:


混入(Mixins)——class中的class;

参数混入——可以传递参数的class,就像函数一样;

嵌套规则——Class中嵌套class,从而减少重复的代码;

运算——CSS中用上数学;

颜色功能——可以编辑颜色;

名字空间(namespace)——分组样式,从而可以被调用;

作用域——局部修改样式;

JavaScript 赋值——在CSS中使用JavaScript表达式赋值。

LESS和Sass的主要不同就是他们的实现方式,LESSS是基于JavaScript,所以,是在客户端处理的。


另一方面,Sass是基于Ruby的,然后是在服务器端处理的。很多开发者不会选择LESS因为JavaScript引擎需要额外的时间来处理代码然后输出修改过的CSS到浏览器。关于这个有很多种方式,我选择的是只在开发环节使用LESS。一旦我完成了开发,我就复制然后粘贴LESS输出的到一个压缩器,然后到一个单独的CSS文件来替代LESS文件。另一个选择是使用LESS.app来编译和压缩你的LESS文件。两个选择都将最小化你的样式输出,从而避免由于用户的浏览器不支持JavaScript而可能引起的任何问题。尽管这不大可能,但终归是有可能的。


本文出自 “时光” 博客,请务必保留此出处http://timeblog.blog.51cto.com/8650972/1614588

LESS 与 SASS

标签:样式   color   less   sass   

原文地址:http://timeblog.blog.51cto.com/8650972/1614588

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!