CSS预处理器，sass和less的嵌套用法

前言

前端人员应该都熟悉CSS，我们知道它并不是一种编程语言，我们可以用它开发网页样式，但却不能用它进行编程，也就是说CSS基本是设计师的工具，不是程序员的工具。在前端人员眼中，CSS是一件很麻烦的东西。它不能写变量，也不能写条件语句，只是一行行单纯的样式描述，在大型项目中写起来显得尤为复杂。所以，有大佬就开始为CSS加入编程元素，这就是我们这篇文章要讲的「CSS预处理器」，它的基本思想是用一种专门的编程语言进行开发，然后再编译成正常的CSS文件，一般常见的CSS预处理器有：Sass、Less、Stylus等

Sass

Sass最早由 Hampton Catlin 开发和设计。一种帮助你简化 CSS 工作流程的方式，帮助你更容易维护和开发 CSS 内容。Sass 是这个世界上最成熟、稳定和强大的专业级 CSS 扩展语言。Sass专注的是怎样创建优雅的样式表，而不是内容。

基本用法

变量

sass可以允许我们使用变量，在sass中所有变量都必须以$开头，如果值后面加上!default则表示默认值

「普通变量」

$pink: ffc0cb;
.text {
	color: $pink;
}

「默认变量」

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

$width: 200px !default;
div {
  width: $width;
}

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

「如果变量需要镶嵌在字符串中，就必须写在#{}中」

$side: left;
.container {
  border-#{$side}-radius: 10px;
}

嵌套

「选择器嵌套」

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

.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;
    }
  }
}

「在选择器嵌套中，可以使用&表示父元素选择器」

「属性嵌套」

比如border-color属性，可以写成：

p {
  border: {
    color: red;
  }
}

注意，border后面必须加上冒号。

表达式计算

sass允许在代码中使用表达式计算：

div {
  margin: (14px/2);
  top: 50px   100px;
}

继承

sass允许一个选择器继承另一个选择器的属性

.box1 {
  border: 1px solid #ccc;
}
/*box2想要继承box1，就要使用@extend命令*/
.box2 {
  @extend .box1;
  border-radius: 10px;
}

Mixin

学过vue的同学应该知道这个东西，它叫全局混入，用来混入重用的模块，在sass中，它也是用来重用代码块的

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

首先使用@mixin来定义一个代码块

@mixin left {
  float: left;
  margin-left: 10px;
}

然后可以使用@include来调用这个mixing

.box {
  include left;
}

mixin的作用远不止如此，它还可以指定参数和缺省值

@mixin left($value: 10px) {
  float: left;
  margin-left: $value;
}

在使用的时候，根据自身需要来传入参数

.box {
  include left(20px);
}

颜色函数

SASS提供了一些内置的颜色函数，以便生成系列颜色。

lighten(#cc3, 10%) // #d6d65c
darken(#cc3, 10%) // #a3a329
grayscale(#cc3) // #808080
complement(#cc3) // #33c

导入文件

sass 拓展了 @import 的功能，允许其导入 SCSS 或 sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

通常，@import 寻找 Sass 文件并将其导入，但在以下情况下，@import 仅作为普通的 CSS 语句，不会导入任何 Sass 文件。

• 文件拓展名是 .css；
• 文件名以 http:// 开头；
• 文件名是 url()；
• @import 包含 media queries。

如果不在上述情况内，文件的拓展名是 .scss 或 .sass，则导入成功。没有指定拓展名，Sass 将会试着寻找文件名相同，拓展名为 .scss 或 .sass 的文件并将其导入。

@import "foo.scss";
/* 或者 */
@import "foo";

以上两种方式都会导入文件 foo.scss

「sass 允许同时导入多个文件，文件之间只需使用,隔开」

@import "rounded-corners", "text-shadow";

「sass允许嵌套@import」

大多数情况下，一般在文件的最外层（不在嵌套规则内）使用 @import，其实，也可以将 @import 嵌套进 CSS 样式或者 @media 中，与平时的用法效果相同，只是这样导入的样式只能出现在嵌套的层中。

/*a.scss*/
.box {
  color: red;
}

然后将文件a.scss导入到.main样式中

.main {
  @import 'a'
}

以上代码会被编译成这样：

.main .box {
  color: red;
}

「注意⚠️：不可以在混合指令 (mixin) 或控制指令 (control directives) 中嵌套 @import。」

条件语句

在sass中允许使用@if来判断，当 @if 的表达式返回值不是 false 或者 null 时，条件成立，输出 {} 内的代码：

p {
  @if 1   1 == 2 { border: 1px solid; }
  @if 5 < 3 { border: 2px dotted; }
  @if null  { border: 3px double; }
}

编译成

p {
  border: 1px solid;
}

@if 声明后面可以跟多个 @else if 声明，或者一个 @else 声明。如果 @if 声明失败，Sass 将逐条执行 @else if 声明，如果全部失败，最后执行 @else 声明，例如：

$type: monster;
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

编译成

p {
  color: green; 
}

循环语句

@for

sass中允许使用@for来做循环，@for 指令可以在限制的范围内重复输出格式，每次按要求（变量的值）对输出结果做出变动。这个指令包含两种格式：@for $var from <start> through <end>，或者 @for $var from <start> to <end>，区别在于 through 与 to 的含义：当使用 through 时，条件范围包含 <start> 与 <end> 的值，而使用 to 时条件范围只包含 <start> 的值不包含 <end> 的值。另外，$var 可以是任何变量，比如 $i；<start> 和 <end> 必须是整数值。

@for $i from 1 to 2 {
  .border-#{$i} {
    border: #{$i}px solid blue;
  }
}

编译成

.border-1 {
  border: 1px solid blue;
}
.border-2 {
  border: 2px solid blue;
}

@while

sass中还允许使用@while来做循环，@while 指令重复输出格式直到表达式返回结果为 false。这样可以实现比 @for 更复杂的循环，只是很少会用到。例如：

$i: 2;

　　@while $i > 0 {
　　　　.border-#{$i} {
        border: #{$i}px solid blue;
      }
　　　　$i: $i - 1;
　　}

@each

@each 指令的格式是 $var in <list>, $var 可以是任何变量名，比如 $length 或者 $name，而 <list> 是一连串的值，也就是值列表。

@each 将变量 $var 作用于值列表中的每一个项目，然后输出结果，例如：

@each $animal in puma, sea-slug, egret, salamander {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

自定义函数

Sass 支持自定义函数，并能在任何属性值或 Sass script 中使用：

$grid-width: 40px;
$gutter-width: 10px;

@function grid-width($n) {
  @return $n * $grid-width   ($n - 1) * $gutter-width;
}

#sidebar { width: grid-width(5); }

编译为

#sidebar {
  width: 240px; }

与 mixin 相同，也可以传递若干个全局变量给函数作为参数。一个函数可以含有多条语句，需要调用 @return 输出结果。

sass还提供了很多自带函数，如字符串函数(Strings)、数字函数(Numbers)、列表函数(Lists)、字典函数(Maps)等，这里就不列举了，可以自行去官网查找。

Less

Less 是一门 CSS 预处理语言，它扩充了 CSS 语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。

变量

less也支持使用变量，在less中变量必须以@开头

@width: 10px;
@height: @width   10px;

.header {
  width: @width;
  height: @height;
}

嵌套

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

用 Less 语言我们可以这样书写代码：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

Mixin

less也支持mixing，混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。

.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}

如果我们希望在其它规则集中使用这些属性，我们只需像下面这样输入所需属性的类（class）名称即可，如下所示：

#menu a {
  color: #111;
  .bordered();
}

.post a {
  color: red;
  .bordered();
}

表达式计算

算术运算符  、-、*、/ 可以对任何数字、颜色或变量进行运算。如果可能的话，算术运算符在加、减或比较之前会进行单位换算。计算的结果以最左侧操作数的单位类型为准。如果单位换算无效或失去意义，则忽略单位。无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm   10mm; // 结果是 6cm
@conversion-2: 2 - 3cm - 5mm; // 结果是 -1.5cm

// conversion is impossible
@incompatible-units: 2   5px - 3cm; // 结果是 4px

// example with variables
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base   @filler; // 结果是 15%

导入

“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉：

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

命名空间和访问符

(不要和 CSS @namespace 或 namespace selectors混淆了)。

有时，出于组织结构或仅仅是为了提供一些封装的目的，你希望对混合（mixins）进行分组。你可以用 Less 更直观地实现这一需求。假设你希望将一些混合（mixins）和变量置于 #bundle 之下，为了以后方便重用或分发：

#bundle() {
  .button {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover {
      background-color: white;
    }
  }
}
.tab { 
	color: #ccc;
}

现在，如果我们希望把 .button 类混合到 #header a 中，我们可以这样做：

#header a {
  color: orange;
  #bundle.button();  // 还可以书写为 #bundle > .button 形式
}

注意：如果不希望它们出现在输出的 CSS 中，例如 #bundle .tab，请将 () 附加到命名空间（例如 #bundle()）后面。

函数

在Less里面函数的概念还是比较容易理解的。比如我们有这么一段定义：

.mixin (dark, @color) {
  color: darken(@color, 10%);
}
.mixin (light, @color) {
  color: lighten(@color, 10%);
}
.mixin (@_, @color) {
  display: block;
}

然后有这么一句调用

@switch: light;

.class {
  .mixin(@switch, #888);
}

编译得到

.class {
  color: #a2a2a2;
  display: block;
}

条件语句

首先定义几个条件判断的“方法”

.mixin (@a) when (lightness(@a) >= 50%) {
  background-color: black;
}
.mixin (@a) when (lightness(@a) < 50%) {
  background-color: white;
}
.mixin (@a) {
  color: @a;
}

然后调用该方法

.class1 { .mixin(#ddd) }
.class2 { .mixin(#555) }

编译得到：

.class1 {
  background-color: black;
  color: #ddd;
}
.class2 {
  background-color: white;
  color: #555;
}

「when的语法不难理解，就是一个条件判断，关键是下面的color从哪里来的。原来在Less里面是一种混合调用的方式，也就是说，如果定义了三个函数mixin，分别对应有三个不同的条件，那么我们调用mixin函数的时候如果三个的条件都满足，那么它三个的结果都会得到。这就是为什么我们class1和class2得到如上结果。在Less里面所有的运算符有：>、 >=、 =、 =<、 <，除了这5个运算符，Less还提供了基于值类型进行判断的方法：iscolor()、isnumber()、isstring()、iskeyword()、isurl()等。用法如下：」

.mixin (@a, @b: 0) when (isnumber(@b)) { ... }
.mixin (@a, @b: black) when (iscolor(@b)) { ... }

除了上述条件表达式以外，Less还提供了and、not等逻辑表达式。基础用法如：

.mixin (@b) when not (@b > 0) {
       background-color:blue;
 }

为什么需要CSS预处理器？

由于CSS只是一个标记语言，不是编程语言，因此不可以自定义变量，不可以引用等等。

• 语法不够强大，比如无法嵌套书写，导致模块化开发中需要书写很多重复的选择器；

• 没有变量和合理的样式复用机制，使得逻辑上相关的属性值必须以字面量的形式重复输出，导致难以维护。

• 这就导致了我们在工作中无端增加了许多工作量。而使用CSS预处理器，提供CSS缺失的样式层复用机制、减少冗余代码，提高样式代码的可维护性。大大提高了开发效率。

• CSS的好处在于简便、随时随地被使用和调试。预编译CSS步骤的加入，让我们开发工作流中多了一个环节，调试也变得麻烦。更大的问题在于，预编译很容易造成后代选择器的滥用。

「总而言之，这些CSS预处理器最终得到的还是CSS文件，所以他们的目的就是一个，提高开发效率。」

Sass和Less的区别

• 编译环境

Sass是在服务端处理的，以前是Ruby，现在是Dart-Sass或Node-Sass，而Less是需要引入less.js来处理Less代码输出CSS到浏览器，也可以在开发服务器将Less语法编译成css文件，输出CSS文件到生产包目录，有npm less, Less.app、SimpleLess、CodeKit.app这样的工具，也有在线编译地址。

• 定义变量

Less使用@，而Scss使用$。

• 输出设置

Less没有输出设置，Sass提供4中输出选项：nested, compact, compressed 和 expanded。

输出样式的风格可以有四种选择，默认为nested

输出样式的风格可以有四种选择，默认为nested

nested：嵌套缩进的css代码

expanded：展开的多行css代码

compact：简洁格式的css代码

compressed：压缩后的css代码

• Sass支持条件语句，sass可以使用if{}else{},for{}循环等等。而Less不支持

Less虽然不能使用if{}else{},for{}，但它可以使用函数来实现这一功能

• 引用外部CSS文件

Sass@import引用的外部文件如果不想编译时多生成同名的.css文件，命名必须以_开头, 文件名如果以下划线_开头的话，Sass会认为该文件是一个引用文件，不会将其编译为同名css文件.

Less引用外部文件和css中的@import没什么差异。

• Sass和Less的工具库不同

Sass有工具库Compass, 简单说，Sass和Compass的关系有点像Javascript和jQuery的关系,Compass是Sass的工具库。在它的基础上，封装了一系列有用的模块和模板，补充强化了Sass的功能。

LESS有Preboot.less，LESS Mixins，LESS Elements，gs和Frameless。LESS的软件支持比Sass更加分散，导致许多不同的扩展选项可能不会以相同的方式运行。对于项目，我们可能需要所有列出的扩展以获得与Compass类似的性能。

这篇好文章是转载于：学新通技术网