https://github.com/KittyGiraudel/sass-boilerplate

A boilerplate for Sass projects using the 7-1 architecture pattern from Sass Guidelines.
https://github.com/KittyGiraudel/sass-boilerplate

boilerplate guidelines sass

Last synced: about 2 months ago
JSON representation

A boilerplate for Sass projects using the 7-1 architecture pattern from Sass Guidelines.

• Host: GitHub
• URL: https://github.com/KittyGiraudel/sass-boilerplate
• Owner: KittyGiraudel
• License: mit
• Created: 2015-05-22T10:09:45.000Z (over 9 years ago)
• Default Branch: master
• Last Pushed: 2023-08-08T02:39:57.000Z (over 1 year ago)
• Last Synced: 2024-06-11T17:19:48.392Z (6 months ago)
• Topics: boilerplate, guidelines, sass
• Language: SCSS
• Homepage: https://sass-guidelin.es/#architecture
• Size: 45.9 KB
• Stars: 3,326
• Watchers: 101
• Forks: 774
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-sass - Sass-Boilerplate

README

        
# Sass Boilerplate

This is a sample project using the [7-1 architecture pattern](https://sass-guidelin.es/#architecture) and sticking to [Sass Guidelines](https://sass-guidelin.es) writing conventions.

Each folder of this project has its own `README.md` file to explain the purpose and add extra information. Be sure to browse the repository to see how it works.

## Using the indented syntax

### Sass conversion

This boilerplate does not provide a `.sass` version as it would be painful to maintain both versions without an appropriate build process. However, it is very easy to convert this boilerplate to Sass indented syntax.

Clone it, head into the project and then run:

```

sass-convert -F scss -T sass -i -R ./  && find . -iname “*.scss” -exec bash -c 'mv "$0" “${0%\.scss}.sass"' {} \;

```

### Use with Sass

When using `sass` - in order to build that boilerplate, one needs to:

- install `sass` if not yet installed:

```bash

npm install -g sass

```

- run build command from command line:

```bash

sass stylesheets/main.scss dist/main.css

```