导入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}} }
© 著作权归作者所有
举报
发表评论
0/200