CSS预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为CSS增加了一些编程的特性,将CSS作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。
简单来说,CSS预处理器用一种专门的编程语言,进行Web页面样式设计,然后再编译成正常的CSS文件,以供项目使用。
CSS预处理器的技术现在已经很成熟了,而且也出现了各种不同的 CSS 预处理器语言,但是呢不可能一一列出,面面俱到,这篇文章呢,主要是介绍一下比较常见的CSS预处理器语言之一 Less以及个人的一些认识了解。
Less
Alexis Sellier与2009年设计 LESS的第一个版本是用Ruby编写的,在后来的版本中,它被JavaScript替代了。 Less是一门CSS预处理语言,扩充了 css语言,增加了诸如变量、混合(mixin)、函数等功能,让 css 更易于维护,方便制作主题。
关于Less的基本使用,我们需要从嵌套、混合、变量、函数以及引入这几个方面来一一认识。
1 Less的安装使用和编译:
引用Less,全局安装 npm install less -g
新建一个index.html文件和main.less,在index.html 中引入main.css,然后输入下面语句自动编译成main.css lessc main.less main.css
2 Less 的基本语法
嵌套
在 css 中父子元素的写法通常如下: .container {
padding: 0;
}
.container .header {
background-color: red;
}
通过Less 写法如下,父子嵌套关系一目了然。也就是下面的代码编译就成了上面的css语法。 .container {
padding: 0;
.header {
background-color: red;
}
}
伪类
伪类的写法,在 css 中写法如下: #header :after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
在less 引入可以用一个符号 & 代替主类 #header;&就代表了上一层的类名。 #header {
&:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
}
变量
也就是说定义一个公共的变量不用多次重复编写相同的代码;比如将三个div的背景颜色改成蓝色,我们只需要如下所示: @background:blue;
less就是js的写法来写css
使用@符号定义变量
@变量名 看成是一个字符串
变量可以作为样式属性值:background-color:@color;
也可以作为类名,我们需要把{ }包起来:如下代码.@classname 表示的就是 .main。 .@{classname}{
background-color:@color;
}
@classname:main;
@color:red;
函数
使用 $ lessc func.less 进行转译 func.css 文件 .border-radius(@radius) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header {
.border-radius(4px);
}
.button {
.border-radius(6px);
}
转化成了css如下:
#header {
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.button {
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
函数的参数允许设置默认值 .border-radius(@radius: 10px) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
}
#header{
.border-radius();
}
.button{
.border-radius();
}
编译css后的代码为:
#header {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.button {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
函数有多个参数时用分号隔开,调用时就是通过变量名称,而不是位置 .mixin(@radius:10px;@color:green;) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
color:@color;
}
#header{
.mixin(@color:green);
}
.button{
.mixin(@color:green);
}
编译成css为:
#header{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color:green;
}
.button{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color:green;
}
Less 内置函数(自己本身存在的函数)
escape
percentage(百分比) .mixin(@radius:10px;@color:green;) {
-webkit-border-radius: @radius;
-moz-border-radius: @radius;
border-radius: @radius;
color:@color;
width:percentage(.5);
}
#header{
.mixin(@color:green);
}
.button{
.mixin(@color:green);
}
编译成css为:
#header{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color:green;
width:50%;}
.button{
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
color:green;
width:50%;
}
convert(单位的转换)
混合
抽取公共类,例如下面的css代码可以用less这样编写
在css中的代码: #header a {
color: #111;
border-top: solid 1px #595959;
border-bottom: solid 2px #595959;
}
#header span {
height: 16px;
border-top: solid 1px #595959;
border-bottom: solid 2px #595959;
}
#header p {
color: red;
border-top: solid 1px #595959;
border-bottom: solid 2px #595959;
}
.borde_style {
border-top: solid 1px #595959;
border-bottom: solid 2px #595959;
}
在less中我们可以定义一个公共的样式名border-style,然后编译出来的css就是上面的css代码: .borde_style {
border-top: solid 1px #595959;
border-bottom: solid 2px #595959;
}
#header a {
color: #111;
.borde_style;
}
#header span {
height: 16px;
.borde_style;
}
#header p {
color: red;
.borde_style();
}
3 Less的引入
比如新建一个one.less,@import ‘./main.less ’ ;然后编译一下,我们会发现编译出来的。one.css里面就包含了main.less里面的样式内容。
4 Less的优势与劣势
优点:
开发速度提升
代码优化效率提高(对开发者而言)
代码更通俗易懂(对开发者而言)
代码更干净,优美
维护简单便捷
功能更多更强
缺点:
功能上比Sass弱,比如对象、循环和判断
生态环境略逊于Sass(2006)
需要多一个编译器来重新编译一次CSS代码,也就是给浏览器多了一道工序,网页显示的速度会减慢