1、sass安装准备工作
官网下载地址：http://rubyinstaller.org/downloads
安装的时候 记住勾选 加入Path 环境变量中。
2、Ruby镜像 修改
打开终端：>输入命令
删除镜像：gem sources --removehttps://rubygems.org
添加镜像：gem sources -ahttps://ruby.taobao.org
列出镜像：gem sources -l
3、sass安装
打开终端：>输入命令
安装：gem install sass
mac 电脑 需要 加上 sudo [sudo gem install sass]
更新：gem update sass
卸载：gem uninstall sass
查看版本：sass -v
4、sass 编译 --> 3种编译方式：
命令编译
1、单文件编译
sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
2、多文件编译
sass sass/:css/
3、自动监听编译
sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css
GUI编译
1、编译工具推荐
Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)
自动化编译
1、Grunt 配置 Sass 编译的示例代码
module.exports = function(grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
sass: {
dist: {
files: {
'style/style.css' : 'sass/style.scss'
}
}
},
watch: {
css: {
files: '**/*.scss',
tasks: ['sass']
}
}
});
grunt.loadNpmTasks('grunt-contrib-sass');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.registerTask('default',['watch']);
}
想了解Grunt同学请单击这里学习《Grunt-beginner前端自动化工具》。
2、Gulp 配置 Sass 编译的示例代码
var gulp = require('gulp');
var sass = require('gulp-sass');
gulp.task('sass', function () {
gulp.src('./scss/*.scss')
.pipe(sass())
.pipe(gulp.dest('./css'));
});
gulp.task('watch', function() {
gulp.watch('scss/*.scss', ['sass']);
});
gulp.task('default', ['sass','watch']);
5、不同样式风格的输出方法
嵌套输出方式 nested
展开输出方式 expanded
紧凑输出方式 compact
压缩输出方式 compressed
使用方式
sass --watch test.scss:test.css --style nested
6、sass的调试
Sass 调试一直以来都是一件头痛的事情，使用 Sass 的同学都希望能在浏览器中直接调试 Sass 文件，能找到对应的行数。值得庆幸的是，现在实现并不是一件难事，只要你的浏览器支持“sourcemap”功能即可。早一点的版本，需要在编译的时候添加“--sourcemap” 参数。
sass --watch --scss --sourcemap style.scss:style.css
在 Sass3.3 版本之上（我测试使用的版本是 3.4.7），不需要添加这个参数也可以。
sass --watch style.scss:style.css
7、变量声明
普通变量 $width:100px;
默认变量 $baseLineHeight:1.5 !default; 只需在后面加上 !default
覆盖变量只需在默认变量之前重新声明一下即可，如：
$baseLineHeight:2;
$baseLineHeight:1.5 !default;
什么时候声明变量：
该值至少重复出现了两次；
该值至少可能会被更新一次；
该值所有的表现都与变量有关（非巧合）
8、sass的嵌套
选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，Sass 的嵌套分为三种：
选择器嵌套
属性嵌套
伪类嵌套
1、选择器嵌套
假设我们有一段这样的结构：
Home
About
Blog
想选中 header 中的 a 标签，在写 CSS 会这样写：
nav a {
color:red;
}
header nav a {
color:green;
}
那么在 Sass 中，就可以使用选择器的嵌套来实现：