sass使用记录

前言

sass是一款css预处理程序，它能提供一些css本身不具备的特性，比如：变量,嵌套，mixins，继承等。

安装、更新、卸载

1. sass依赖于ruby，所以要先安装ruby。下载地址
2. ruby安装成功后（记得配好环境变量），执行
   gem install sass
3. double-check。执行
   sass -v
   如果返回
   Sass 3.4.21 (Selective Steve)
   表明sass已经安装成功。
4. 更新：当有新的sass版本时，执行
   gem update sas
   即可更新。
5. 卸载：执行
   gem uninstall sass

编译

命令行编译

命令格式

sass src:dest
1. 编译单个文件
sass --watch a.scss:/home/b.css
1. 编译整个文件夹里的所有scss文件
sass --watch /home/sass/:/home/
常用参数

注意：–watch参数表示如果文件有变化，则会自动编译一次。避免每次都手动执行。

常用参数

–watch 监视文件变化，编译文件
–update 监视文件变化，更新css文件
–style params params可以取以下值：

nested：嵌套缩进的css代码 （具有嵌套关系的元素样式 以缩进的方式显示）。该选项是默认的
expanded：展开的多行css代码（跟平时写css样式差不多）
compact：简洁格式的css代码（每个元素在一行）
compressed：压缩后的css代码（去掉空格、分行等，压缩在一起）

使用

变量

变量声明方式：$width:30px
在元素、mixin之外声明的变量为全局变量，在其它地方声明的变量为局部变量。
------------------------------------------------------------------
a.scss
--------------------------------
$global:30px;
body {
  $local:40px;
}

嵌套

//scss style
//------------嵌套-------------------
body {
    nav {

    }
}
注意嵌套层次不要太高，否则生成的css 缩进太多，不好理解。

mixin（混合宏）

//scss style
//---------mixin 的声明---------------------------
<b>混合宏声明使用关键字@mixin</b>
//不带参数的mixin
@mixin border-radius(){

}

//带参数的mixin
@mixin border-radius($para:20px){
    border-radius:$para;
}
//------------------------------------------------
//------mixin 的调用,使用关键字@include------------
@include border-radius(3px);
//-------------------------------------------------
//--------------传多个参数--------------------------------
声明：
@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);
}
//-------------------------------------------------------------
//------------当需要的参数过多时，可以使用...---------------------

@mixin box-shadow($shadows...){
  @if length($shadows) >= 1 {
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
  } @else {
    $shadows: 0 0 2px rgba(#000,.25);
    -webkit-box-shadow: $shadow;
    box-shadow: $shadow;
  }

继承

/**关键字**/
sass 继承使用@extend关键字
/*******************************示例********************/
.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(占位符)结合使用的效果
//SCSS
%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;
}

注意事项

1. scss文件编码格式不支持gbk，所以编写时注意将编码格式设置为utf-8。
2. scss文件所在路径中文支持不够友好，建议路径全为英文，否则容易出现编译错误。
3. @mixin，@extend，%placeholder的关系css
*使用混合宏（@mixin），生成的css代码，会在调用的地方产生多个样式。
*使用继承（@extend）,生成css代码时，会根据样式，将具有相同样式的元素以组合选择器的形式放在一起，看起来更整洁。
*使用占位符（%placeholder）,生成css代码时，跟使用@extend有相同的效果。不同的是，使用%placeholder时，不会在css中生成占位符的选择器。更简洁了，不是吗？