# dscss

**Repository Path**: moduo_412/dscss

## Basic Information

- **Project Name**: dscss
- **Description**: 之前写过dcss，但是只是为了方便自己使用。而dscss的初衷是给广大前端程序员使用，方便大家快速定制自己的样式库。
- **Primary Language**: CSS
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-01-13
- **Last Updated**: 2022-05-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# dscss

#### 介绍
之前写过dcss，但是只是为了方便自己使用。而dscss的初衷是给广大前端程序员使用，方便大家快速定制自己的样式库。

#### 软件架构

```shell
├─dscss (核心文件夹)
│	│
│	├─_function.scss 函数
│	│
│	├─_mixin.scss 混合器
│	│
│	├─_reset.scss 重置浏览器默认样式
│	│
│	└─_theme.scss 主题(包含变量，颜色等)
│
├─demo.html 示例页面
│	
├─dscss.min.css 打包后的css
│
└─dscss.scss 自己要定制的样式
```

#### 理念

我们在核心文件里定义好大量的变量，混合器，函数等。在 `diy.scss` 中自由组合想要的样式。最后生成浏览器可用的 `diy.min.css`  生产文件。

#### 示例

在 `diy.scss` 中定制项目需要的颜色

```scss
// 引用dscss核心文件
//@import 'dscss/reset'; // 重置
@import 'dscss/theme'; // 主题
//@import 'dscss/mixin'; // 混合器
//@import 'dscss/function'; // 函数

// 定义颜色集合
$theme-colors: (
  "primary":    $blue,
  "success":    $green,
  "info":       $cyan,
  "warning":    $yellow,
  "danger":     $red,
  "dark":       $gray-900,
) !default;
// 遍历出字体和背景颜色
@each $colorKey, $color in $theme-colors {
    .text-#{$colorKey} {
        color: $color;
    }
    .bg-#{$colorKey} {
        background-color: $color;
    }
}
```

生成的 `diy.min.css` 如下：

```scss
.text-primary{color:#0d6efd}
.bg-primary{background-color:#0d6efd}
.text-success{color:#198754}
.bg-success{background-color:#198754}
.text-info{color:#0dcaf0}
.bg-info{background-color:#0dcaf0}
.text-warning{color:#ffc107}
.bg-warning{background-color:#ffc107}
.text-danger{color:#dc3545}
.bg-danger{background-color:#dc3545}
.text-dark{color:#212529}
.bg-dark{background-color:#212529}
```

#### 结语

其它情况请大家举一反三，混合器，函数里面都有注释，本来除了我也不会有人用。也不值当写太详细的文档😄