Sass入门篇

1、Sass简介

1.1、什么是CSS预处理器?

定义:

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

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

其它CSS预处理器语言:

CSS预处理器技术已经非常成熟,而且也涌现出很多种不同的CSS预处理器,如下:

  • Sass(SCSS)
  • Less
  • Stylus
  • Turbine
  • Switch CSS
  • CSS Cacheer
  • DT CSS

到目前为止,在众多优秀的CSS预处理器中,就属 Sass 、Less、Stylus最优秀。

1.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的原因。

1.3、Sass和SCSS有什么区别?

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

1、文件扩展名不同,Sass是以 .sass 后缀为扩展名,而 SCSS 是以 .scss 后缀为扩展名。

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

Sass语法:

/* 定义变量 */
$fontSize:30px;
.box 
  /* 使用变量 */
  font-size: $fontSize;

SCSS语法:

/* 定义变量 */
$fontSize:30px;
.box {
  /* 使用变量 */
  font-size: $fontSize;
}

两者最终编译出来的CSS如下:

1.4、Sass/SCSS 和纯CSS的写法有什么区别?

Sass和纯CSS的区别:

由于Sass是采用的Ruby语言写出来的,所以其延续了Ruby的书写规范。在书写Sass是不带有大括号和分号,其主要是依靠严格的缩进方式来控制的,如下:

Sass写法:

.box 
  font-size: 20px;

而在CSS中,写法如下:

.box {
  font-size: 20px;
}

SCSS和传CSS的区别:

SCSS写法:

.box {
font-size: 20px;
}

而在CSS中,写法如下:

.box {
font-size: 20px;
}

SCSS和CSS写法无差别,这也是Sass后来越来越受欢迎的原因之一。简单的说,把你现有的 .css文件直接修改为 .scss 既可使用

2、Sass安装环境

如果觉得文章有帮助到你,可以扫描以下二维码
   请本文作者 喝一杯
pay_weixin pay_weixin

发表评论

电子邮件地址不会被公开。 必填项已用*标注