当前位置:首页>CSS>Sass>Sass教程

Sass教程

作者:微学网发布时间:2019-08-10 17:28:40

Sass产生的背景

任何研究过CSS的人都知道,它是一种编程语言。

您可以使用它来开发Web样式,但不能使用它来编程。也就是说,CSS基本上是设计师的东西,而不是前端工程师的的工具。

在前端工程师看来,CSS是一件很麻烦的事情。它没有变量,没有条件语句,只有一行纯粹的描述,写起来相当费劲。

当然,有些人因为这种情况开始为CSS加入编程的能力,这被称为CSS预处理器。它的基本思想是用一种特殊的编程语言设计网页样式,然后将其编译成正常的CSS文件。

Sass官网网站https://sass-lang.com

sass教程

什么是CSS预处理器

Sass是CSS的一个开发工具,它提供了许多方便的编写方法。

它节省了设计人员的时间,使CSS的开发变得简单和可维护。

CSS 预处理器定义了一种新的语言,其基本思想是,用一种专门的编程语言,为 CSS 增加了一些编程的特性,将 CSS 作为目标生成文件,然后开发者就只要使用这种语言进行编码工作。

通俗的说,CSS 预处理器用一种专门的编程语言,进行 Web 页面样式设计,然后再编译成正常的 CSS 文件,以供项目使用。

CSS 预处理器为 CSS 增加一些编程的特性,无需考虑浏览器的兼容性问题,例如你可以在 CSS 中使用变量简单的逻辑程序函数(如下面代码编辑器中就使用了变量$color)等等在编程语言中的一些基本特性,可以让你的 CSS 更加简洁适应性更强可读性更佳,更易于代码的维护等诸多好处。

$color: red;

.test {
    color: $color;
}

什么是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 普及的原因

为什么要学习Sass教程

当我第一次开始学习Sass(大约5年前或6年前)时,我对此持怀疑态度,但随着我建立越来越多的响应式网站,我开始意识到我可以通过从Sass函数和mixins中获得可重用的逻辑来节省多少时间。

很明显,随着设备、视区和主题使用变量的改变,实现更新变得更容易处理。

我使用Sass的东西包括:布局、变量、排版

Sass的特点

兼容CSS

Sass完全兼容所有版本的CSS。我们对此严格把控,所以你可以无缝地使用任何可用的CSS库。

特性丰富

Sass拥有比其他任何CSS扩展语言更多的功能和特性。Sass核心团队不懈努力,一直使其保持领先地位。

成熟

Sass已经经过其核心团队超过8年以上的精心打造。

行业认可

一次又一次地,行业把Sass作为首选CSS扩展语言。

社区庞大

数百家科技企业和成百上千名开发者为Sass提供支持。

框架

有无数的框架使用Sass构建。比如CompassBourbon,和Susy

其它 CSS 预处理器语言

  • Sass(SCSS)

  • LESS

  • Stylus

  • Turbine

  • Swithch CSS

  • CSS Cacheer

  • DT CSS

Sass 和 SCSS 有什么区别?

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

  • 文件扩展名不同,Sass 是以“.sass”后缀为扩展名,而 SCSS 是以“.scss”后缀为扩展名

  • 语法书写方式不同,Sass 是以严格的缩进式语法规则来书写,不带大括号({})和分号(;),而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

来看一个示例:
绿条-Sass 语法

$font-stack: Helvetica, sans-serif  //定义变量
$primary-color: #333 //定义变量

body
  font: 100% $font-stack
  color: $primary-color

SCSS 语法

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

编译出来的 CSS

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}