scss 基地萨斯

Posted 2021-05-17

// BaseSass (v:1.0)
// By Niklas Wagner
// ============================================================
// Table of contents:
// 1. Variables
// 2. Maps
// 3. Functions
// 4. Mixins
// ============================================================

// 1. Variables
// ============================================================

// golden ratio
$GOLDEN_RATIO: 1.61803398875;

// 2. Maps
// ============================================================

// colors
$COLORS: (
    white: rgb(0, 0, 0),
    black: rgb(0, 0, 0)
);

// spacings
$SPACINGS: (
    paddingGreater: 2rem,
    paddingSmaller: 2rem,
    marginGreater: 1rem,
    marginSmaller: 1rem
);

// breakpoints
$BREAKPOINTS: (
    xs: 448px,
    sm: 576px,
    md: 768px,
    lg: 1024px,
    xl: 1280px
);

// 3. Functions
// ============================================================

// color function
// returns key from $COLORS map
@function color($key) {
    @if map-has-key($COLORS, $key) {
        @return map_get($COLORS, $key);
    } @else {
        @warn "Undefined color: " #{$key};
        @return null;
    }
}

// spacing function
// returns key from $SPACINGS map
@function spacing($key) {
    @if map-has-key($SPACINGS, $key) {
        @return map_get($SPACINGS, $key);
    } @else {
        @warn "Undefined spacing: " #{$key};
        @return null;
    }
}

// breakpoint function
// returns key from $BREAKPOINTS map
@function breakpoint($key) {
    @if map-has-key($BREAKPOINTS, $key) {
        @return map_get($BREAKPOINTS, $key);
    } @else {
        @warn "Undefined breakpoint: " #{$key};
        @return null;
    }
}

// 4. Mixins
// ============================================================

// media mixin
// type == min -> min-width (mobile first)
// type == max -> max-width (desktop first)
// type (default) = min
@mixin media($breakpoint, $type) {
    @if $type == "min" {
        @media (min-width: breakpoint($breakpoint)) {
            @content;
        }
    }
    @if $type == "max" {
        @media (max-width: breakpoint($breakpoint)) {
            @content;
        }
    }
}