完全干死Sass只需要15分钟

一、安装及编译

sass基于Ruby语言开发而成，因此安装sass前需要安装Ruby,安装过程直接下一步到底。安装sass和compass

gem install sass
gem install compass
复制代码

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

/单文件转换命令
sass input.scss:output.css [--watch] [--style nested|compact|compressed|expanded]
/整个目录：sass文件夹下的scss文件按相应的文件名会编译到css文件夹下
sass  sass:css [--watch] ...
复制代码

需要注意的是在编译的过程中文件需要使用绝对路径四种编译模式的结果如下：
1.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.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
joi(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($colore,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.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);
}
复制代码

转载于:https://juejin.im/post/5cea4125e51d45772a49aca3