搞定Sass只须要15分钟

1、安装及编译

sass基于Ruby语言开发而成，所以安装sass前须要安装Ruby,安装过程直接下一步到底。打开cmd安装sass和compass

gem install sass
gem install compass
复制代码

编译单个文件和整个文件夹的命令以下[ ]为可选--watch为监听文件变化--style为编译模式有nested|compact|compressed|expanded四个选项，默认为nested。

/单文件编译命令。把 input.scss编译成output.css
sass input.scss:output.css [--watch] [--style nested|compact|compressed|expanded]
/编译整个文件夹：sass文件夹下的scss文件会编译到css文件夹下相同文件名的css文件
sass  sass:css [--watch] ...
复制代码

须要注意的是在编译的过程当中文件须要使用绝对路径。以编译整个目录为例四种编译模式的结果以下：
1.nested
sass C:\Users\panx\Desktop\project\sass-demo\sass:C:\Users\panx\Desktop\project\sass-demo\css --watch --style nested

2.compact

3.compressed

4.expanded

2、语法

2.1 变量定义及使用

变量必须以$开头，定义一个变量及使用以下所示

2.2 嵌套及调用父选择器

嵌套可让咱们少些一些代码，调用父选择器用&符号，&表明上层全部选择器的组合

属性嵌套

2.3 mixin混入

mixin和js中的mixin有点相似，在sass中用mixin定义一个基本的样式快，而后在须要使用的地方用@include name引入，如下是语法及使用，参数必须以$开头

语法
@mixin name (参数1，参数2...){
    
}
复制代码

2.4 @extend继承

继承的样式会以群组选择器的形式显示出来

2.5 @import与partials 导入与分区

这个功能用来导入其余sass文件，在sass中如下划线开头的文件是不会被编译的，以下图所示我在Sass文件夹下新建了一个_base.scss不会编译到css/_base.css.用@import指令导入的时候不须要下划线和扩展名

2.5 数据类型及运算

在cmd中输入sass -i 进入用户交互界面用type-of来检测数据类型，咱们能够看到在sass中的数据类型有number(宽高等，可包含单位),string,color,list（border,margin,padding的非缩写）等，

2.5.1 数字类型

数字类型支持加减乘除，可带单位，但两个数字都带单位相乘结果会比较诡异（以下图），两个带单位的数字相除单位会抵消，两个数相除要加括号以下所示：

数字还支持一些函数如abs,round,ceil,floor,percentage,min,max等

2.5.2 字符串类型

咱们看一下sass中字符串函数，下图我定义了一个$greeting:'Hello'的变量

2.5.3 颜色函数

$base-color:#fff;
//调整颜色的色相，单位为度可省略
adjust-hue($base-color,137[deg])
//lighten/darken调整颜色的明度和黯度
.container{
    background-color:darken($base-color,30%);
    color:lighten($base-color,50%);
}
//saturate/desaturate增长或下降颜色的纯度及饱和度使用方式和darken/lighten一致
// opacify/transparentize增长或减小颜色的不透明度,即改变rgba中a的值，以下图所示
复制代码

2.5.4 列表函数

//求列表里面的长度
length(5px 10px) ==>2
length(5px 10px 0)==>3
//取列表里面的第几个数
nth(5px 10px,1)==>5px
nth(5px 10px,2)==>10px
//算列表里面某个项的索引
index(1px solid red,solid)==>2
//附加和链接
append(5px 10px,5px)==>5px 10px 5px
join(5px 10px,5px 0)==>(5px 10px 5px 0)

复制代码

2.5.4 map及其函数

//map语法
$map:(key1:val1,key2:val2...)
//实例
$colors:(light:#fff,dark:#000)
//map相关函数
length($colors)==>2
map-get($colors,dark)=>#000
map-keys($colors)==>('light','dark')
map-values($colors)==>(#fff,#000)
map-has-key($colors,light)==>true
//合并两个map
map-merge($colors,(gray:#bbb))==>(light:#fff,dark:#000,gray:#bbb)
//移除项目
map-remove($colors,dark,gray)==>(light:#fff)

复制代码

3、指令

3.1 插值interpolation

这个功能颇有用，跟es6的模板字符串相似，只是sass里面用的是#{}.具体如图

3.2 控制指令

sass中的控制指令都有@开头，有@if,@for,@each,@while

3.2.1 @if语法及用法

@if 条件{
    
}

复制代码

3.2.2 @for语法及用法

//to不包含结束值，through包含结束值
@for $var from <开始值> through/to <结束值>{
    
}
复制代码

3.2.3 @each语法及用法

//@each语法用来循环一个列表
    @each $var in $list{
        
    }
复制代码

3.2.4 @while语法及用法

@while 条件{
    
}
复制代码

3.2.5 @function语法及用法

@function name (参数1，参数2){
    
}
复制代码

3.2.6 @warn @error警告与错误

$colors:(light:#fff,dark:#000);
@function get-color($key){
  @if not map-has-key($colors, $key){
    @warn '在$colors里面没有找到#{ $key}这个key';
   // @error '在$colors里面没有找到#{ $key}这个key';
  }
  @return map-get($colors,$key );
}

body {
  background-color: get-color(dark);
}
复制代码