BigCommerce预览主题----自定义的Sass解释

下载预览主题 封装的sass文件在node_modules/@bigcommerce/citadel/dist/tools/toolkit
（本文主要是对BC下载下来的Sass方法进行解释,有不足的地方欢迎补充指正。）

一、breakpoint($size)

页面大小的响应式布局。
$size如果是数字那么min-width:(数值)，如果是“large”、“medium”、“small”就会用到screensizes里面声明的大中小屏幕的大小。

@mixin breakpoint($size) {
    @if type-of($s在这里插入代码片ize) == "number" {
        @media (min-width: $size) { @content; }
    }
    @else {
        @media (min-width: screenSize($size)) { @content; }
    } }
//------------------------screensizes----------------------
$screen-large:                  1261px; // 1
$screen-medium:                 801px;
$screen-small:                  551px;

二、remCalc($values, $base-value: $fontSize-root)

remCale里面会用到的一些值和方法：
config.json 中的

fontsize-root:14

BC自定义的stencilNumber方法

stencilNumber("font-size", "rem")

assets\scss\settings\global\typography\_typography.scss 中的:

$fontSize-root:                 stencilNumber("fontSize-root"); 
$fontSize-base:                 1rem; 

/*
$font-root 14 
length  列表函数，返回一个列表中有几个值
throuth包含$max的值  [1,$max]
*/
@function remCalc($values, $base-value: $fontSize-root) {
    $max: length($values);
    @if $max == 1 { 
    	@return convertToRem(nth($values, 1), $base-value);
    }
    $remValues: ();
    @for $i from 1 through $max {
        $remValues: append($remValues, convertToRem(nth($values, $i), $base-value));
    }
    @return $remValues;
}

/*处理数据num  */
@function stripUnit($num) {
    @return $num / ($num * 0 + 1);
}

/*
转化为rem单位的数据   $font-base:1rem
scss-lint:disable ZeroUni
*/
@function convertToRem($value, $base-value: $fontSize-base) {
    $value: stripUnit($value) / stripUnit($base-value) * 1rem;
    @if ($value == 0rem) { $value: 0; } // Turn 0rem into 0
    @return $value;
}

三、Square

正方形方形，尺寸
参数是一个正方形的边长值

@mixin square($size) {
    height: remCalc($size);
    width: remCalc($size);
}

四、Circle

圆形

@mixin circle($size) {
    @include square($size);
    border-radius: remCalc($size);
}

五、Vertical position middle

垂直居中

@mixin verticalPositionMiddle($position: "relative") {
    @if $position == "relative" {
        position: relative;
    }
    @else if $position == "absolute" {
        position: absolute;
    }
    top: 50%;
    transform: translateY(-50%);
}