导入scss

@import "../../sass/variables.scss";@import "../../sass/helper.scss";

 

@mixin

@mixin flex ($a, $b) {    display: flex;    justify-content: $a;    align-items: $b;}

使用：@include flex(flex-start, center);

 

@function

$base-font-size: 75px;@function pxToRem($px) {    @return  $px / $base-font-size * 1rem;}

使用： font-size: pxToRem(50px);

 

@if

@mixin position ($top, $right, $bottom, $left) {    position: absolute;    @if $top {          top: $top;     }    @if $right {         right: $right;    }    @if $bottom {        bottom: $bottom;    }    @if $left {        left: $left;    }}

@include position(false,false,30rpx, 30rpx);

 

@if or / and

@mixin flex ($x: false, $y: false, $direction: false) {
       display: flex;    @if $x {        @if $x == s or $x == start {            justify-content: flex-start;        } @else if $x == c or $x == center {
               justify-content: center;        } @else if $x == e or $x == end {
               justify-content: flex-end;        } @else if $x == a or $x == around {
               justify-content: space-around;        } @else if $x == b or $x == between {
               justify-content: space-between;        } @else {
                justify-content: $x;        }    }    @if $y {
           @if $y == s or $y == start {            align-items: flex-start;        } @else if $y == c or $y == center {
               align-items: center;        } @else if $y == e or $y == end {
               align-items: flex-end;        }  @else if  $y == stretch or $y == full or $y == f {
               align-items: stretch;        }  @else if $y == baseline or $y == base or $y == b or $y == line or $y == l {
               align-items: baseline;        } @else {
                align-items: $y;        }    }    @if $direction {
           flex-direction: $direction;    }}

 

 

默认参数

@mixin flex ($a: false, $b: false, $c:false) {    display: flex;    @if $a {        justify-content: $a;    }    @if $b {        align-items: $b;    }    @if $c {        flex-direction: $c;    }}

 

 @for 循环

 

@for $i from 1 through 5 {   $em: if($i == 1, $i/2, $i - 1) + em;   .u-m-#{$i}{margin: #{$em}}   .u-mt-#{$i}{margin-top: #{$em}}   .u-mr-#{$i}{margin-right: #{$em}}   .u-mb-#{$i}{margin-bottom: #{$em}}   .u-ml-#{$i}{margin-left: #{$em}}   .u-pt#{i}{padding: #{$em}}   .u-pt-#{$i}{padding-top: #{$em}}   .u-pr-#{$i}{padding-right: #{$em}}   .u-pb-#{$i}{padding-bottom: #{$em}}   .u-pl-#{$i}{padding-left: #{$em}}}