基于scss开发一个scss工具库

Feb 16, 2023

背景

大家好，我是前端老六，这段时间我一直想开发一些有趣的库，比如说什么js工具库啊，但是自己没什么想法，我在想那开源库，那全是什么nodejs，什么底层封装，那太多了，你能想到的，别人可能都做出来了，哈哈哈😆。于是我决定换个方向，样式的库怎么样？嗯。。。现在也不少，比如说什么tailwindcss很火，自己也有用过，但直接写在html好像最后代码看起来有点那啥，最后我在想，还是最初的好，那么整一个样式的库吧，css的使用有语法限制，我自己平时scss用得多，那么就用scss来搞一个，封装一些常用的样式块和函数。

开始

vue3+vite构建项目，用于测试fast-scss包。
使用pnpm workspace 将我们的fast-scss包作为子package工作空间（Workspace） | pnpm，外部的vue3项目可以直接下载工作区的包，建立连接，workspace的fast-scss打包代码改动会在项目中生效，这样就不用频繁的发包到npm测试了。
scss打包，使用postcss-cli，并集成postcss-scss(识别scss语法)，autoprefixer（自动前缀处理），cssnano压缩样式代码，sass-migrator（规范scss代码风格）。
编写打包的打包和发布的的script，发布版本号自动处理使用了standard-version。

/* postcss.config.js 用于postcss-cli打包  */
module.exports = {
  syntax: 'postcss-scss',
  plugins: [
    // eslint-disable-next-line @typescript-eslint/no-var-requires
    require('autoprefixer')({ cascade: false }),
    // eslint-disable-next-line @typescript-eslint/no-var-requires
    require('cssnano')({ preset: 'default' }),
  ],
}

/* 编写打包和发布的scripits */
"scripts": {
  "build": "pnpm standard:scss && postcss src --base src --dir dist",
  "standard:scss": "sass-migrator --migrate-deps module src/**/*.scss",
  "release": "pnpm build && standard-version && git push --follow-tags && pnpm publish"
},

项目代码风格采用eslint+prettiercode-style-lint-vue3-ts点击查看
测试fast-scss代码是否能够正常工作。

//vite.config.ts
export default defineConfig({
  plugins: [vue(), Pages()],
  base: curEnv.VITE_PUBLIC_PATH,
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `@use "fast-scss" as *;`, //引入fast-scss库
      },
    },
  },
  build: {
    outDir: 'docs',
  },
})

//*.vue
//demo

fast-scss目前所有功能介绍

全局样式的重置，一旦项目应用了这个库，他会帮你清除浏览器默认样式，并对部分标签在不同浏览器的做了样式统一。
🎨调色板，多风格颜色任你选，还可以为颜色设置透明度，满足更多要求。灵感(抄)来自tailwindcss。调色板所有支持的颜色可以点击这里查看。

text部分的mixin（不断增加中）
scss工具函数（不断增加中）

$namespace: "fast";
/*
 join var name
  join-var-name(('button', 'text-color')) => '--#{namespace}-button-text-color'
 */
@function join-var-name($list) {
  $name: "--" + $namespace;
  @each $item in $list {
    @if $item != "" {
      $name: $name + "-" + $item;
    }
  }
  @return $name;
}

/*
 get-css-var('button', 'text-color') => var(--#{namespace}-button-text-color)
 */
@function get-css-var($args...) {
  @return var(#{join-var-name($args)});
}

/*
 get-css-var-name(('button', 'text-color')) => '--#{namespace}-button-text-color'
 */
@function get-css-var-name($args...) {
  @return join-var-name($args);
}

/*
 @include set-css-var-from-map($colors)
 */
@mixin set-css-var-from-map($map, $prefix: "") {
  @each $key, $value in $map {
    #{get-css-var-name($prefix, $key)}: #{$value};
  }
}

其他部分（媒体、布局、高级样式...）正在迭代。

结语

编写这个库最终想解决的问题，有的样式代码在项目中我们会经常使用，每次粘贴复制会很麻烦，而且还不一定是标准的写法，我在想可以把标准的常用的样式块集合起来，直接运用于项目，岂不是爽哉哉。恰好scss提供了mixin和函数，样式代码的灵活度将进一步提高。scss还有更多强大的功能，期待后续能基于它，来用fast-scss创造出更多的生产力。期待小伙伴们来一起共建。

部分灵感感谢：tailwindcss、云游君

源码：fast-scss

（job&other）联系我：laoer536@163.com