Sass简介&安装&编译&语法

迷南。 2023-02-22 10:53 17阅读 0赞

### 一、sass简介 ###

CSS作为层叠样式表，是一种静态语言。CSS不是一个编程语言，我们可以用它来开发网页样式，但是没有办法用它进行编程。但SASS的出现，让CSS实现了通过代码编程来实现的方式。

SASS是一种CSS开发工具，提供了许多便利的写法，让CSS的处理实现了可编程处理。

SASS扩展了CSS3，增加了规则、变量、混入、选择器、继承等等特性，可以生成风格良好的CSS样式表文件，易于组织和维护。

### 二、sass安装 ###

官方文章：[sass中文网安装][sass]

查看版本信息，下图说明安装成功：  
![在这里插入图片描述][20200703094738272.png]

**安装流程：**

1、安装`Ruby`。sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby，安装过程中请注意勾选 Add Ruby executables to your PATH 添加到系统环境变量。（注:mac下自带Ruby无需在安装Ruby!）

2、终端测试安装是否成功：`ruby -v`

3、如上已经安装成功。但因为国内网络的问题导致gem源间歇性中断，因此我们需要更换gem源，更换成国内服务器上的。

//1.删除并替换原gem源
    gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
    
    //2.打印是否替换成功，该命令可以查看gem源
    gem sources -l
    结果打印：https://gems.ruby-china.com      （ 确保只有 gems.ruby-china.com ）

4、安装sass：`gem install sass` 接着执行 `gem install compass`  
安装完成之后，通过运行下面的命令来确认应用已经正确地安装到了电脑中（例如）：

sass -v
    结果打印：Sass 3.x.x (Selective Steve)
    
    compass -v
    结果打印：Compass 1.x.x (Polaris)

5、sass更新、查看版本、sass命令帮助：

//更新sass
    gem update sass
    
    //查看sass版本
    sass -v
    
    //查看sass帮助
    sass -h

注意：Compass是Sass的工具库（toolkit）。

Sass本身只是一个编译器，Compass在它的基础上，封装了一系列有用的模块和模板，补充Sass的功能

参考文档：[sass-compass之一][sass-compass]

### 三、sass编译 ###

参考文档：[SASS用法指南 阮一峰][SASS_]

官方文档：[编译sass sass中文网][sass]

sass编译有很多种方式，如命令行编译模式、sublime插件SASS-Build、编译软件koala、前端自动化软件codekit、Grunt打造前端自动化工作流grunt-sass、Gulp打造前端自动化工作流gulp-ruby-sass等。

SASS文件的后缀名有两种方式，.sass要求更严谨规范的语法不需要分号和大括号，而.scss可以有分号和大括号使用起来更简便。

所以我们一般使用`.scss`文件。

**1、命令行编译：**

//在屏幕上显示.scss文件转化的css代码（假设文件名为output）
    sass test.scss
    
    //单文件转换命令
    sass input.scss output.css
    
    //单文件监听命令（一旦源文件有变动，就自动生成编译后的版本）
    sass --watch input.scss:output.css
    
    //如果你有很多的sass文件的目录，你也可以告诉sass监听整个目录：
    sass --watch app/sass:public/stylesheets

**2、SASS提供四个编译风格的选项：**（四种编译排版演示链接上方官方文档）

*  nested：      嵌套缩进的css代码，它是默认值。
 *  expanded： 没有缩进的、扩展的css代码。
 *  compact：   简洁格式的css代码。
 *  compressed：压缩后的css代码。

生产环境当中，一般使用最后一个选项：`sass --style compressed test.sass test.css`  
　　  
选择编译格式并添加调试map：  
`sass --watch input.scss:output.css --style compressed --sourcemap`

> –style表示解析后的css是什么排版格式；  
> –sourcemap表示开启sourcemap调试。开启sourcemap调试后，会生成一个后缀名为.css.map文件。  
> 另外还有一个 --debug-info，开启debug信息，不常用。

**3、其他编译方式：** 软件编译，比如koala&codekit、Live Sass编译器（VSCode扩展）  
有篇文章：[Visual Studio Code插件Live Sass Compiler可将Sass或Scss实时编译为CSS][Visual Studio Code_Live Sass Compiler_Sass_Scss_CSS]

### 四、语法 ###

官方文档1：[Sass中文网 快速入门][Sass_]  
官方文档2：[Sass中文网 中文文档][Sass_ 1]

简单使用：[阮一峰的网络日志][SASS_]

另附语：  
`@charset "utf-8"`  //sass文件里，想要写中文必须加字符集 “utf-8” 声明，不然会报错。  
sass文件中，变量的赋值只是单纯的文本替换，跟css中的属性值的写法基本一样。

[sass]: https://www.sass.hk/install/
[20200703094738272.png]: https://img-blog.csdnimg.cn/20200703094738272.png
[sass-compass]: https://blog.csdn.net/u013285765/article/details/89679078
[SASS_]: http://www.ruanyifeng.com/blog/2012/06/sass.html
[Visual Studio Code_Live Sass Compiler_Sass_Scss_CSS]: https://www.sass.hk/skill/sass154.html
[Sass_]: https://www.sass.hk/guide/
[Sass_ 1]: https://www.sass.hk/docs/