https://github.com/alexandre-chapelle/scss-refactor-toolkit

Refactoring your SCSS code has never been easier
https://github.com/alexandre-chapelle/scss-refactor-toolkit

bun css js refactor sass scss transition

Last synced: 23 days ago
JSON representation

Refactoring your SCSS code has never been easier

• Host: GitHub
• URL: https://github.com/alexandre-chapelle/scss-refactor-toolkit
• Owner: Alexandre-Chapelle
• License: mit
• Created: 2024-12-03T22:58:52.000Z (about 1 month ago)
• Default Branch: main
• Last Pushed: 2024-12-11T13:53:14.000Z (24 days ago)
• Last Synced: 2024-12-11T14:24:54.045Z (24 days ago)
• Topics: bun, css, js, refactor, sass, scss, transition
• Language: TypeScript
• Homepage:
• Size: 30.3 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md

Awesome Lists containing this project

README

        
# SCSS-Refactor-Toolkit

## Feature: scss-clean-unused-selectors

  ### Before Usage:

  

  ```scss

  

  // file.scss

  .selector {

    .selector2 {

      .selector3 {

      }

    }

  }

  

  .other_selector {

    color: red;

  }

  ```

  

  ### After Usage:

  

  ```scss

  // file.scss

  .other_selector {

    color: red;

  }

  ```

## Feature: scss-refactor-transitions

### Before Usage:

  

  ```scss

  

  // file.scss

  .button {

    background: #a7ef6f;

    border-radius: 8px;

    transition: all 0.15s;

    cursor: pointer;

  

    &:hover {

      opacity: 0.7;

      background-color: red;

    }

  

    &:disabled {

      background: green;

      cursor: not-allowed;

      color: white;

    }

  }

  ```

      

   ### After Usage:

      

  ```scss

  // file.scss

  .button {

    background: #a7ef6f;

    border-radius: 8px;

    transition: background-color 0.15s, color 0.15s, opacity 0.15s;

    cursor: pointer;

  

    &:hover {

      opacity: 0.7;

      background-color: red;

    }

  

    &:disabled {

      background: green;

      cursor: not-allowed;

      color: white;

    }

  }

  ```

## To Install Dependencies:

```bash

bun install

```

## To Run:

```bash

bun run index.ts

```

## FAQ:

**Q:** Does it work with nested folders?  

**A:** Yes, it does.

**Q:** Does it work with nested selectors?  

**A:** Yes, it does.

**Q:** Can I use it without having to install dependencies?  

**A:** Yes, please view the releases section.

**Q:** Does it create backups just in case?  

**A:** Yes, it does. After running the executable or via `npm run start`, you will be prompted:  

`Do you want to create backups for each modified file? (Y/n)`

## Contributing

Please see the Contributing guideline.