sass学习总结

安装官网有好多种方式，而且针对不同操作系统平台进行了介绍。由于是练习，我在本地windows平台来学习sass.

npm install -g sass

然后就可以学习sass了，安装了node环境自带了npm包管理工具。
常用的用法

还有一个常用的参数，就是--watch，监视文件变化，自动编译。
可以通过sass --help进一步了解更多参数的使用。
不过使用HBuilder等IDE，直接在开发工具中安装sass编译插件，并配置保存时自动生成相应css文件，开发的时候还是需要讲究效率的。

另外一种安装ruby环境的，还是比较麻烦，当时也玩了以下。记录下
查看ruby版本

ruby -v

ruby的语法讲究缩进，而且不支持花括号和分号，所以后面更多的人使用scss。

单文件编译

sass 要编译的全路径:编译后的路径

批量编译一个目录下的所有sass文件到另外一个目录

sass hbk/:css/

表示将hbk目录下的所有.scss（.sass）文件编译成.css文件，并且放到css文件夹中。

自动化编译

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']);
}

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']);

编译之后的风格有如下四种

嵌套输出方式 nested
展开输出方式 expanded  
紧凑输出方式 compact 
压缩输出方式 compressed

如下的sass文件内容

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

经过编译命令

sass --watch test.scss:test.css --style nested

将转化为如下风格

nav ul {
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
  display: inline-block; }
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

如果使用expanded，则只是大括号会另外起一行。
compact则每一个样式独立一行。

变量的声明使用美元符

$btn-primary-color : #fff !default;

!default为默认值

默认变量的覆盖，只需在默认变量之前重新声明即可。

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译之后的css

body{
    line-height:2;
}

选择器嵌套

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}

编译之后的css

nav a {
  color:red;
}

header nav a {
  color:green;
}

属性嵌套

.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

编译之后的css

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

伪类嵌套

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}

编译之后的css

clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
  overflow: hidden;
}

混合宏，使用@mixin声明，使用@include调用
@extend继承基类样式

%placeholder占位符，只有被@extend调用才会生成css代码

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}

编译之后的css为

.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

sass中的高级语法

在这里不多介绍，工作当中也比较少用。推荐学习下compass，一个框架。