Sass学习笔记之入门篇

Sass又名SCSS，是CSS预处理器之一，，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。以下是我的学习笔记。

Sass安装环境

1.安装sass(mac)

①：Ruby安装

②：安装sass

sudo gem install sass

可以通过 sass -v检测是否完成安装  

2.更新sass

gem update sass

3.卸载（删除）sass

gem uninstall sass

 Sass编译调试

我们现在一般采用scss语法格式。SCSS 是 Sass 的新语法格式，从外形上来判断他和 CSS 长得几乎是一模一样，代码都包裹在一对大括号里，并且末尾结束处都有一个分号。其文件名格式以“.scss”为扩展名。注意文件扩展名不能用.sass。

使用 Sass 进行开发,项目中还是引用“.css”文件.Sass 只不过是做为一个预处理工具，提前帮你做事情，只有你需要时候，它才有攻效。 Sass 开发之后，要让 Web 页面能调用 Sass 写好的东西，就得有一个编译过程。

编译方式

1.命令编译：命令编译是指使用你电脑中的命令终端，通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。

①单文件编译：(开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来：)

sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css  （style是文件的名字）

②多文件编译：（对整个项目所有 Sass 文件编译成 CSS 文件，并且将这些 CSS 文件都放在项目中“css”文件夹中）

sass --watch sass/:css/

2.GUI界面工具编译

• Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html)
• CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)

3.自动化编译

以下分别通过Grunt和Gulp来配置Sass的编译

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

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

编译错误：

在Sass的编译的过程中，是不是支持“GBK”编码的。所以在创建 Sass 文件时，就需要将文件编码设置为“utf-8”，在项目中文件命名或者文件目录命名不要使用中文字符。

不同样式风格的输出方法

1、嵌套输出方式 nested，在编译的时候带上参数“ --style nested”:

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

2、展开输出方式 expanded,在编译的时候带上参数“ --style expanded”:

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

3、紧凑输出方式 compact，在编译的时候带上参数“ --style compact”:

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

4.压缩输出方式 compressed，在编译的时候带上参数“ --style compressed”:

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

一段时间之后，你实际上就不再需要写 CSS 代码了，只用写 Sass 代码。在这种情况下，你只需要设定输出格式为压缩格式，知道输出的 CSS 代码可以直接使用即可。

Sass的调试

这张图表示的是，在chrome浏览器上改动相应的scss的样式，效果会实时同步出来，并且改动的代码会保存到本地。实现的方法可以看这个教程。

现在实现并不是一件难事，只要你的浏览器支持“sourcemap”功能即可。早一点的版本，需要在编译的时候添加“--sourcemap”  参数：

sass --watch --scss --sourcemap style.scss:style.css

在 Sass3.3 版本之上，不需要添加这个参数也可以：

sass --watch style.scss:style.css

Sass的基本特性-基础

变量

声明变量

定义之后可以在全局范围内使用。
$fontSize: 12px;
body{
    font-size:$fontSize;
}

编译后的css代码：
body{
    font-size:12px;
}

普通变量

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

编译后的css代码：
body{
    line-height:1.5;
}

默认变量（!default）

//SCSS
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}

全局变量与局部变量

嵌套

应该少用。

1、选择器嵌套

假设我们有一段这样的结构：
<header>
<nav>
    <a href=“##”>Home</a>
    <a href=“##”>About</a>
    <a href=“##”>Blog</a>
</nav>
<header>

想选中 header 中的 a 标签，在写 CSS 会这样写：
nav a {
  color:red;
}

header nav a {
  color:green;
}

那么在 Sass 中，就可以使用选择器的嵌套来实现：
nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }
}

选择器嵌套

2、属性嵌套

Sass 中还提供属性嵌套，CSS 有一些属性前缀相同，只是后缀不一样，比如：border-top/border-right，与这个类似的还有 margin、padding、font 等属性。假设你的样式中用到了：
.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

在 Sass 中我们可以这样写：
.box {
  border: {
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

属性嵌套

3、伪类嵌套：伪类嵌套和属性嵌套非常类似，只不过它需要借助`&`符号一起配合使用

我们就拿经典的“clearfix”为例吧：
.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;
}

伪类嵌套

混合宏

在 Sass 中，使用“@mixin”来声明一个混合宏

不带参数混合宏：
@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
大括号里面是复用的样式代码。

带参数混合宏：
@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

声明

使用“@include”来调用一个混合宏

@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

--------调用---------
button {
    @include border-radius;
}

这个时候编译出来的 CSS:

button {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

调用

混合宏的参数--传一个不带值的参数

在混合宏中，可以传一个不带任何值的参数，比如：
@mixin border-radius($radius){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}
在混合宏“border-radius”中定义了一个不带任何值的参数“$radius”。

在调用的时候可以给这个混合宏传一个参数值：
.box {
  @include border-radius(3px);
}

编译出来的 CSS:
.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

传一个不带值的参数

混合宏的参数--传一个带值的参数

在 Sass 的混合宏中，还可以给混合宏的参数传一个默认值，例如：
@mixin border-radius($radius:3px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
}

在调用类似这样的混合宏时，会多有一个机会，假设你的页面中的圆角很多地方都是“3px”的圆角，那么这个时候只需要调用默认的混合宏“border-radius”:
.btn {
  @include border-radius;
}

编译出来的 CSS:
.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

混合宏的参数--传多个参数

Sass 混合宏除了能传一个参数之外，还可以传多个参数，如：
@mixin center($width,$height){
  width: $width;
  height: $height;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -($height) / 2;
  margin-left: -($width) / 2;
}

.box-center {
  @include center(500px,300px);
}

编译出来 CSS:
.box-center {
  width: 500px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -250px;
}

传多个参数

扩展/继承

在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。

//SCSS
.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  color: #fff;
  @extend .btn;
}

编译出来之后：
//CSS
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  color: #fff;
}

.btn-second {
  background-clor: orange;
  color: #fff;
}

扩展/继承

占位符 %：通过 @extend 调用的占位符才会产生效果，编译出来的代码会将相同的代码合并在一起。

%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。
//SCSS
%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

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

.block {
  @extend %mt5;

  span {
    @extend %pt5;
  }
}
编译出来的CSS

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

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

从编译出来的 CSS 代码可以看出，通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。

混合宏 VS 继承 VS 占位符

他们各有各的优点与缺点，先来看看他们使用效果：

a) Sass 中的混合宏使用
@mixin mt($var){
  margin-top: $var;
}

.block {
  @include mt(5px);

  span {
    display:block;
    @include mt(5px);
  }
}

.header {
  color: orange;
  @include mt(5px);

  span{
    display:block;
    @include mt(5px);
  }
}

---编译出来的结果---
.block {
  margin-top: 5px; }
  .block span {
    display: block;
    margin-top: 5px; }

.header {
  color: orange;
  margin-top: 5px; }
  .header span {
    display: block;
    margin-top: 5px; }

总结：编译出来的 CSS 清晰告诉了大家，他不会自动合并相同的样式代码，如果在样式文件中调用同一个混合宏，会产生多个对应的样式代码，造成代码的冗余，这也是 CSSer 无法忍受的一件事情。不过他并不是一无事处，他可以传参数。

个人建议：如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。

混合宏(需要传参，用它)

.mt{
  margin-top: 5px;
}

.block {
  @extend .mt;

  span {
    display:block;
    @extend .mt;
  }
}

.header {
  color: orange;
  @extend .mt;

  span{
    display:block;
    @extend .mt;
  }
}

----编辑以后----
.mt, .block, .block span, .header, .header span {
  margin-top: 5px;
}

.block span {
  display: block;
}

.header {
  color: orange;
}
.header span {
  display: block;
}

总结：使用继承后，编译出来的 CSS 会将使用继承的代码块合并到一起，通过组合选择器的方式向大家展现，比如 .mt, .block, .block span, .header, .header span。这样编译出来的代码相对于混合宏来说要干净的多，也是 CSSer 期望看到。但是他不能传变量参数。

个人建议：如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。

继承（没有参数，而且有一个基类已在文件中存在，用它）

%mt{
  margin-top: 5px;
}

.block {
  @extend %mt;

  span {
    display:block;
    @extend %mt;
  }
}

.header {
  color: orange;
  @extend %mt;

  span{
    display:block;
    @extend %mt;
  }
}

-----编译以后-------
.block, .block span, .header, .header span {
  margin-top: 5px;
}

.block span {
  display: block;
}

.header {
  color: orange;
}
.header span {
  display: block;
}

总结：编译出来的 CSS 代码和使用继承基本上是相同，只是不会在代码中生成占位符 mt 的选择器。那么占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中。”

占位符（和继承没有大的区别，只是占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码）

注释

1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ”
2、类似 JavaScript 的注释方式，使用“//”

两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示，来看一个示例：

//定义一个占位符

%mt5 {
  margin-top: 5px;
}

/*调用一个占位符*/

.box {
  @extend %mt5;
}
编译出来的CSS

.box {
  margin-top: 5px;
}

/*调用一个占位符*/

注释

Sass的基本特性-运算

加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。如：

.box {
  width: 20px + 8in;
}

编译出来的 CSS:
.box {
  width: 788px;
}
但对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示：

.box {
  width: 20px + 1em;
}
编译的时候，编译器会报错：“Incompatible units: 'em' and ‘px'.”

总结：in mm cm  pt pc px等绝对单位都能运算；
ex em rem等相对当前字体的都不能运算
能换算的都会换算成px像素长度
不能换算的都会报编译错误
有个例外就是不加单位的话就相当于0

加法

Sass 的减法运算和加法运算类似，我们通过一个简单的示例来做阐述：
$full-width: 960px;
$sidebar-width: 200px;

.content {
  width: $full-width -  $sidebar-width;
}
编译出来的 CSS 如下：

.content {
  width: 760px;
}

减法

Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题。比如下面的示例：

.box {
  width:10px * 2px;
}
编译的时候报“20px*px isn't a valid CSS value.”错误信息。

如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。上面的示例可以修改成：

.box {
  width: 10px * 2;
}
编译出来的 CSS:

.box {
  width: 20px;
}

乘法

”/  ”符号被当作除法运算符时有以下几种情况：
•    如果数值或它的任意部分是存储在一个变量中或是函数的返回值。
•    如果数值被圆括号包围。
•    如果数值是另一个数学表达式的一部分。

如下所示：

//SCSS
p {
  font: 10px/8px;             // 纯 CSS，不是除法运算
  $width: 1000px;
  width: $width/2;            // 使用了变量，是除法运算
  width: round(1.5)/2;        // 使用了函数，是除法运算
  height: (500px/2);          // 使用了圆括号，是除法运算
  margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算
}
编译出来的CSS

p {
  font: 10px/8px;
  width: 500px;
  height: 250px;
  margin-left: 9px;
 }

在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。如下所示：
.box {
  width: (1000px / 100px);
}
编译出来的CSS如下：

.box {
  width:;
}

除法