🎉Scss工具函数 方便开发响应式网站

在工作的时候因为公司使用的技术栈其实和咱习惯的不太一样,所以就编写了一个函数,帮助咱继续用咱习惯的方式开发~
(没错,就是 Tailwind CSS
这个函数的设计参考了 Tailwind CSS 原子化的思想,让不同尺寸屏幕的设计通过工具组合起来,使他们编写的时候在同一个纬度上
也就稍稍的让我们的 Scss 可以有那么一丢丢方便使用(至少是写不同端样式的时候不用滚来滚去了!!! !

代码:
Gist: gist.github.com/owocc/dedc5…
Ray.so: ray.so/NhiBYH6

Raw :

/**
    * 响应式设计辅助函数--移动端优先模式
    
    * ✨ 灵感来自 Tailwind CSS
    * 创造这个函数的原因很简单...就是被Tailwind CSS养太好了,就想要和写 Tailwind CSS 一样,使用紧凑的方式来编写我的代码 😄 
    
    * 食用方法🍨:
        .demo-class{
            💡 这里是你手机端的样式
            height:50px;
            width:50px;
            🚤 使用响应式字体:
            @include font("base",12px,14px, 600); 这里是默认的字体
            @include font("lg",12px,14px, 600); //这里是到了 pc 端大小后的字体
            
            🌰: 当我想要适配 lg (也就是电脑端)，就可以下面这样
            @include rd('lg'){
                height:100px;
                width:100px;
            }
        }
*/

/**
  * 🏄🏼 响应式断点
  * 这里准备了基础的一些断点,如果有更多需要,可以自行添加!🚴
*/
$breakpoints: (
  xs: 380px,
  sm: 640px,
  md: 768px,
  lg: 1024px,
  xl: 1280px,
  2xl: 1536px,
);

/**
  * 🚤 响应式样式
*/
@mixin rd($point) {
  @each $key, $value in $breakpoints {
    @if ($point == $key) {
      @media (min-width: $value) {
        @content;
      }
    }
  }
}
/**
  * 🚄 响应式字体大小生成
*/
@mixin font($point, $font-size, $line-height, $weight) {
  @if ($point == "base") {
    font-size: #{$font-size};
    line-height: #{$line-height};
    font-weight: #{$weight};
  } @else {
    @include rd($point) {
      font-size: #{$font-size};
      line-height: #{$line-height};
      font-weight: #{$weight};
    }
  }
}