ryanburgess / sassysass

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

Sassy Sass

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.

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 dependencies (Compass, Foundation)
• Authored dependencies (Mixins, Extends)

2. Base

The base directory contains Sass partials like:

• Variables
• Fonts
• Reset

3. Layout

The layout directory contains Sass partials like:

• Responsive Grid
• Page specific layouts

4. Modules

The modules directory contains Sass partials like:

• Header
• Footer
• Navigation
• Content Block

5. 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

sassysass's Issues

Prevent overwriting

There needs to be an error or way to prevent files from being overwritten. Currently, if a file has already been created, using the commands sassysass, sassysass-module and sassysass-page will overwrite the file that already exists. There should be a prompt of y/n or create a second version option.

Option to overwrite module or page

If a file already exists a user should be prompted with the option to change the new filename or overwrite the existing.

PostCSS / CSSnext?

@ryanburgess, I'm gonna throw a big spanner in the works (sorry!). Would you ever consider moving from SASS to PostCSS / CSSnext? I've tried it out on a few projects at the BBC, and it's faster to compile, and way more readable as it's essentially just transpiling the future CSS spec into the current spec.

No worries if its out of scope as it's just my 2 cents. I may potentially fork and try it out.

New site design

SassySass.com could you some love. It was just a quick throw together. The repo is here: https://github.com/ryanburgess/sassysass-site

Bribe Akiko for a logo

Need to convince Akiko to design a sassy logo for Sassy Sass.

Unit Test: Creating a new item that already exists, an error should be thrown

When creating a new item (module/page/mixin/etc), an error should be thrown if the item already exists.

Update main SCSS file

It would be great to automatically add import reference to root SCSS file once a new module is created.

Help command not working

The help command can't find the help.json content when it's globally installed.

Unit Test: Killing the process should exit elegantly

Write unit tests

It would be great to add some unit tests and use Travis CI.

Unit Test: Running init twice in the same directory should throw an error

Project still alive?

The website doesn't seem to work:

http://www.sassysass.com/

Is this project still supported?

Create mixin feature

We have create new page and module, it would be great to have create a new mixin added to CL functions.

When creating we should ask for a mixin name and section where it should fall in the root mixin file. It should then automatically be added it to the mixin root file.

Module command not working

Since updating to Node.js 4.2.1 the module command isn't working. It's missing the module request.

$ sassysass module

module.js:340
throw err;
^
Error: Cannot find module 'request'
at Function.Module._resolveFilename (module.js:338:15)
at Function.Module._load (module.js:280:25)
at Module.require (module.js:364:17)
at require (module.js:380:17)

Prompting users instead of specifying path arguments

Right now if you want to create custom modules and/or pages, the user has to input

sassysass-page name=[filename] path=[path to Sass directory]

This is fine, but I think if we could simply prompt the user similar to how when you do npm init to make a package.json it will go line-by-line what things the user can fill out. This would also help when users want to enter extra information including description, etc. If a user enters nothing, it will go to the default.

I'm looking into this and possibly leveraging prompt to help do this.

Update translate mixin to use a axis variable

The current translate mixin is set for only the Z axis. It should be a variable.