sass 的学习

导入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}}
}