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/LESS Converter

npm downloads

Convert flat BEM class names into clean, nested SCSS/LESS structure automatically.

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 the output 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:

.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;
    }
  }
}

Example with media queries

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;
  }
}

Motivation

I built this to speed up my workflow when converting legacy CSS into structured SCSS

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

License

This project is licensed under the MIT License.
You're free to use, modify, and distribute the code, but please include attribution by keeping the original license text and a link to this repository.