Sass基本用法

一、概述

本质还是css，就是多了一些指令，让项目在维护的时候更方便。

二、开始

1. 变量

使用字符$来创建变量。

/*css用法*/
div {
    color: red;
}
p {
    color: red;
}

/*sass用法*/
$color: red;
div {
    color: $color;
}
p {
    color: $color;
}

2. css嵌套

/*css用法*/
nav ul li{
    color: red;
}

/*sass用法*/
nav{
    ul{
        li{
            color: red;
        }
    }
}

3. 复用

就像是函数一样，定义一个函数，在需要的地方调用它，如果是对于某个样式需要加浏览器前缀就很适合用。

使用关键字@mixin创建，使用关键字@include调用。

/*css用法*/
div {
  -webkit-box-shadow: 0px 0px 4px #fff;
  -moz-box-shadow: 0px 0px 4px #fff;
  -ms-box-shadow: 0px 0px 4px #fff;
  box-shadow: 0px 0px 4px #fff;
}

/*sass用法*/

/*定义*/
@mixin box-shadow($x, $y, $blur, $c){ 
  -webkit-box-shadow: $x $y $blur $c;
  -moz-box-shadow: $x $y $blur $c;
  -ms-box-shadow: $x $y $blur $c;
  box-shadow: $x $y $blur $c;
}

div {
  /*调用*/
  @include box-shadow(0px, 0px, 4px, #fff);
}

4. if语句

就是判断，不同的条件下显示不同的样式。使用关键字：@if、@else if、@else

/*css用法*/
div{
    background-color: red;
}

/*sass用法*/
@mixin set-color($val){
    @if $val == 1{
        background-color: red;
    }@else if $val == 2{
        background-color: blue;
    }@else{
        background-color: green;
    }
}

div{
    @include set-color(1);
}

5. for语句

循环。

两种语法：

• @for $i from 开始值 through 结束值
• @for $i from 开始值 to 结束值

区别就是through包括结束值，to不包括结束值。

/*css用法*/
.col-1 {
  width: 8.33333%;
}

.col-2 {
  width: 16.66667%;
}

...

.col-12 {
  width: 100%;
}

/*sass用法*/
@for $i from 1 through 12 {
  .col-#{$i} { width: 100%/12 * $i; }
}

注: #{$i}和js的模板字符串类似，即是将变量i和文本组合成字符串的语法。

6. each遍历

遍历。 语法: @each $i in 列表

/*css用法*/
.blue-text {
  color: blue;
}

.red-text {
  color: red;
}

.green-text {
  color: green;
}

/*sass用法*/
@each $color in blue, red, green {
  .#{$color}-text {color: $color;}
}

7. while循环

使用关键字: @while

/*css用法*/
.text-1{
    font-size: 15px;
}
.text-2{
    font-size: 30px;
}

...

.text-5{
    font-size: 75px;
}

/*sass用法*/
$x: 1;
@while $x <= 5 {
  .text-#{$x} {font-size: 15px * $x}
  $x: $x + 1;
}

8. partials——模块化

partials是一个包含css代码的文件，你可以在别的文件中引用它。partials一般以下划线_开头。

<!-- main.scss 文件：引入_variables.scss -->
@import variables

注: 引入的时候就不需要下划线了。

9. 扩展

类似于继承，比如你有一个div和一个p，其中p包含div所有的样式，并且它自己还有新的样式，那应该怎么做呢，就可以使用继承，关键字为: @extend

/*css用法*/
div{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}
p{
  background-color: red;
  height: 70px;
  border: 2px solid green;
  width: 150px;
  font-size: 2em;
}

/*sassy用法*/
div{
  background-color: red;
  height: 70px;
  border: 2px solid green;
}
p{
  @extend div;
  width: 150px;
  font-size: 2em;
}

来自: freecodecamp 可以去上面练习一下！