scss

1.变量

$curColor: green

.userCard {

    background:$curColor;

}

2.混合(可以添加参数:  参数名:值  即可)

@mixin large-text {

     font:{

       family:Arial;

       size:20xp;

       weight:bold;   

     }

}

.page-title {

    @include large-text;

}

3.选择器

a {

   colorL:blue;

  &:hover {

         text-decoration:underline;

     }

}

4.数值可以直接写运算符

5.循环

$class-name: col- ;

#for $i  from 1 through 24

{

     #{$class-name}#{$i} {

        width: ($i/24) * 100%;

    }

}