sass简介

一、了解sass

sass官网：https://www.sass.hk/

Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能，扩展名是 .sass。

Scss 是 Sass 3 引入新的语法，是Sassy CSS的简写，是CSS3语法的超集，也就是说所有有效的CSS3样式也同样适合于Sass，扩展名是 .scss。

Scss就是Sass的升级版，贴近于CSS的写法。

二、sass的变量

可以在sass中定义一个变量，一次定义多次使用

语法：$名称:值;

注意：1. 变量名就是 $名称；2. 值不需要加引号。

$color:red;
$width:300px;
$bor:1px solid #0f0;

div{
  background-color: $color;
  width: $width;
  height: $width;
  border: $bor;
}

三、sass的注释

// 表示单行注释，在编译的时候不进行编译。

/* */ 表示多行注释，在编译时会保留，在打包压缩时不会保留

/*！ */ 表示强力注释，在编译和打包压缩时都会保留

四、条件分支语句

if else语法：

@if 变量==值{样式} @else{样式}

if else if 语法：

@if 变量 == 值 {样式} @else if 变量 == 值 {样式} @else if 变量==值 {样式}

$state:c;
div{
  width: 200px;
  height: 200px;
  @if $state == a{
    background-color: red;
  }@else if $state == b{
    background-color: green;
  }@else{
    background-color: blue;
  }
}

五、循环语句

for循环语法

1 @for 变量 from 数字 to 数字 {代码}
== 包含开始数字，不包含结束数字
== 在循环里面使用变量
– 在选择器里面使用 #{变量名}
– 在样式里面使用 变量名
2 @for 变量 from 数字 through 数字 {代码}
== 包含开始数字，也包含结束数字

each 循环

== 依赖一个sass数组使用
== 写一个sass数组
– 语法：变量:(),(),(),…
== each的使用
– 语法：@each 变量1,变量2,… in 数组 {代码}

/* for 循环 */ 
// 这个循环的数字变化是1 2,不包含3
@for $i from 1 to 3 {
    li:nth-child(#{$i}){
        width:10px*$i;
    }
}
// 这个循环的数字变化是1 2 3
@for $i from 1 through 3 {
    li:nth-child(#{$i}){
        height:20px*$i;
    }
}

/* each循环 */ 
// 准备一个数组
// 每一个小括号都是数组里面的一项
$arr:(1,5px,red),(2,6px,green),(3,9px,skyblue);
// 写一个循环
@each $index,$fs,$color in $arr {
    li:nth-child(#{$index}){
        font-size: $fs;
        color:$color;
    }
}

六、sass的选择器嵌套

和html一样 让选择器也有一个上下级关系

1. 后代选择器嵌套
   语法：父级{ 子级{} }
2. 子代选择器嵌套
   语法：父级{ >子级{} }
3. 连字符选择器嵌套
   == 伪类选择器和伪元素选择器嵌套
   == 当你需要的伪类和伪元素和选择器连接在一起使用的使用
   == 使用&连接符操作
   == 语法：选择器{ &:hover{} }
4. 群组选择器的嵌套（使用太少）
   == 语法：群组选择器{子级{} }
   == 语法：选择器{群组选择器{} }
   == 语法：群组选择器{群组选择器{} }

七、sass 属性的嵌套

属性嵌套

• 前提：可以嵌套的属性才能使用
  == 就是属性中带有中划线的属性
  == border-left
  == background-color
  == background-image
  == padding-left
  == margin-left
  == font-size
• 语法: 以padding为例子
  padding：10px {
  left:5px;
  }

div{
    width: 100px;
    height: 100px;
    padding: 10px {
        left:5px;
    }
    margin: {
        left:4px;
        right:4px;
    }
}
p{
    border: 10px solid #333 {
        left:10px solid pink;
    }
}
p {
    border: 10px solid #333;
    border-left: 10px solid pink;
    font: {
        size:30px;
    }
}

八、sass的混入

sass的混入（混合器/函数）mixin

混合器，就是类似于js里面的函数

js的函数function 函数名(形参){}

• sass的混合器
  == 语法：@mixin 混合器名称{}
  == 语法：@mixin 混合器名称(形参){}
  == 语法：@mixin 混合器名称(形参默认值){}
• sass的混合器的使用
  == 语法：@include 混合器名称;
  == 语法：@include 混合器名称(实参);

/* 使用方式一 */ 
// 先准一个混合器
// 不使用的时候不会被编译的
@mixin transition{
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
}
div{
    width: 200px;
    // 使用我刚刚定义好的混合器
    @include transition;
}

/* 使用方式二 */ 
// 在定义混合器的时候设置几个参数
// 由你调用的时候传递的实参决定
@mixin transition($t,$p,$d,$tf){
    -webkit-transition:$p $t $d $tf;
    -moz-transition:$p $t $d $tf;
    -ms-transition:$p $t $d $tf;
    -o-transition:$p $t $d $tf;
    transition:$p $t $d $tf;
}
div{
    width: 200px;
    height: 200px;
    // 使用一个带有参数的混合器
    // 必须所有参数都传递，不传递就会报错
    @include transition(1s,all ,0s ,linear )
}

p{
    @include transition(2s,height ,1s ,linear )
}

/* 使用方式三 */
// 在定义混合器的时候可以传递一个参数默认值
// 你如果传递了实参，就用你传递的
// 如果你没有传递实参，那么就用默认值
@mixin transiton($t:1s,$p:all,$d:0s,$tf:linear){
    -webkit-transition:$p $t $d $tf;
    -moz-transition:$p $t $d $tf;
    -ms-transition:$p $t $d $tf;
    -o-transition:$p $t $d $tf;
    transition:$p $t $d $tf;
}
div{
    width: 100px;
    height: 100px;

    // 使用这个带有参数默认值的混合器
    @include transiton(2s);//只传递了第一个参数
}
h1{
    width: 100px;
    height: 100px;

    // 使用这个带有参数默认值的混合器
    @include transiton(3s, height);//传递两个参数，剩余的使用默认值
}

九、sass继承

sass里面的继承就是使用另一个规则集的样式

• 当你在写一个样式的时候
  == 你发现和之前写的一个规则集的样式一摸一样
  == 就把刚才的直接拿下来使用
• 语法
  == @extend 另一个选择器

div{
    width: 100px;
    height: 100px;
    padding:10px;
    margin:20px;
}
p{
    // 继承了div里面的所有样式
    @extend div;// 各个同学用的比较少
    padding:20px;
    border:10px solid #333;
}
.list{
    // 直接继承p标签
    @extend p;
    margin:10px;

}

十、sass导入

导入：就是把别的文件拿到我这里执行

• 平时开发的时候
  == 会写一个base.css的文件
  –> *{margin:0;padding:0;}
  –> 公共样式文件
  –> 这个公共样式文件每个html文件都会引入
  –> 在公共文件里面把我们所有需要的变量都定义好
  == 你再写一个文件的时候
  –> 只要导入这个base.scss文件就有了公共的样式和这些变量
• 导入的语法
  == 语法：@import “你要导入的文件的路径”;
• 还有一种使用方法
  == 专门定义一个variable.scss的文件
  – 这里专门就写所有的变量
  == 专门定义一个mixin.scss的文件
  – 这里专门写所有的混合器