CSS的几款流行预处理器

预处理器是一种程序，需要将一种程序的数据转换成另一种程序的数据。它可以帮助我们编写可维护的、与时俱进的代码，也可以减少需要编写的CSS数量，这些工具对于哪些需要大量样式表和样式规则的大型用户界面是非常有帮助的。

SASS

首先是SASS，拥有多年开元历史项目。可以说他定义了现代CSS预处理器也不为过。

它的比较实用的语法有：

变量

sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样），如果值后面加上!default则表示默认值。

普通变量：

定义之后可以在全局范围内使用。

复制代码
$width:100px;    
 div{
  width:$width;  
}
style{
  width:$width;  
}
复制代码

默认变量

sass的默认变量仅需要在值后面加上!default即可。

复制代码
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//css style
//-------------------------------
body{
    line-height:1.5;
}
复制代码

sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。

这些也是我们用得比较多的语法。

然后下面是我个人认为比较实用，用处比较大的一些总结：

嵌套

选择器嵌套

所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。

在选择器嵌套中，可以使用&表示父元素选择器，示例如下：

复制代码
//sass style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

//css style
//-------------------------------
#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
}  
#top_nav li{
  float:left;
}
#top_nav a{
  display: block;
  padding: 0 10px;
  color: #fff;
}
#top_nav a:hover{
  color:#ddd;
}
复制代码

属性嵌套

所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。由于本人不是很喜欢这个功能，感觉需要用到这方法比较少。就不在这里介绍了。

混合(mixin)

sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

无参数mixin

复制代码
//sass style
//-------------------------------
@mixin center-block {
    margin-left:auto;
    margin-right:auto;
}
.demo{
    @include center-block;
}

//css style
//-------------------------------
.demo{
    margin-left:auto;
    margin-right:auto;
}
复制代码

有参数mixin

复制代码
//sass style
//-------------------------------   
@mixin opacity($opacity:50) {
  opacity: $opacity / 100;
  filter: alpha(opacity=$opacity);
}

//css style
//-------------------------------
.opacity{
  @include opacity; //参数使用默认值
}
.opacity-80{
  @include opacity(80); //传递参数
}
复制代码

多个参数mixin

调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

复制代码
//sass style
//-------------------------------   
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}

//css style
//-------------------------------
.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.imgtext-h--product li {
    border-bottom: 1px dashed #cccccc;
    padding-top: 15px;
    padding-bottom: 15px;
}
复制代码

继承

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

复制代码
//sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

//css style
//-------------------------------
h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}
复制代码

Less.js

(我们常常简称 "Less")，现在最为流行的CSS预处理器之一。Sass强有力的竞争者。less需要在Node.js环境使用。

其中一个通用特征是mixins,在 Less 中，你可以使用类.class和.button-checkout-process来实现mixins属性。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.button {
display: inline-block;
width: 80%;
max-width: 200px;
border-radius: 5px;
background-color: black;
color: white;
font-size: 14px;
margin: 5px;
padding: 8px;
}
 
.button-checkout- process {
.button(); /* Mixin */
background-color: silver;
}
 

Stylus

Stylus是功能丰富的CSS扩展，有60多种自定义函数，包括saturation()，可以推算适配CSS饱和颜色。

Stylus 可以省略花括号({}), 冒号 (:), 分号 (;)，或者直接使用纯CSS。

下面来个例子：

1
2
3
4
.button
display inline-block
border-color saturation(#000, 50%)
border-radius 5px

上面的例子等效于：

1
2
3
4
5
6
7
.button {
display: inline-block;
border-color: #959595;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}

 

posted on 2020-03-25 09:25  漫思  阅读(10041)  评论(0)  编辑  收藏  举报

导航