Less/Sass预处理器

Less,Sass预处理器教程

1.0 CSS预处理器的介绍

CSS预处理器

1. 基于CSS的另一种语言
2. 通过工具编译成CSS
3. 添加了很多CSS不具备的特性
4. 能提升CSS文件的组织方式

CSS预处理器到底提供了哪些功能?

1. 嵌套 反映层级和约束
2. 变量和计算,减少重复代码
3. Extend和Mixin代码片段
4. 循环 适用于复杂有规律的样式
5. import CSS文件模块化

Nesting(嵌套)

less 嵌套

因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。

//可以自动生成css文件
F:\vscode面试\less学习>lessc 1-nest.less >1-nest.css

body{
    padding:0;
    margin:0;
}

.wrapper{
    background:white;

    .nav{
        font-size: 12px;
    }
    .content{
        font-size: 14px;
        &:hover{
            background:red;
        }
    }
}
=========================转换为css
body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: white;
}
.wrapper .nav {
  font-size: 12px;
}
.wrapper .container {
  font-size: 14px;
}
.wrapper .container:hover {
  background: red;
}

sass嵌套

两者的嵌套规则基本一样

• --style表示解析后的css是什么排版格式;sass内置有四种编译格式:nested``expanded``compact``compressed。--sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件

变量（Variables）

二者的差别原因,在于理念不同,less的理念是接近css语法,css中也会使用@符号

sass的理念在于,既然和css不是同一种语言,就尽量和css产生混淆

less变量

无需多说，看代码一目了然：

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

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

编译为：

#header {
  width: 10px;
  height: 20px;
}

sass变量

变量 $ (Variables: $)

SassScript 最普遍的用法就是变量，变量以美元符号开头，赋值方法与 CSS 属性的写法一样：

$width: 5em;

直接使用即调用变量：

#main {
  width: $width;
}

变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明：

#main {
  $width: 5em !global;
  width: $width;
}

#sidebar {
  width: $width;
}

编译为

#main {
  width: 5em;
}

#sidebar {
  width: 5em;
}

混合（Mixins）

当我们需要一段代码进行复用的时候,可以使用less中的混合

Mixins类似于编程语言中的函数。Mixins是一组css属性，可以将一个类的属性用于另一个类，并且包含类名作为其属性。在less中，可以使用类选择器或者id选择器以与css样式相同的方式声明mixin.mixin可以存储多个值，并且可以在必要的时候在代码中重复使用

less混合

混合（Mixin）是一种将一组属性从一个规则集包含（或混入）到另一个规则集的方法。假设我们定义了一个类（class）如下：

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

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

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

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

.bordered 类所包含的属性就将同时出现在 #menu a 和 .post a 中了。（注意，你也可以使用 #ids 作为 mixin 使用。）

sass混合

概念几乎和less一样,但是使用方法和less完全不同,定义sass混合指令需要用@mixin

定义混合指令 @mixin (Defining a Mixin: @mixin)

混合指令的用法是在 @mixin 后添加名称与样式，比如名为 large-text 的混合通过下面的代码定义：

@mixin large-text {
  font: {
    family: Arial;
    size: 20px;
    weight: bold;
  }
  color: #ff0000;
}

混合也需要包含选择器和属性，甚至可以用 & 引用父选择器：

@mixin clearfix {
  display: inline-block;
  &:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
  }
  * html & { height: 1px }
}

extend

Extend是一个Less伪类，通过:extend在一个选择器中扩展其他选择器样式，从而与匹配其引用的选择器合并。

less extend

mixins是直接把代码复制过来,extend是把选择器提取出来

@fontSize: 12px;
@bgColor: red;

.block{
    font-size: @fontSize;
    border: 1px solid #ccc;
    border-radius: 4px;
}

body{
    padding:0;
    margin:0;
}

.wrapper{
    background:lighten(@bgColor, 40%);

    .nav:extend(.block){
        color: #333;
    }
    .content{
        &:extend(.block);
        &:hover{
            background:red;
        }
    }
}

.block,
.wrapper .nav,
.wrapper .content {
  font-size: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
body {
  padding: 0;
  margin: 0;
}
.wrapper {
  background: #ffcccc;
}
.wrapper .nav {
  color: #333;
}
.wrapper .content:hover {
  background: red;
}

sass extend

@extend
在设计网页的时候常常遇到这种情况：一个元素使用的样式与另一个元素完全相同，但又添加了额外的样式。通常会在 HTML 中给元素定义两个 class，一个通用样式，一个特殊样式。假设现在要设计一个普通错误样式与一个严重错误样式，

@extend 的作用是将重复使用的样式 (.error) 延伸 (extend) 给需要包含这个样式的特殊样式（.seriousError），刚刚的例子：

loop

less loop

.gen-col(@n) when (@n > 0){
    .gen-col(@n - 1);
    // 生成一个class
    .col-@{n}{
        width: 1000px/12*@n;
    }
}

.gen-col(12);

sass loop

@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 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

编译为

.item-1 {
  width: 2em; }
.item-2 {
  width: 4em; }
.item-3 {
  width: 6em; }

@mixin gen-col($n){
    @if $n > 0 {
        @include gen-col($n - 1);
        .col-#{$n} {
            width: 1000px/12*$n;
        }
    } 
}
@include gen-col(12);

// sass是支持for循环的,
@for $i from 1 through 12{
    .col-#{$i} {
        width: 1000px/12*$i;
    } 

}

import模块化

预处理器的变量是可以跨文件使用的

less 模块化

导入（Importing）

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

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

sass模块化

CSS预处理器总结

1. 嵌套 反映层级和约束
2. 变量和计算 减少重复代码
3. Extend和Mixin代码片段
4. 循环 适用于复杂有规律的样式
5. import CSS文件模块化

CSS预处理器框架

css预处理器是我们可以按需使用别人的代码

• SASS - Compass
• Less - Lessshat / EST
• 提供现成的mixin
• 类似JS类库,封装常用功能

est

est 是一个基于 Less 的样式工具库，帮助您更轻松地书写 Less 代码。

est 提供了一系列方便快捷的 mixin，只在调用时才输出代码。est 不希望提供直接给 HTML 调用的类名，用「样式类」污染 HTML 代码的语义。当然您也可以根据自己的项目需求基于 est 搭建样式类库，提供类名接口来进行快速开发。

在est官网直接导入了est文件,使用的时候,遇到了一些问题

F:\vscode面试\less学习>lessc 7-est.less >7-est.css 
SyntaxError: Inline JavaScript is not enabled. Is it set in your options? in F:\vscode面试\less学习\est\variables.less on line 4, column 18:
3 @support-ie-version: 7;
4 @support-old-ie: ~`@{support-ie-version} < 8`; // [deprecated] use `@support-ie-version` instead
5 @use-autoprefixer: true;

我是直接将est/src文件夹下的less文件全部放到了项目里面

CSS面试真题

常见的CSS预处理器

1. Less(Node.js)
2. Sass(Ruby 有Node版本)

预处理器的作用

1. 帮助更好地组织css代码
2. 提高代码复用率
3. 提升可维护性

预处理器的能力

1. 嵌套 反映层级和约束
2. 变量和计算 减少重复代码
3. Extend和Mixins 代码片段
4. 循环 适用于复杂有规律的样式
5. import CSS模块化

预处理器的优缺点

• 优点: 提高代码复用率和可维护性
• 缺点: 需要引入编译过程 有学习成本