sass语法

1.基础语法

(1).注释

//注释
/*
  1.单行注释
    + //开头,后面书写注释
    + 会在编译的时候被忽略掉
    + 开发注释

  2.多行注释
    + /**/
    + 在两个星号之间书写注释
    + 会在编译的时候被保留下来
    + 但是将来打包的时候,会被忽略掉

  3.强力注释
    + /*!  注释内容 */
    + 在注释的开始写一个 感叹号(!)
    + 会在编译的时候保留下来
    + 将来打包的时候也会保留
*/

(2).变量

// 1.定义变量
$color:red;
$dir:left;
$dir2:right;
$type:box;


// 2.使用变量
h1{
  color: $color;
}

// 3.在样式名或者选择器上面使用 
h2{
  margin-#{$dir2}: 10px;
}

##{box}{
  color: blue;
}

(3).if分支语句

$className:price;

// 1.if语句
h3{
  @if $className == 'price'{
    color: red;
  }
}

h4{
  @if $className == 'price'{
    color: red;
  } @else {
    color: skyblue;
  }
}

(4).sass循环

// css是从1开始数的
$list:(red,green,blue,purple,pink);

/* 
  1.for循环的第一种
  语法: @for 变量 from 开始数字 to 结束数字{}
    => 注意:包含开始数字,不包含结束数字
    => 在循环内部可以使用任何一种形式来使用变量

  注意: 你想用数组里面的第几个
    => 不能直接像JS一样使用数组名称[索引]
*/
@for $i from 1 to 5 {
  li:nth-child(#{ $i }){
    color: red;
    background-color: nth($list,$i);
  }
}



/* 
  2.for循环的第二种
    + 语法:@for 变量 from 开始数字 through 结束数字
    + 根据数字来进行循环执行,包含开始数字,也包含结束数字
*/
// 包含开始也包含结束
@for $j  from 1 to 3 {
  ul>li:nth-child(#{$j}){
    color: blue;
  }
}



/* 
  3.each 循环
    + 使用 each 语法循环数组
    + 语法: @each 变量(数组里面的每一个) in 数组 {内容}
    + 会根据数组里面有多少个成员执行多少次
      => index() 函数
      => index(数组,每一项)
      => 返回对应这一项的索引

    +大部分使用循环做
      => 背景图片的设置
      => 背景图定位
*/
@each $value,$index in $list {
  $i:index($list,$value);
  li:nth-child(#{$i}){
    color: $value;
  }
}

2.嵌套语法

(1).基本嵌套

/* 
  1.基本嵌套
    + 选择集的基本嵌套
    + 规则:在一个选择集李曼直接书写后代选择器
*/
.header{
  width: 100px;
  height: 200px;

  p{
    font-size: 12px;
  }

  i{
    color: red;
  }

  buttom{
    border: none;
  }
}

(2).子代嵌套

/* 
  2.子代嵌套
    + 直接在你需要子代嵌套的位置
    + 书写子代选择器的 > 就可以了
*/
.body{
  height: 100px;
  width: 100px;

  > p{
    font-size: 16px;
  }

  > div{
    width: 50px;
    height: 50px;

    > button{
      background-color: skyblue;
    }
  }
}

(3).连接符选择器嵌套

/* 
  3.连接符选择器嵌套
    + sass 在选择器里面提供了一个符号叫做 &
    + 表示当前选择集的选择器
    + 连接符一般用来连接伪类和伪元素
*/
div{
  color: red;

  &:hover{
    color: skyblue;
  }
}

(4).群组选择器嵌套

/* 
  4.群组选择器嵌套
    + 一个嵌套多个
      => 在一个基础选择器里面嵌套一个群组选择器
    + 多个嵌套一个
    + 多个嵌套多个

*/

//一个嵌套多个
div {
  width: 100px;
  height: 100px;

  .box1,>.box2,div .box3{
    font-size: 20px;
  }
}

//多个嵌套一个
.box1,.box2,.box3{
  height: 100px;

  p{
    color: red;
  }
}


//多个嵌套多个
.box1,.box2{
  color: red;
  .item1,.item2{
    font-size: 20px;
  }
}

(5).属性嵌套

/* 
  5.属性嵌套
    + 和选择器没有什么关系
    + 和属性名有关系
      => 前提:属性名中带有中划线(-)才可以嵌套
      => 例子:
        1. background-color
        2. margin-left
        3. border-left-color
        4. ....

    5-1. 基本属性嵌套
    + 属性名:{
        嵌套内容:值;
      }

    5-2. 带有值的嵌套
    + 属性名:值{
        嵌套内容:值;
      }

    5-3. 多属性嵌套
      + 前提: 需要包含两个以上的中划线
      + 属性名:{
        嵌套内容:{
          嵌套内容:值;
        }
      }
*/

// 5-1. 基本属性嵌套
div{
  margin: {
    left: 10px;
    right: 20px
  };
}


// 5-2. 带有值得嵌套
h1{
  margin:10px{
    right: 0px;
  }
}

// 5.3-多属性嵌套
h2{
  border: {
    top: {
      color: red;
      width: 5px
    };
    left: {
      color: blue;
      style: solid;      
    };
  }
}

3.sass混合器语法

(1).基本定义一个混合器

// 1.基本定义一个混合器
//   将来你使用这一段混合器的时候
//   就是在使用 {} 内部的代码
@mixin trans  {
  -webkit-transition: all 1s 0s linear ;
  -moz-transition: all 1s 0s linear;
  -o-transition: all 1s 0s linear;
  transition: all 1s 0s linear;
}

@mixin box {
  width: 100px;
  height: 100px;
  color: #bfa;
}

h1{
  width: 100px;
  @include trans;
  @include box
}

h2{
  @include trans
}

(2).定义一个带有参数的混合器

/* 
  2.定义一个带有参数的混合器

  语法:@mixin trans(变量1,变量2,....){
    使用的时候,直接使用变量
  }

  使用这个混合器
    + 在你需要使用这个混合器的位置
    + 书写: @include trans(参数1,参数2,...)
    + 注意:必须每一个参数都书写

*/
// 2.定义一个带有参数的混合器
@mixin trans($time) {
  -webkit-transition: all $time 0s linear ;
  -moz-transition: all $time 0s linear;
  -o-transition: all $time 0s linear;
  transition: all 1s $time linear;
}

h1{
  @include trans(1s)
}

(3).带有参数默认值的混合器

/* 
  3.带有参数默认值的混合器
    + 你传递了参数使用你传递的,你没有传递使用默认值
    + JS: function fn(a=100,b=200){}

  定义混合器的语法:
    @mixin trans($time:1s,$beginTime:2s){

    }

  使用的时候
    1.按照顺序传递参数,不传递的使用默认值
    2.使用的时候,单独指定给哪一个形参赋值
      => @include trans($time:2s)
      => 只给 $time 这个变量赋值
      => 其他没有赋值的按照默认值进行设置
*/

@mixin trans($time:1s,$beginTime:2s) {
  -webkit-transition: all $time $beginTime linear ;
  -moz-transition: all $time $beginTime linear;
  -o-transition: all $time $beginTime linear;
  transition: all $time $beginTime linear;
}

h1{
  @include trans(1s)
}

// 给指定某一个形参赋值
h2{
  @include trans($beginTime:2s)
}

4.继承语法

(1).直接继承全部

/* 
  1.直接继承全部
    + 独有的单独修改

*/
.box1{
  width: 100px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  color: red;
}

.box2{
  // 继承 .box1
  @extend .box1;
  color: skyblue;
}

5.导入语法

// 1.导入变量文件
@import './mixin.scss';

// 直接使用文件里的变量
h1{
  color: $c1;
}