什么是sass?

1.Sass 官网上是这样描述 Sass 的&＃xff1a;

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


2. Sass 前世今生&＃xff1a;

Sass 是最早的 CSS 预处理语言&＃xff0c;有比 LESS 更为强大的功能&＃xff0c;不过其一开始的缩进式语法&＃xff08;Sass 老版本语法&＃xff0c;后面课程会详细介绍 &＃xff09;并不能被大众接受&＃xff0c;不过由于其强大的功能和 Ruby on Rails 的大力推动&＃xff0c;还是有很多开发者选择了 Sass。Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言&＃xff0c;它诞生于2007年&＃xff0c;是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML&＃xff08;一种缩进式 HTML 预编译器&＃xff09;而设计的&＃xff0c;因此有着和 HTML 一样的缩进式风格。为什么早期不如 LESS 普及&＃xff1f;虽然缩进式风格可以有效缩减代码量&＃xff0c;强制规范编码风格&＃xff0c;但它一方面并不为大多数程序接受&＃xff0c;另一方面无法兼容已有的 CSS 代码。这也是 Sass 虽然出现得最早&＃xff0c;但远不如 LESS 普及的原因。


3.Sass 和 SCSS 有什么区别&＃xff1f;

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


Sass 语法

$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量bodyfont: 100% $font-stackcolor: $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;
}


4. Sass 和 CSS 写法有差别&＃xff1a;

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

Sass写法&＃xff1a;

bodycolor: #fffbackground: #f36


而在 CSS 我们是这样书写&＃xff1a;

body{color:#fff;background:#f36;
}


4.2 SCSS 和 CSS 写法无差别&＃xff1a;

SCSS 和 CSS 写法无差别&＃xff0c;这也是 Sass 后来越来越受大众喜欢原因之一。 简单点说&＃xff0c;把你现有的“.css”文件直接修改成“.scss”即可使用。

sass 安装

mac下安装

第一步&＃xff1a;安装Ruby

不确定是否安装,可以使用下面命令查看

ruby -v


window下可以采用RubyInstaller 来安装 Ruby 环境&＃xff0c;这是它的网址&＃xff1a;&＃xff08;选择版本根据它给的提示 操作就可以&＃xff09;

https://rubyinstaller.org/downloads/


第二步&＃xff1a;安装sass

sudo gem install sass


window下安装

gem install sass


如果被网络强掉&＃xff0c;就在sass官网把它下载到本地&＃xff0c;拖到install后面&＃xff0c;即下面如视&＃xff1a;

sudo gem insatll /a/b/c/sass-3.4.13-gem(本地下载路径)


确认是否安装成功

sass -v


更新

sudo gem update sass


window下更新

gem install sass


卸载

sudo gem uninstall sass


window下卸载

gem uninstall sass


sass编译

命令编译是指使用你电脑中的命令终端&＃xff0c;通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入&＃xff1a;

单文件编译&＃xff1a;

sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css


这是对一个单文件进行编译&＃xff0c;如果想对整个项目所有 Sass 文件编译成 CSS 文件&＃xff0c;可以这样操作&＃xff1a;

多文件编译&＃xff1a;

sass sass/:css/-------目前我得编译是有问题的&＃xff0c;还没解决&＃xff0c;如果已经解决的小可爱可以告诉我呀


上面的命令表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件&＃xff0c;并且将这些 CSS 文件都放在项目中“css”文件夹中。

缺点及解决方法&＃xff1a;

在实际编译过程中&＃xff0c;你会发现上面的命令&＃xff0c;只能一次性编译。每次个性保存“.scss”文件之后&＃xff0c;都得重新执行一次这样的命令。如此操作太麻烦&＃xff0c;其实还有一种方法&＃xff0c;就是在编译 Sass 时&＃xff0c;开启“watch”功能&＃xff0c;这样只要你的代码进行任保修改&＃xff0c;都能自动监测到代码的变化&＃xff0c;并且给你直接编译出来&＃xff1a;

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css


Sass 语法格式

这里说的 Sass 语法是 Sass 的最初语法格式&＃xff0c;他是通过 tab 键控制缩进的一种语法规则&＃xff0c;而且这种缩进要求非常严格。另外其不带有任何的分号和大括号。常常把这种格式称为 Sass 老版本&＃xff0c;其文件名以“.sass”为扩展名。 来看一个 Sass 语法格式的简单示例。假设我们有一段这样的 CSS 代码&＃xff1a;

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


现在用 Sass 的语法格式来编写&＃xff1a;

$font-stack: Helvetica, sans-serif
$primary-color: #333bodyfont: 100% $font-stackcolor: $primary-color


在整个 Sass 代码中&＃xff0c;我们没看到类似 CSS 中的大括号和分号。 注&＃xff1a;这种语法格式对于前端人员都不太容易接受&＃xff0c;而且容易出错。

二、SCSS语法格式

SCSS 是 Sass 的新语法格式&＃xff0c;从外形上来判断他和 CSS 长得几乎是一模一样&＃xff0c;代码都包裹在一对大括号里&＃xff0c;并且末尾结束处都有一个分号。其文件名格式常常以“.scss”为扩展名。

同样的这段 CSS 代码&＃xff1a;

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


我们使用 SCSS 语法格式将按下面这样来书写&＃xff1a;

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


这样的语法格式对于从事前端工作的同学来说更易于接受&＃xff0c;这也是 SCSS 为什么更被前端人员青眯的原因。

不管是 Sass 的语法格式还是 SCSS 的语法格式&＃xff0c;他们的功能都是一样的&＃xff0c;不同的是其书写格式和文件扩展名不同&＃xff0c;来看一个简单的对比图&＃xff1a;

正因为如此&＃xff0c;有不少同学使用Sass新的语法规则&＃xff0c;而文件扩展名依旧使用的是“.sass”&＃xff0c;这也就造成血案了&＃xff0c; 编译时说编译不出来。在此特别提醒新同学&＃xff1a;“.sass”只能使用 Sass 老语法规则&＃xff08;缩进规则&＃xff09;&＃xff0c;“.scss” 使用的是 Sass 的新语法规则&＃xff0c;也就是 SCSS 语法规则&＃xff08;类似 CSS 语法格式&＃xff09;。

---------------------------------------以上文章内容参考自慕课网sass初级篇&＃xff0c;如有错误&＃xff0c;请指正