学习Sass笔记之概念篇

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了学习Sass笔记之概念篇相关的知识,希望对你有一定的参考价值。

 1 什么是CSS预处理器

首先我们了解一下什么是CSS预处理器:通俗的说,“CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题”,例如你可以在 CSS 中使用变量、简单的逻辑程序、函数(如右侧代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁、适应性更强、可读性更佳,更易于代码的维护等诸多好处。

2 什么是Sass

官网是这么描述的

Sass 是一门高于 CSS 的元语言,它能用来清晰地、结构化地描述文件样式,有着比普通 CSS 更加强大的功能。
Sass 能够提供更简洁、更优雅的语法,同时提供多种功能来创建可维护和管理的样式表。

Sass 前世今生:

Sass 是最早的 CSS 预处理语言,有比 LESS 更为强大的功能,不过其一开始的缩进式语法(Sass 老版本语法,后面课程会详细介绍 )并不能被大众接受,不过由于其强大的功能和 Ruby on Rails 的大力推动,还是有很多开发者选择了 Sass。

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言,它诞生于2007年,是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML(一种缩进式 html 预编译器)而设计的,因此有着和 HTML 一样的缩进式风格。

为什么早期不如 LESS 普及?

虽然缩进式风格可以有效缩减代码量,强制规范编码风格,但它一方面并不为大多数程序接受,另一方面无法兼容已有的 CSS 代码。这也是 Sass 虽然出现得最早,但远不如 LESS 普及的原因。

 

3 Sass 和 SCSS 有什么区别?(没耐心的可以直接看结尾)

Sass 和 SCSS 其实是同一种东西,我们平时都称之为 Sass,两者之间不同之处有以下两点:

  1. 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名
  2. 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

直接看个例子

技术分享

4 Sass/Scss跟CSS书写方式差得多吗?

Sass 和 CSS 写法的确存在一定的差异,由于 Sass 是基于 Ruby 写出来,所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号,其主要是依靠严格的缩进方式来控制的。如:

技术分享

怎么理解最后一句话?

因为SCSS是属于SASS里的内容,是其之后为了方便大众而写的拓展语法,也可以叫语法糖。所以SCSS的出现,才让SASS重新收到关注。

本质上SASS和SCSS都是SASS,就像javasript5.0和es6都是javascript一样 es6之前没有class extend,虽然5.0版本也能实现功能但是很繁琐

同理SCSS就是SASS的新语法,更易于前端开发人员理解的方式书写

 

以上是关于学习Sass笔记之概念篇的主要内容,如果未能解决你的问题,请参考以下文章

Sass学习笔记

计算机基础学习笔记:操作系统篇之硬件结构,CPU Cache基础概念

Sass学习笔记

性能测试之操作系统篇

Camera学习笔记:基础概念之YUV

Camera学习笔记:基础概念之YUV