189 8069 5689

LESS与SASS

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

创新互联网站建设公司,提供成都做网站、成都网站制作,网页设计,建网站,PHP网站建设等专业做网站服务;可快速的进行网站开发网页制作和功能扩展;专业做搜索引擎喜爱的网站,是专业的做网站团队,希望更多企业前来合作!

用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而可能引起的任何问题。尽管这不大可能,但终归是有可能的。


新闻标题:LESS与SASS
标题URL:http://jkwzsj.com/article/pisgih.html

其他资讯