Sass (Syntactically Awesome StyleSheets)
Sass是对css的扩展,让 CSS 语言更强大、优雅。 它允许你使用变量、嵌套规则、 mixins、导入等众多功能, 并且完全兼容 CSS 语法。 Sass 有助于保持大型样式表结构良好, 同时也让你能够快速开始小型项目, 特别是在搭配 Compass 样式库一同使用时。
特色
- 完全兼容 CSS3
- 在 CSS 语言基础上添加了扩展功能,比如变量、嵌套 (nesting)、混合 (mixin)
- 对颜色和其它值进行操作的{Sass::Script::Functions 函数}
- 函数库控制指令之类的高级功能
- 良好的格式,可对输出格式进行定制
- 支持 Firebug
使用Sass
1、Sass有两种扩展名
(1) .sass
是一种sass新语法,跟css语法差别比较大,很难使用,跟stylus很像。
(2) .scss
跟css语法很像,比较简单,是最流行的一套语法。
2、安装ruby
使用Sass需要先安装ruby,查看是否安装成功:ruby -v
ruby安装成功,会提供一个gem
指令,跟 node 中的 npm 一样,是一个包管理工具,用gem -v
查看:
然后安装Sass:gem install sass
查看是否安装成功:sass -v
3、配置中文注释
Sass默认不支持中文注释,所以我们要配置它
打开 D:\Ruby24-x64\lib\ruby\gems\2.4.0\gems\sass-3.5.6\lib\sass 目录,编辑engine.rb 文件,在 55 行,添加如下这行代码:
Encoding.default_external = Encoding.find('utf-8')
4、编译Sass
浏览器不认识sass,需要编译,有如下两种编译方式:
(1)、命令行编译:
编译结果:
sass sass文件 css文件
:将sass的编译结果,输出到css文件中
编译结果:
sass sass文件 css文件 配置
:-c
避免输出缓存
--sourcemap=none
:避免输出 sourcemap 文件
备注: 命令行编译可以快速的把sass文件编译成css文件,但是编译多个文件时成本较高,不适合投入生产。
(2)、工程化编译 —— gulp编译
首先将 gulp
及 gulp 的 sass 插件(gulp-ruby-sass
)本地化:
在项目目录新建一个 node_modules 文件夹 —— 在命令提示符输入命令 npm link gulp
获取 gulp —— 继续输入命令 npm link gulp-ruby-sass
获取插件。
注意:
sass这个插件有一个功能,可以用来获取文件,所以我们在使用它的时候,就不用再使用src方法获取文件了。参数就是文件的地址,返回值是文档流对象,可以使用 pipe
方法。
gulp编译实例:
新建一个HTML文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>gulp 编译</title>
<link rel="stylesheet" type="text/css" href="dist/test.css" />
</head>
<body>
<div> <h1>sass文件</h1> </div>
</body>
</html>
新建 test.scss文件:
div{
h1{
color: gold;
background: skyblue;
}
}
新建 gulpfile.js 文件:
//引入模块
var gulp = require('gulp');
var rubySass = require('gulp-ruby-sass');
//创建编译任务
gulp.task('sass',function(){
//编译sass
//rubySass可以获取文件
rubySass('test.scss')
//编译输出到dest/test.css
.pipe(gulp.dest('dist'))
})
//启动任务
gulp.task('default',['sass'])
使用命令 gulp
运行:
运行后项目目录结构:
运行结果: