SASS 简易学习

 

基础

 

1

变量 $

通过使用$符号命名和使用

 变量分为 普通变量，默认变量（！deffault），特殊变量（#{$变量}）可作为属性名使用

 

2嵌套属性

将属性名称拆开形成嵌套分开写入，比如：

Border：{ left:’’;right:’’} 等价于 border-left:’’;border-right:’’;

 

3混合模块  @mixin

定义：混合模块就是为了方便代码的重复写入；

 @mixin center{  padding:0;margin:0 auto;} 

Div{ @include center};

技巧：可以使用类函数的形式构造mixin

比如 @mixin position($left,$right){ margin-left:$left;margin-right:$right  };// 定义

Div{ @include position（20px,10px）}  // 使用

 

使用方式

申明 ： @mixin 混合模块名 （参数：默认值）{ 代码块 }

使用： @include 混合模块名（传参）

 

4继承 （继承样式）@extend

继承模块 %

%center{

//专门用作继承使用，不会被编译成模块，只能用于继承属性使用；

}

 

5使用

       _veriables 专门存放 常用易变的基础变量

       _mixin专门存放 混合模块的scss文件

       _placeholder抓门存放 继承模块的scss文件

       建立自己的文件，通过@import “” 引入，引入上方文件需要去掉下划线，比如

(Ps:下划线文件不会被编译成css文件；)

@import “veriables”; @import “mixin”; @import “placeholder”;

 

6 sass开发结构

使用不同的小模块包装scss不同部分（变量，混合，继承） 再在主要的样式表中，通过@import引入这些部分

_veriables 专门存放 常用易变的基础变量

       _mixin专门存放 混合模块的scss文件

       _placeholder抓门存放 继承模块的scss文件

7.可以使用封装好的函数 ，具体查看官网；