聊聊CSS预处理语言

敞开成长之旅!这是我参加「日新计划 12 月更文挑战」的第 14 天,点击检查活动概况

前语

Css作为一门符号忆言语,语法相对简单,对运用者的要求较低,但同时也带来一些问题

需要书写很多看似没有逻辑的代码,不便利保护及扩展,不利于复用,特别对于非前端开发工程师来讲,往往会由于缺少Css编写经验而很难写出组织杰出且易于保护的Css代码

Css预处理器便是针对上述问题的解决方案

预处理言语

扩充了Css言语,增加了比如变量、混合(mixin)、函数等功用,让Css更易保护、便利

本质上,预处理是Css的超集

包括一套自界说的语法及一个解析器,根据这些语法界说自己的款式规则,这些规则最终会经过解析器,编译生成对应的Css文件

CSS预处理言语有哪些

Css预编译言语在前端里边有三大优异的预编处理器,分别是:

  • sass
  • less
  • stylus

sass

2007 年诞生,最早也是最成熟的Css预处理器,拥有 Ruby 社区的支撑和Compass这一最强大的Css框架,目前受LESS影响,现已进化到了全面兼容CssScss

文件后缀名为.sassscss,能够严厉依照 sass 的缩进方式省去大括号和分号

less

2009年出现,受SASS的影响较大,但又运用Css的语法,让大部分开发者和设计师更容易上手,在Ruby社区之外支撑者远超过SASS

其缺点是比起SASS来,可编程功用不够,不过长处是简单和兼容Css,反过来也影响了SASS演变到了Scss的年代

stylus

Stylus是一个Css的预处理框架,2010 年发生,来自Node.js社区,主要用来给Node项目进行Css预处理支撑

所以Stylus是一种新式言语,能够创立健壮的、动态的、赋有表现力的Css。比较年青,其本质上做的工作与SASS/LESS等类似

区别

虽然各种预处理器功用强大,但运用最多的,还是以下特性:

  • 变量(variables)
  • 效果域(scope)
  • 代码混合( mixins)
  • 嵌套(nested rules)
  • 代码模块化(Modules)

因而,下面就打开这些方面的区别

基本运用

less和scss

.box {
  display: block;
}

sass和stylus

.box
  display: block

嵌套

三者的嵌套语法都是一致的,甚至连引用父级选择器的符号 & 也相同

区别只是 Sass 和 Stylus 能够用没有大括号的方式书写

less

.a {
  &.b {
    color: red;
  }
}

变量

变量无疑为 Css 增加了一种有效的复用方式,减少了原来在 Css 中无法防止的重复「硬编码」

less声明的变量必须以@最初,后面紧跟变量名和变量值,并且变量名和变量值需要运用冒号:分离隔

@red: #c00;
strong {
  color: @red;
}

sass声明的变量跟less十分的类似,只是变量名前面运用@最初

$red: #c00;
strong {
  color: $red;
}

stylus声明的变量没有任何的限制,能够运用$最初,结尾的分号;可有可无,但变量与变量值之间需要运用=

stylus中咱们不建议运用@符号最初声明变量

red = #c00
strong
  color: red

效果域

Css预编译器把变量赋予效果域,也便是存在生命周期。就像js相同,它会先从部分效果域查找变量,顺次向上级效果域查找

sass中不存在全局变量

$color: black;
.scoped {
  $bg: blue;
  $color: white;
  color: $color;
  background-color:$bg;
}
.unscoped {
  color:$color;
} 

编译后

.scoped {
  color:white;/*是白色*/
  background-color:blue;
}
.unscoped {
  color:white;/*白色(无全局变量概念)*/
} 

所以,在sass中最好不要界说相同的变量名

lessstylus的效果域跟javascript十分的类似,首先会查找部分界说的变量,如果没有找到,会像冒泡相同,一级一级往下查找,直到根为止

@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
} 

编译后:

.scoped {
  color:white;/*白色(调用了部分变量)*/
  background-color:blue;
}
.unscoped {
  color:black;/*黑色(调用了全局变量)*/
} 

混入

混入(mixin)应该说是预处理器最精华的功用之一了,简单点来说,Mixins能够将一部分款式抽出,作为单独界说的模块,被很多选择器重复运用

能够在Mixins中界说变量或者默认参数

less中,混合的用法是指将界说好的ClassA中引进另一个现已界说的Class,也能运用够传递参数,参数变量为@声明

.alert {
  font-weight: 700;
}
.highlight(@color: red) {
  font-size: 1.2em;
  color: @color;
}
.heads-up {
  .alert;
  .highlight(red);
}

编译后

.alert {
  font-weight: 700;
}
.heads-up {
  font-weight: 700;
  font-size: 1.2em;
  color: red;
}

Sass声明mixins时需要运用@mixinn,后面紧跟mixin的名,也能够设置参数,参数名为变量$声明的方式

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}
.page-title {
  @include large-text;
  padding: 4px;
  margin-top: 10px;
}

stylus中的混合和前两款Css预处理器言语的混合略有不同,他能够不运用任何符号,便是直接声明Mixins名,然后在界说参数和默认值之间用等号(=)来连接

error(borderWidth= 2px) {
  border: borderWidth solid #F00;
  color: #F00;
}
.generic-error {
  padding: 20px;
  margin: 4px;
  error(); /* 调用error mixins */
}
.login-error {
  left: 12px;
  position: absolute;
  top: 20px;
  error(5px); /* 调用error mixins,并将参数$borderWidth的值指定为5px */
} 

模块化

模块化便是将Css代码分成一个个模块

scsslessstylus三者的运用方法都如下所示

@import './common';
@import './github-markdown';
@import './mixin';
@import './variables';

结语

本文到此结束,谢谢我们的观看!

如有问题,欢迎各位纠正!