npm package: @hongluan-ui/styles
Description: ```shell npm install @hongluan-ui/styles # 或 yarn add @hongluan-ui/styles # 或 pnpm add @hongluan-ui/styles ```
Latest version: 2.0.4

# 鸿鸾组件库支持的产线级UI规范，主题，以及样式工具等

```shell
npm install @hongluan-ui/styles
# 或
yarn add @hongluan-ui/styles
# 或
pnpm add @hongluan-ui/styles
```

## 鸿鸾 >= 2.2.0 ( 样式库 >= 2.0.0 )

***需要sass:map与sass:math支持***

### uk3 [Demo](http://pro.front.etcc.group/#/dashboard?layout=default)

- /spec 规范SCSS配置文件（$features_respond: true; $features_rem: false;）
- /themes/pro 实现鸿鸾Pro中uk3亮色主题，额外需要的一些样式定义

### fx(繁星) [Demo](http://pro.front.etcc.group/#/dashboard?layout=fx)

- /spec 规范SCSS配置文件（$features_respond: true; $features_rem: false;）
- /themes/pro 实现鸿鸾Pro中fx主题，额外需要的一些样式定义

### visualized(大屏) [Demo](http://pro.front.etcc.group/visualized/index.html#/dashboard)

- /spec 规范SCSS配置文件（$features_respond: true; $features_rem: false;）
- /themes/pro 实现鸿鸾Pro中visualized主题，额外需要的一些样式定义


```scss
@use 'sass:math';
@use 'sass:map';
// 使用方法（scss）

// 如果要修改默认的响应式或者rem配置，直接覆盖即可
// $features_respond: true;
// $features_rem: false;

// 非visualized引入方式如下
@import '<node_modules>/hongluan-ui/theme/scss/common/config';
@import '<node_modules>/@hongluan-ui/styles/2.x/fx/spec/config';

// visualized引入方式如下
// @import '<node_modules>/@hongluan-ui/styles/2.x/visualized/spec/config';
// @import '<node_modules>/hongluan-ui/theme/scss/common/colors';

@import '<node_modules>/hongluan-ui/theme/scss/components';
@import '<node_modules>/hongluan-business-ui/theme/scss/components'; // 可选
```

```scss
// （可选），需要鸿鸾Pro中自定义主题时才需要引入
// **********重新指定imgPath与fontPath路径（必须）：*************
$imgPath: '<node_modules>/@hongluan-ui/styles/images/';
$fontPath: '<node_modules>/@hongluan-ui/styles/fonts/'; // 只有大屏(visualized)主题需要字体配置
@import '<node_modules>/@hongluan-ui/styles/2.x/fx/themes/pro/index';
```

## 鸿鸾 >=2.0.0 && <2.2.0 ( 样式库 >=1.1.0 && <2.0.0)

***需要sass:map与sass:math支持***

### uk2 [Demo](http://pro.front.etcc.group/#/dashboard?layout=uk2)

- /spec 规范SCSS配置文件（$features_respond: true; $features_rem: false;）
- /themes/pro 实现鸿鸾Pro中uk2主题，额外需要的一些样式定义

### uk2a [Demo](http://pro.front.etcc.group/#/dashboard?layout=uk2a)

- /spec 规范SCSS配置文件（$features_respond: true; $features_rem: false;）
- /themes/pro 实现鸿鸾Pro中uk2a主题，额外需要的一些样式定义

### uk3 [Demo](http://pro.front.etcc.group/#/dashboard?layout=default)

- /spec 规范SCSS配置文件（$features_respond: true; $features_rem: false;）
- /themes/pro 实现鸿鸾Pro中uk3亮色主题，额外需要的一些样式定义

### uk3-dark [Demo](http://pro.front.etcc.group/#/dashboard?layout=dark)

- /spec 规范SCSS配置文件（$features_respond: true; $features_rem: false;）
- /themes/pro 实现鸿鸾Pro中uk3暗色主题，额外需要的一些样式定义

### cecloud(电子云) [Demo](http://pro.front.etcc.group/#/dashboard?layout=cecloud)

- /spec 规范SCSS配置文件（$features_respond: true; $features_rem: false;）
- /themes/pro 实现鸿鸾Pro中cecloud主题，额外需要的一些样式定义

### fx(繁星) [Demo](http://pro.front.etcc.group/#/dashboard?layout=fx)

- /spec 规范SCSS配置文件（$features_respond: true; $features_rem: false;）
- /themes/pro 实现鸿鸾Pro中fx主题，额外需要的一些样式定义

### visualized(大屏) [Demo](http://pro.front.etcc.group/visualized/index.html#/dashboard)

- /spec 规范SCSS配置文件（$features_respond: true; $features_rem: false;）
- /themes/pro 实现鸿鸾Pro中visualized主题，额外需要的一些样式定义


```scss
@use 'sass:math';
@use 'sass:map';
// 使用方法（scss）

// 如果要修改默认的响应式或者rem配置，直接覆盖即可
// $features_respond: true;
// $features_rem: false;

// 方式引入如下
@import '<node_modules>/hongluan-ui/theme/scss/common/config'; // 如果使用暗色主题，这里需要换成config-dark
@import '<node_modules>/@hongluan-ui/styles/2.x/cecloud/spec/config';
@import '<node_modules>/hongluan-ui/theme/scss/components';
@import '<node_modules>/hongluan-business-ui/theme/scss/components'; // 可选
```

```scss
// （可选），需要鸿鸾Pro中自定义主题时才需要引入
// **********重新指定imgPath与fontPath路径（必须）：*************
$imgPath: '<node_modules>/@hongluan-ui/styles/images/';
$fontPath: '<node_modules>/@hongluan-ui/styles/fonts/'; // 只有大屏(visualized)主题需要字体配置
@import '<node_modules>/@hongluan-ui/styles/2.x/cecloud/themes/pro/index';
```


## 鸿鸾1.5.x（***不推荐，请使用2.x***）

***需要sass:map与sass:math支持***

### uk2

- /spec 规范SCSS配置文件（$conf-respond: true; $conf-rem: false;）
- /themes/pro 实现鸿鸾Pro中uk2主题，额外需要的一些样式定义

### uk2a

- /spec 规范SCSS配置文件（$conf-respond: true; $conf-rem: false;）
- /themes/pro 实现鸿鸾Pro中uk2a主题，额外需要的一些样式定义

### ioc(数城)

- /spec 规范SCSS配置文件（$conf-respond: true; $conf-rem: false;）
- /themes/pro 实现鸿鸾Pro中ioc主题，额外需要的一些样式定义

### cecloud(电子云)

- /spec 规范SCSS配置文件（$conf-respond: true; $conf-rem: false;）
- /themes/pro 实现鸿鸾Pro中cecloud主题，额外需要的一些样式定义

### fx(繁星)

- /spec 规范SCSS配置文件（$conf-respond: true; $conf-rem: false;）
- /themes/pro 实现鸿鸾Pro中fx主题，额外需要的一些样式定义

### visualized(大屏)

- /spec 规范SCSS配置文件（$conf-respond: false; $conf-rem: true;）
- /themes/pro 实现鸿鸾Pro中visualized主题，额外需要的一些样式定义

```scss
// 使用方法（scss）

// 如果要修改默认的响应式或者rem配置，直接覆盖即可
// $conf-respond: true;
// $conf-rem: false;

@import '<node_modules>/@hongluan-ui/styles/1.5.x/cecloud/spec/config';
@import '<node_modules>/hongluan-ui/theme/scss/index';
```

```scss
// 如果需要同时使用hongluan-business-ui，需要用下面方式引入
@import '<node_modules>/@hongluan-ui/styles/1.5.x/cecloud/spec/config';
@import '<node_modules>/hongluan-ui/theme/scss/common/config';
@import '<node_modules>/hongluan-ui/theme/scss/components';
@import '<node_modules>/hongluan-business-ui/theme/scss/components';
```

```scss
// （可选），需要鸿鸾Pro中自定义主题时才需要引入
// **********重新指定imgPath与fontPath路径（必须）：*************
$imgPath: '<node_modules>/@hongluan-ui/styles/images/';
$fontPath: '<node_modules>/@hongluan-ui/styles/fonts/'; // 只有大屏主题需要字体配置
@import '<node_modules>/@hongluan-ui/styles/1.5.x/cecloud/themes/pro/index';
```