SASS

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

原文地址:https://www.cnblogs.com/zlf1914/p/12818320.html