小黑子——css的升级Sass入土过程

Sass系列

1. 初识Sass

世界上最成熟、最稳定、最强大的专业级CSS扩展语言!
sass是一个CSS的预编译.I其
也就是能够更优雅的书写css
sass写出来的东西浏览器不认识
依旧是要转换成Css在浏览器中运行

Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(😉，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似

1.1 sass 和 scss 的区别（细分）

SASS（Syntactically Awesome Style Sheets）是一种由 Hampton Catlin 设计、Chris Eppstein 和 Natalie Weizenbaum 开发的样式表语言。 它是一种预处理器脚本语言，将被编译或解释为 CSS。 Sass Script 本身就是一种脚本语言。 它的 typing 规则是动态的。

SCSS 通常被称为 Sassy CSS，它是作为 SASS（Syntactically Awesome Style Sheets）的主要语法引入的，它建立在现有的 CSS 语法之上。 它使用分号和括号，如 CSS（级联样式表）。 SCSS 是 CSS 的超集，即所有 CSS 功能都将在 SCSS 中可用，并且包含 SASS（Syntactically Awesome Style Sheets）的一些功能。 SCSS 使任何 CSS 术语都有效。

1. SASS 更易于使用且语法更简单，因此无需使用分号、曲线、大括号等，而 SCSS 与 CSS 完全兼容，文件扩展名为 .scss 类型。
2. SASS 具有最好的编码标准和良好的官方文档的特点，而 SCSS 更容易学习开发代码。
3. SASS 基于 javascript 并支持不同的语言扩展，拥有自己的语法、开源 CSS 预处理器和高级功能，例如控制和指令及其库。
4. SASS 更难通过重写代码与现有 CSS 项目集成，而 SCSS 通过采样添加新代码而不是重写现有代码库更容易与现有代码库集成。
5. SASS 更易于使用、阅读和编写，而 SCSS 在实现代码方面更具逻辑性和复杂性。
6. SASS 变量将以美元 ($) 符号开头，而 SCSS 具有模块化功能，可以通过使用某种注释以更加模块化的方式组织代码。
7. SASS 具有高级语法功能，并且其文件具有 .sass 扩展名，而 SCSS 具有类似每个有效 CSS 文件都是 SCSS 文件的功能。
8. SASS 具有可在 CSS 文件的不同位置使用的局部和全局变量，而 SCSS具有不同的变量，例如颜色变量，这些变量可以稍后在样式表中使用。
9. SASS 具有嵌套功能，可以将 CSS 选择器嵌套显示在 HTML 中，并且难以维护较长的分层嵌套 CSS，而 SCSS
   可以处理多个类和不同的嵌套样式。
10. SASS 具有文档样式，它比 CSS 更好，并且具有颜色、属性和参数列表的操作功能，而 SCSS语法具有边距、列表样式、填充、显示等。
11. SASS 具有控制指令、功能指令、Mixins 并具有可扩展的特性，而 SCSS 可以与 SASS 一起使用来表示 CSS类似的特性。

SASS 与 SCSS 都是 CSS 预处理器，它们非常有用，可包含在基于 CSS 的 UI（用户界面）或前端框架中以简化开发。 这些
SASS 与 SCSS 框架在以编程方式利用强大的 CSS 功能时在高级别的 CSS 功能方面提供了强大的功能。

SASS 是一种 CSS 扩展，其中大部分功能都将被扩展，而 SCSS 是 CSS 的一种超集，其中 CSS 的所有功能都将在 SCSS 中。 预处理器的选择取决于通过以有效的方式做出权衡选择来使应用程序高效工作所需的功能和特性。

与SCSS相比，SASS更易于使用并且需要更少的语法或配置，推荐用于需要更快开发范围和更容易开发复杂组件的较大应用程序的情况，而SCSS可以用于优化Mixin特性的情况，以及许多其他有效技术。

1.2 Sass和Less的比较

Less 是一门 CSS 预处理语言，它扩展了 CSS 语言，增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less 可以运行在 Node 或浏览器端。一个合法的CSS代码段本身也是一段合法的LESS代码段。 LESS
提供了变量、嵌套、混合、操作符、函数等一般编程所需的抽象机制。

不同之处:

1. Less环境较Sass简单
   Cass的安装需要安装Ruby环境，Less基于JavaScript，是需要引入Less.js来处理代码输出css到浏览器，也可以在开发环节使用Less，然后编译成css文件，直接放在项目中，有less.app、SimpleLess、CodeKit.app这样的工具，也有在线编辑地址。

2. Less使用较Sass简单 LESS 并没有裁剪 CSS 原有的特性，而是在现有 CSS 语法的基础上，为 CSS
   加入程序式语言的特性。只要你了解 CSS 基础就可以很容易上手。

3. 从功能出发，Sass较Less略强大一些 ①sass有变量和作用域。

   KaTeX parse error: Expected 'EOF', got '#' at position 20: …able，like php； #̲｛variable｝like ruby； 变量有全局和局部之分，并且有优先级。 ②sass有函数的概念；

   @function和@return以及函数参数（还有不定参）可以让你像js开发那样封装你想要的逻辑。
   -@mixin类似function但缺少像function的编程逻辑，更多的是提高css代码段的复用性和模块化，这个用的人也是最多的。
   -ruby提供了非常丰富的内置原生api。 ③进程控制：
   -条件：@if @else；
   -循环遍历：@for @each @while
   -继承：@extend
   -引用：@import

   ④数据结构：
   -l i s t 类 型 = 数 组 ； − list类型=数组； -list类型=数组；−map类型=object； 其余的也有string、number、function等类型

4. Less与Sass处理机制不一样 前者是通过客户端处理的，后者是通过服务端处理，相比较之下前者解析会比后者慢一点

5. 关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$。

相同之处:
Less和Sass在语法上有些共性，比如下面这些：

1、混入(Mixins)——class中的class；
2、参数混入——可以传递参数的class，就像函数一样；
3、嵌套规则——Class中嵌套class，从而减少重复的代码；
4、运算——CSS中用上数学；
5、颜色功能——可以编辑颜色；
6、名字空间(namespace)——分组样式，从而可以被调用；
7、作用域——局部修改样式；
8、JavaScript赋值——在CSS中使用JavaScript表达式赋值。

简单来说：

1.关于变量在Less和Sass中的唯一区别就是Less用@，Sass用$
2.处理机制不同，less是在客户端处理，sass是在服务端处理，相比较之下前者解析会比后者慢一点
3.运行环境不同，sass是要基于Ruby环境，less是基于JavaScript

1.3 Sass和Stylus的比较

Stylus 是一个CSS的预处理框架，2010年产生，来自Node.js社区，主要用来给Node项目进行CSS预处理支持，所以 Stylus 是一种新型语言，可以创建健壮的、动态的、富有表现力的CSS。比较年轻，其本质上做的事情与 SASS/LESS 等类似，应该是有很多借鉴，所以近似脚本的方式去写CSS代码。

Stylus默认使用 .styl 的作为文件扩展名，支持多样性的CSS语法。

区别：
stylus对变量是没有任何设定的，可以是以$开头，或者任何的字符，而且与变量之间可以用冒号，空格隔开，但是在stylus中不能用@开头

maincolor = #092873
siteWidth = 1024px
borderStyle = dotted
body
  color maincolor
  border 1px borderStyle mainColor
  max-width siteWidth

以上三种写法都如同一下这种css：

body {
  color: #092873;
  border: 1px dotted #092873;
  max-width: 1024px;
}

2. Sass 的语法

2.1 变量

sass 能用变量是它的一大优点。

变量使用

1.{}作用块外定义 都可以使用包括嵌套的

2.规则{}里面外面就不可用，跟jvascript作用域差不多

3.作用在属性名中，需要在#{}里面

4.可以在变量声明中使用变量

5.一般情况下命名 _ 和-可以相等

2.2 数据类型

在 Sass 中包含以下几种数据类型：

1. 数字: 如，1、 2、 13、 10px；
2. 字符串：有引号字符串或无引号字符串，如，“foo”、‘bar’、baz；
3. 布尔型：如，true、 false；
4. 空值：如，null；
5. 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。
6. 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)；

2.3 @if

@if 指令是一个 SassScript，它可以根据条件来处理样式块，如果if后面的条件为 true 返回一个样式块，反之 false 返回另一个样式块。在 Sass 中除了 @if 之，还可以配合 @else if 和 @else 一起使用。

2.4 @for 循环

2.

这两个的区别是关键字 through 表示包括 end 这个数，而 to 则不包括 end 这个数

2.5 @each 循环

@each 循环就是去遍历一个列表，然后从列表中取出对应的值。

2.6 @while 循环

@while 指令也需要 SassScript 表达式（像其他指令一样），并且会生成不同的样式块，直到表达式值为 false 时停止循环。

2.7 @mixin 和 @include

声明混合宏
在 Sass 中，使用“@mixin”来声明一个混合宏。

调用混合宏
匹配了一个关键词“@include”来调用声明好的混合宏。

混合宏在实际编码中给我们带来很多方便之处，特别是对于复用重复代码块。但其最大的不足之处是会生成冗余的代码块。比如在不同的地方调用一个相同的混合宏时，不能将两个合成并集形式。

3. Sass的嵌套

(1) 选择器嵌套

(2)属性嵌套

#scss
.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

#css
.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

(3)伪类嵌套 和 用&引用元素

4. Sass的继承@extend

@extend 指令告诉 Sass 一个选择器的样式从另一选择器继承。

如果一个样式与另外一个样式几乎相同，只有少量的区别，则使用 @extend 就显得很有用。

以下 Sass 实例中，我们创建了一个基本的按钮样式 .button-basic，接着我们定义了两个按钮样式 .button-report 与 .button-submit，它们都继承了 .button-basic ，它们主要区别在于背景颜色与字体颜色，其他的样式都是一样的。

使用 @extend 后，我们在 HTML 按钮标签中就不需要指定多个类 class=“button-basic button-report” ，只需要设置 class=“button-report” 类就好了。

@extend 很好的体现了代码的复用。

5. Sass的导入@include

@include 指令可以将引入到文档中。