Usage

Install:

npm install wusd-scss -S

Once the package is installed, you can import the library using @import / @use

@use 'wusd-scss' as ws;

If your project build by webpack, you can add the following configuration:

module.exports = {
  module: {
    rules: [
      {
        test: /\.s[ac]ss$/i,
        use: [
          "style-loader",
          "css-loader",
          {
            loader: "sass-loader",
            options: {
              additionalData: "@use 'wusd-scss' as ws;\r\n",
            },
          },
        ],
      },
    ],
  },
}

or vite config:

// vite.config.js
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        quietDeps: true,
        additionalData: "@use 'wusd-scss' as ws;\r\n"
      }
    }
  },
})

Modify Default Configuration

You can use @forward to change config

// resetWusdScss.wcss:
@forward 'wusd-scss' with (
  // all base color, 
  $colors_map: (
    primary: (
      base: #6634E2,
    ),
    success: (
      base: #28C76F,
    ),
    warning: (
      base: #ff9c0e,
    ),
    danger: (
      base: #e82205,
    ),
    info: (
      base: #909399,
    ),
  ),
  $btn_options: (
    // btn radius
    radius: 6px,
    // btn box inline or block
    inline: true,
    // btn padding
    padding: 0.5em 1.2em,
    press: (
      // mask element at press. ::after or ::before
      el: after,
      color: #fff,
      opacity: 0.3,
    ),
  ),
  $card_options: (
    // card radius
    radius: 12px,
    // card padding
    padding: 10px,
    // card background color
    bgc: #fff,
    // card shadow
    shadow: 1px 1px 5px 5px #f1f1f1,
  ),
  $cell_options: (
    label_width: 80px,
    // gap between label & value box
    gap: 10px,
    // border bottom
    border: 1px solid #f1f1f1,
  ),
  $form_item_options: (
    label_width: 80px,
    align: left,
    border: 1px solid #fefefe,
  )
);

// vite.config.ts
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // Close Warning
        quietDeps: true,
        additionalData: "@use 'resetWusdScss.scss' as ws;\r\n"
      }
    }
  },
})

Then you can use light or dark primary color 1 to 9:

body {
  color: $color_primary;
  color: $color_primary_light_1;
  color: $color_primary_dark_1;
}

Close Warning

Deprecation Warning [mixed-decls]: Sass's behavior for declarations that appear after nested rules will be changing to match the behavior specified by CSS in an upcoming version. To keep the existing behavior, move the declaration above the nested rule. To opt into the new behavior, wrap the declaration in `& {}`.

// vite.config.ts
export default defineConfig({
  css: {
    preprocessorOptions: {
      scss: {
        // close warning
        quietDeps: true,
      }
    }
  },
})

Colors

| name | color | | ------- | ------- | | primary | | | success | | | warning | | | danger | | | info | |

Mixins

btn

div {
  @include ws.btn((
    type: primary,
    radius: 5px,
    plain: true,
    inline: true,
    padding: 10px,
  ));
}

card

div {
  @include ws.card((
    radius: 12px,
    padding: 10px,
    bgc: #fff,
    shadow: 1px 1px 5px 5px #fefefe,
  ));
}

cell

div {
  @include ws.cell((
    label_width: 80px,
    gap: 10px,
    border: 1px solid #fefefe,
  ));
}

clearfix

div {
  @include ws.clearfix();
}

flex

div {
  @include ws.flex((
    // values:  left(start)、center、right(end) 、between、around、evenly 
    x: left,
    // values:  top(start)、center、bottom(end)
    y: top,
    // values: x、y
    dir: x,
    inline: false,
    wrap: false,
    gap: 0,
  ));
}
div {
  @include ws.flex_self((
    grow: 0,
    shrink: 0,
    basis: auto,
  ))
}

cut_txt

cut text overflow to ...

div {
  @include ws.cut_txt(1);
}

form_item

div {
  @include ws.form_item((
    label_width: 80px,
    align: left,
    border: 1px solid #fefefe,
  ));
}

safe_area

div {
  @include ws.safe_area_top();
  @include ws.safe_area_bottom();
}

scrollbar

div {
  @include ws.scrollbar((hide: true));
}

un_select

make word unselect

div {
  @include ws.un_select();
}