关于SASS:
SASS 是一种 CSS 开发工具,让 CSS 的处理实现了可编程处理。
CSS 不是一个编程语言,可以用它来开发网页样式,但是没有办法用它进行编程。SASS 的出现,让 CSS 实现了通过代码编程来实现的方式。
SASS 扩展了 CSS3,增加了规则、变量、混入、选择器、继承等等特性,可以生成风格良好的 CSS 样式表文件,易于组织和维护。
一、SASS安装:
SASS 是 Ruby 语言开发的一个用于动态编程 CSS 文件的框架,但是学习 SASS 跟 Ruby 没有任何关系,唯一的联系就是 SASS 的运行以来 Ruby 环境,因此要在使用SASS前,必须安装 Ruby!
从Ruby 官网下载RubyInstallers地址是:http://rubyinstaller.org/downloads/
根据操作系统,选择相应的安装包,在此选择Ruby 2.2.2 (x64)
SASS 官网:http://sass-lang.com/
windows 安装:
1、安装 ruby ( sass 的依赖环境,必须安装)。
2、通过命令提示符黑窗口执行命令进行安装:
gem install sass
查看安装是否成功:
gem -v (查看Ruby 的安装完成版本号)
sass -v (查看SASS 的安装完成版本号)
一、SASS使用:
1、创建SASS文件:
(手动创建)
手动创建的SASS文件(当前文件)和css文件(目标文件)所属文件夹在同一目录下,了解即可,不推荐使用
一般,需要在项目文件夹(项目名称自己起,最好不要是中文)的根目录下手动创建SASS文件,例如:common.scss
同时,在项目文件夹的根目录下手动创建css文件夹,例如:css
2、建立链接关系:
在命令行中,执行如下命令进行编辑:
sass [scss_name] : <targetCss_name>
sass scss 文件 : 编译好的目标 css 全路径名称
例如: sass common.scss : csss/common.css
编译结果:在指定的文件夹 css 中生成了指定的 css 样式表文件:common.css
(自动创建)
自动编译命令:
watch 命令:
sass --watch sass:css
使用这个命令前必须在项目文件夹中(根目录下),预先创建好sass子文件夹,即当前文件所属文件夹与目标文件所属文件夹,在同一目录下(相对路径的第三种),并在根目录下打开命令提示符输入以上命令。
2、编译输出格式:
默认情况下,SASS 提供了四种格式的 CSS 输入,默认情况输出是嵌套格式
格式 描述
nested 嵌套— 不常用
compact 紧凑— 常用
修改输出样式: sass --watch sass:css --style compact
expanded 扩展— 常用 规范的 CSS 代码格式
修改输出样式: sass --watch sass:css --style expanded
compressed 压缩— 常用 用于在线项目的小文件
修改输出样式: sass --watch sass:css --style compressed