SASS

Posted 2021-02-20 zlf1914

SASS https://www.sass.hk/

css预编译框架

世界上最成熟、最稳定、最强大的专业级CSS扩展语言！

结构页面中依然要引入css,但css是依靠sass框架编译出来的。

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby。（注:mac下自带Ruby无需在安装Ruby!）

ruby提供了写命令窗口：start command prompt with ruby 类似于cmd

ruby软件的安装-安装ruby目的，安装sass编译环境。

注意选择√这步，配置环境变量，参考sass官网 https://www.sass.hk/install/

ruby下面自带的一个包管理工具--gem(安装了ruby就有这个gem)

包管理工具里面包含了很多和ruby相关的一些包。sass就是其中的一个包。

gem -v 一旦显示对应的版本信息，安装成功。

.gem install sass 通过gem安装sass包，但因为国外服务器问题，安装很难成功，采用提供的sass文件安装

sass编译css，编译后的css格式

nested 编译排版格式-默认

expanded 编译排版格式-正常css默认格式-使用频率较高

compact 编译排版格式，每个选择器占据一行，放不下在换行。

compressed 编译排版格式，压缩。所有的css压缩成一行，放不下换行。--使用频率较高

通过命令行将对应的sass文件转换成css文件。

sass文件扩展名有两种：.sass .scss

.scss:里面的代码格式和正常的css格式是一样的，文件里面也可以写正常的css代码。

.sass:里面的代码格式不能有{}，不能有分号，完全采用退格的方式进行排版。这个扩展名应用很少。

编译，将sass文件编译成css文件

编译格式-单个文件

sass --watch input.scss:output.css --style compact

sass:代表后面都是sass命令

--watch：监听sass文件，一旦sass文件改变，输出的也改变。

input.scss：编译的sass文件

output.css：输出的css文件。文件没有，自动创建。

--style compact：输出的css文件格式

编译格式-整个文件夹

sass --watch stylescss/.:css/. --style expanded

监听stylescss目录下面的所有的sass文件，编译成css目录下面对应的css文件，编译后的目录自定义的。

编译后的css文件夹没有，自动创建。

编译后的css有个.map文件：属于调式文件。

通过命令输入ctrl+c取消对文件或者目录的监听