DEV Community

Cover image for Easily structure your Sass
Maxime
Maxime

Posted on

Easily structure your Sass

Hello everyone πŸ‘‹,

Intro

A year ago, I published an NPM package to generate a Sass file structure at the root of a project.

The goal behind this idea was to help our dev team to have "one source of truth" regarding the way we organized our code. And it worked well at first. We all used it, to start a new project, and it became more maintainable.

But there was one big issue that we could not solve with this package, it was not flexible enough.

Because not all projects are the same, having to use the same template for all our projects was not ideal.

The solution: create a CLI to give more options to the devs, like choosing the path of installation, multiple templates, "helper" code, etc.

The CLI

create-scss-cli setup example

The CLI generates a Sass file structure based on the 7-1 pattern. You can choose where you want to install it into your project. It comes with (variables, mixins, functions, and maps to generate helper CSS classes).

If you only want to file structure, but without any code, you can select the "clean" template. It will generate all the files, without any starter code.

Otherwise, you also have the option to remove the specific folder from the structure. Don't need a vendor or theme folder, no problem, simply select which folder you want to discard from the original structure.

Structure

scss
    β”‚
    β”œβ”€β”€ abstracts
    β”‚Β Β  β”œβ”€β”€ colors
    β”‚Β Β  β”œβ”€β”€ fonts
    β”‚Β Β  β”œβ”€β”€ index
    β”‚   β”œβ”€β”€ mixins
    β”‚Β Β  β”œβ”€β”€ spacing
    β”‚Β Β  └── helper
    β”‚
    β”œβ”€β”€ base
    β”‚Β Β  β”œβ”€β”€ global.scss
    β”‚Β Β  β”œβ”€β”€ shame.scss
    β”‚Β Β  └── typography.scss
    β”‚
    β”œβ”€β”€ components
    β”‚Β Β  β”œβ”€β”€ alert.scss
    β”‚   β”œβ”€β”€ banner.scss
    β”‚Β Β  β”œβ”€β”€ buttons.scss
    β”‚Β Β  β”œβ”€β”€ card.scss
    β”‚Β Β  β”œβ”€β”€ forms.scss
    β”‚Β Β  β”œβ”€β”€ icons.scss
    β”‚Β Β  β”œβ”€β”€ menu.scss
    β”‚Β Β  β”œβ”€β”€ modal.scss
    β”‚Β Β  β”œβ”€β”€ progress.scss
    β”‚Β Β  └── table.scss
    β”‚
    β”œβ”€β”€ layout
    β”‚Β Β  β”œβ”€β”€ footer.scss
    β”‚Β Β  β”œβ”€β”€ grid.scss
    β”‚Β Β  β”œβ”€β”€ header.scss
    β”‚Β Β  β”œβ”€β”€ navigation.scss
    β”‚Β Β  └── sidebar.scss
    β”‚
    β”œβ”€β”€ pages
    β”‚Β Β  └── home.scss
    β”‚
    β”œβ”€β”€ themes
    β”‚Β Β  └── dark.scss
    β”‚
    β”œβ”€β”€ vendor
    β”‚Β Β  └── normalize.scss
    β”‚
    └── main.scss
Enter fullscreen mode Exit fullscreen mode

Installation

Prerequisites

You can install the package globally or execute it right away with npx.

Global install

npm i -g create-scss-cli
Enter fullscreen mode Exit fullscreen mode

After that, you'll be able to use the create-scss-cli command in your project like so:

cs-cli
Enter fullscreen mode Exit fullscreen mode

NPX

npx create-scss-cli
Enter fullscreen mode Exit fullscreen mode

Documentation

πŸ‘‰ https://www.createscss.com/

πŸ‘‰ https://github.com/maximedaraize/create-scss-cli

πŸ‘‰ https://www.npmjs.com/package/create-scss-cli

Conclusion

I would really appreciate any feedback. This is a side-project but I have the intention to keep working on it. Contribution is welcome πŸ€™

Thanks for reading,

Max

Top comments (0)