Package Exports

bem-css-converter
bem-css-converter/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (bem-css-converter) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

BEM to SCSS Converter

A CLI tool to convert flat BEM CSS classes into nested SCSS syntax.

Supports both standard BEM (double dash -- for modifiers) and single underscore _ for modifiers.

Installation

npm install -g bem-css-converter

Usage

bem-css-converter input.css

That's it! The tool reads the CSS file and outputs the nested SCSS to stdout if no output file is specified, or writes to the specified file.

You can also specify output filename:

bem-css-converter input.css [output.scss]

Supported BEM Patterns

Blocks: .block
Elements: .block__element
Modifiers: .block--modifier or .block_modifier
Element modifiers: .block__element--modifier or .block__element_modifier
Pseudo-classes: .block:hover → &:hover
Media queries: Nested inside blocks
Nested selectors: .block img → img { ... }

Example

Input CSS:

.order-item {
  box-sizing: border-box;
  padding: 20px 32px;
  display: grid;
  grid-template-columns: 80fr 119fr 20px;
  gap: 20px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s linear;
}

.order-item_error {
  background-color: red;
  opacity: 0.7;
}

.order-item:hover {
  background-color: rgba(29, 44, 64, 0.05);
}

.order-item > span {
  color: black;
}

@media (max-width: 1599px) {
  .order-item {
    grid-template-columns: 400fr 280fr 20px;
  }
}

@media (max-width: 639px) {
  .order-item {
    padding: 20px 16px;
  }
}

Output SCSS:

.order-item {
  box-sizing: border-box;
  padding: 20px 32px;
  display: grid;
  grid-template-columns: 80fr 119fr 20px;
  gap: 20px;
  border: none;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.15s linear;
  &:hover {
    background-color: rgba(29, 44, 64, 0.05);
  }
  > span {
    color: black;
  }
  @media (max-width: 1599px) {
    grid-template-columns: 400fr 280fr 20px;
  }
  @media (max-width: 639px) {
    padding: 20px 16px;
  }
  &_error {
    background-color: red;
    opacity: 0.7;
  }
}

Example with Single Underscore Modifiers

Input CSS:

.block {
  color: red;
}

.block_error {
  color: blue;
}

.block__element {
  font-size: 14px;
}

.block__element_error {
  font-weight: bold;
}

Output SCSS:

.block {
  color: red;
  &_error {
    color: blue;
  }
  &__element {
    font-size: 14px;
    &_error {
      font-weight: bold;
    }
  }
}

Assumptions

Selectors are simple BEM classes starting with .
No complex selectors with multiple classes or combinators
Declarations are standard CSS properties

GitHub repo

⭐ Give me a star on GitHub: https://github.com/psycholessdev/bem-to-scss