# scss-utils

**Repository Path**: iBizModeling/scss-utils

## Basic Information

- **Project Name**: scss-utils
- **Description**: Scss BEM 工具包
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2023-11-03
- **Last Updated**: 2024-03-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# SCSS BEM 规范工具包

## 样式规范

名称使用 BEM 规范。在 ts 中书写样式使用 Namespace 工具类，不可以直接在 class 中写样式。在 scss 中使用 scss 中提供的全局方法，不可已直接写组件中的样式。

## BEM 命名规范

BEM 的意思就是块（block）、元素（element）、修饰符（modifier），是由 Yandex 团队提出的一种前端命名方法论。这种巧妙的命名方法让你的 CSS 类对其他开发者来说更加透明而且更有意义。BEM 命名约定更加严格，而且包含更多的信息，它们用于一个团队开发一个耗时的大项目。

### 说明

```css
.block {/* 块 */}
.block__element {/* 元素 */}
.block__element--modifier {/* 修饰符 */}
```

### <span style="color: #F5222D;">\_\_</span> 与 <span style="color: #F5222D;">--</span> 的区别

- <span style="color: #F5222D;">\_\_</span> 表示的是下级元素
- <span style="color: #F5222D;">--</span> 表示元素的不同状态

## 代码中使用

### 在 ts 中使用 BEM

在全局提供了 `Namespace` 工具类，只需在组件实例化时使用此方法构造 `ns` 输出对象即可。

```ts
const ns = new Namespace('layout');

// bem class 命名
ns.b()                              => 'ibiz-layout'
ns.b('header')                      => 'ibiz-layout-header'
ns.e('header')                      => 'ibiz-layout__header'
ns.m('hover')                       => 'ibiz-layout--hover'
ns.be('header', 'title')            => 'ibiz-layout-header__title'
ns.em('title', 'hover')             => 'ibiz-layout__title--hover'
ns.bm('header', 'hover')            => 'ibiz-layout-header--hover'
ns.bem('header', 'title', 'hover')  => 'ibiz-layout-header__title--hover'
// 状态 class 样式命名
ns.is('loading', false)             => ''
ns.is('loading', true)              => 'is-loading'
// css 变量 style 对象
ns.cssVar({ 'color': 'red' })       => { '--ibiz-color': 'red' }
ns.cssVarBlock({ 'color': 'red' })  => { '--ibiz-layout-color': 'red' }
// css var 变量名称拼接
ns.cssVarName('color')              => '--ibiz-color'
ns.cssVarBlockName('color')         => '--ibiz-layout-color'
```

### 在 scss 中使用 BEM

```scss
/**
.ibiz-layout { font-size: 14px; }
*/
@include b('layout') {
  font-size: 14px;
}

/**
.ibiz-layout { font-size: 14px; }
.ibiz-layout__header { font-size: 14px; }
*/
@include b('layout') {
  font-size: 14px;

  @include e('header') {
    font-size: 14px;
  }
}

/**
.ibiz-layout { font-size: 14px; }
.ibiz-layout__header { font-size: 14px; }
.ibiz-layout__header--hover { color: red; }
*/
@include b('layout') {
  font-size: 14px;

  @include e('header') {
    font-size: 14px;

    @include m('hover') {
      color: red;
    }
  }
}

/**
.ibiz-layout .is-loading { display: block; }
*/
@include b('layout') {

  @include when('loading') {
    display: block;
  }
}
```

`注意 scss 在编译后，上边写法是不会出现嵌套的。如需嵌套需要使用下边的方式`

```scss
/**
.ibiz-layout .ibiz-block__element--modifier { display: block; }
*/
@include b('layout') {

  #{bem('block', 'element', 'modifier')} {
    display: block;
  }
}
```

### 在 scss 使用 css 变量

```scss
#{joinVarName(('button', 'text-color'))}                 => '--ibiz-button-text-color'

#{getCssVarName('button', 'text-color')}                 => '--ibiz-button-text-color'

#{getCssVar('button', 'text-color')}                     => var(--ibiz-button-text-color)

#{getCssVarWithDefault(('button', 'text-color'), red)}   => var(--ibiz-button-text-color, red)
```