sassysass

Sassy Sass is a CSS architecture scaffolding for Sass.

Usage no npm install needed!

<script type="module">
  import sassysass from 'https://cdn.skypack.dev/sassysass';
</script>

README

Sassy Sass

npm version npm Build Status

Sassy Sass Logo

Sassy Sass is a scaffolding tool to help you organize your project’s Sass structure.

With a simple command, add a well-structured architecture for your project's CSS. Based off the SMACSS methodology, SassySass creates a simple, maintainable structure for your Sass files.

SassySass in the terminal

Install

npm install sassysass -g

Use

Run sassysass install in your project directory.

To create new individual Sass files run sassysass page. If the name isn't set the file will be named 'page' and if the path isn't set it assumes the directory is 'sass'.

To create new Sass module run sassysass module. If the name isn't set the file will be named 'module' and if the path isn't set it assumes the directory is 'sass/modules'.

Sassy Sass Architecture

  1. Utils The utils directory contains Sass partials like:
  • Vendor dependancies (Compass, Foundation)
  • Authored dependancies (Mixins, Extends)
  1. Base

The base directory contains Sass partials like:

  • Variables
  • Fonts
  • Reset
  1. Layout

The layout directory contains Sass partials like:

  • Responsive Grid
  • Page specific layouts
  1. Modules

The modules directory contains Sass partials like:

  • Header
  • Footer
  • Navigation
  • Content Block
  1. Themes

The themes directory contains Sass partials that overwrite the styles in layout or modules.

Contributing

  1. Fork it
  2. Run npm install
  3. Run gulp
  4. Create your feature branch (git checkout -b my-new-feature)
  5. Commit your changes (git commit -am 'Add some feature')
  6. Push to the branch (git push origin my-new-feature)
  7. Create new Pull Request

License

MIT © Ryan Burgess