- CSS Autoprefixing
- Built-in preview server with BrowserSync
- Compile Sass with libsass
- Documentation with sassdoc
Keep in mind that libsass is feature-wise not fully compatible with Ruby Sass. Check out this curated list of incompatibilities to find out which features are missing.
- Clone this repo!
- Install dependencies:
npm install - Run
npm run serveto preview and watch for changes - Run
npm run buildto build your sass for production
The project structure is based on the Sass 7-1 Pattern. Checkout sass guidlines for a detailed overview. The key difference in this structure is that we've given variables their own directory. Managing variables in a large project can get pretty crazy so to make things easier to maintain, we separate them by type.
Project Root/
│
├── build/
│ ├── css/
│ │ └── main.css
│ │ └── print.css
├── src/
│ └── sass/
│ ├── base/
│ │ └── _all.scss
│ │ └── _fonts.scss
│ │ └── _iconograpy.scss
│ │ └── _typography.scss
│ │
│ ├── components/
│ │ └── _all.scss
│ │ └── _buttons.scss
│ │
│ ├── layout/
│ │ └── _all.scss
│ │ └── _footer.scss
│ │ └── _grid.scss
│ │ └── _header.scss
│ │ └── _navigation.scss
│ │
│ ├── pages/
│ │ └── _all.scss
│ │ └── _home.scss
│ │
│ ├── themes/
│ │ └── _all.scss
│ │ └── _default.scss
│ │
│ ├── utils/
│ │ └── _all.scss
│ │ └── _functions.scss
│ │ └── _helpers.scss
│ │ └── _mixins.scss
│ │
│ ├── variables/
│ │ └── _all.scss
│ │ └── _breakpoints.scss
│ │ └── _colors.scss
│ │
│ ├── vendor/
│ │ └── _all.scss
│ │
│ │
│ └── main.scss
│ └── print.scss
│
├── docs/
│
├── node_modules/
│
├── .editorconfig
├── .gitignore
├── package.json
└── README.md
##TODO
- SCSS Linting
- Source Maps for Development