sass的基本语法

a.变量

使用 $ 定义变量名称同时使用 : 冒号赋值数据

// 使用 $ 符号定义变量
$c:blue;
// 使用变量时也要有 $符号
div{
    color:$c;
}

转化为css

div {
  color: blue;
}

/*# sourceMappingURL=01_%E5%8F%98%E9%87%8F.css.map */

b.if判断

关键词,要是用 @符号声明

判断条件没有 ()

$int:4;
// if判断
div{
    @if $int == 1 {
        color:red;
    }
}

// if...else
p{
    @if $int == 1 {
        color:red;
    }@else{
        color: blue;
    } 
}

// if..else if...else
h1{
    @if $int == 1 {
        color:red;
    }@else if $int == 2 {
        color: blue;
    }@else if $int == 3 {
        color: pink;
    }@else if $int == 4 {
        color: yellow;
    }@else{
        color: green;
    } 
}

转化为css

p {
  color: blue;
}

h1 {
  color: yellow;
}

/*# sourceMappingURL=02_if%E5%88%A4%E6%96%AD.css.map */

c.for循环

for循环语句有两种语法形式

@for 变量 from 数值1 to 数值2 --- 不包括数值2

@for $i from 1 to 5{
    div{
        width: $i*100px;
        height: $i*100px;
    }
}

转化为css

div {
  width: 100px;
  height: 100px;
}

div {
  width: 200px;
  height: 200px;
}

div {
  width: 300px;
  height: 300px;
}

div {
  width: 400px;
  height: 400px;
}

@for 变量 from 数值1 through 数值2 --- 包括数值2

@for $i from 1 through 5{
    p{
        width: $i*100px;
        height: $i*100px;
    }
}

转化为css

p {
  width: 100px;
  height: 100px;
}

p {
  width: 200px;
  height: 200px;
}

p {
  width: 300px;
  height: 300px;
}

p {
  width: 400px;
  height: 400px;
}

p {
  width: 500px;
  height: 500px;
}

c.each循环

定义数组

$变量:(索引数值),(索引数值),(索引数值),(索引数值),(索引数值);

each语句

@each $变量1 .$变量2 in $数组变量

$变量1:存储索引

$变量2:存储数值

css中索引是个数顺序,是从 1 开始

在css语法的()中使用变量需要使用 #{} 包裹变量( #{$变量} )

// 定义数组
$arr:(1 red),(2 blue),(3 pink),(4 yellow),(5 green);

// each 循环
@each $k , $v in $arr{
    li:nth-child(#{$k}){
        color: $v;
    }
}

转化为css

li:nth-child(1) {
  color: red;
}

li:nth-child(2) {
  color: blue;
}

li:nth-child(3) {
  color: pink;
}

li:nth-child(4) {
  color: yellow;
}

li:nth-child(5) {
  color: green;
}

e.结构嵌套

当前标签{ >父子选择器{} 后代选择器{} +相邻兄弟{} ~一般兄弟{} &:伪类选择器{} }

div{
    width: 100px;
    height: 100px;

    >span{
        color: red;
    }

    p{
        color: blue;
    }

    +h1{
        background: pink;
    }

    ~a{
        color: skyblue;
    }

    &:hover{
        background: red;
    }
}

转化为css

div {
  width: 100px;
  height: 100px;
}
div > span {
  color: red;
}
div p {
  color: blue;
}
div + h1 {
  background: pink;
}
div ~ a {
  color: skyblue;
}
div:hover {
  background: red;
}

f.属性嵌套

只能对带有 -减号方向的属性来定义

整体的margin都是 100px 只有 top 是 10px

注意 : {} 必须要写在 100px 和分号之间

div{
    margin: 100px{
        top:10px;
    };

    border:1px solid red{
        left: 10px solid black;
    };
}

转化为css

div {
  margin: 100px;
  margin-top: 10px;
  border: 1px solid red;
  border-left: 10px solid black;
}

g.选择器的继承

将写好的选择器的属性导入到其他选择器中使用

@extend 你要导入的选择器

执行结果是群组选择器形式添加样式

p{
    width: 100px;
    height: 100px;
    background: red;
}

div{
    @extend p;
    color: pink;
    font-size: 100px;
}

转化为css

p, div {
  width: 100px;
  height: 100px;
  background: red;
}

div {
  color: pink;
  font-size: 100px;
}

h.外部sass文件夹的加载

@import '外部文件的路径';

@import './*.scss';

i.函数效果

类似于函数的效果,可以设定参数

语法1: 没有参数的

// 定义
@mixin m1{
    transition: all 2s;
}
// 导入使用
div{
    @include m1;
}

转化为css

div {
  transition: all 2s;
}

语法2: 有参数的

// 定义
@mixin m2( $type , $time ){
    transition: $type $time;
}
// 导入使用
p{
    @include m2( width  , 10s );
}

转化为css

p {
  transition: width 10s;
}

语法3: 有参数的默认值

// 定义
@mixin m3( $type:all , $time:2s ){
    transition: $type $time;
}
// 导入使用
span{
    @include m3();
}
span{
    @include m3(height);
}

转化为css

span {
  transition: all 2s;
}
span {
  transition: height 2s;
}

sass的基本语法