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取消对文件或者目录的监听