Sass boilerplate

An opinionated Sass boilerplate.

Usage

Using Normalize.css is strongly recommended. Normalize.css must be included before your own styles.

This boilerplate uses Breakpoint Sass for Media queries.

Vue projects (using Vue CLI)

You can use the dedicated Vue CLI 3 plugin to automatically install this boilerplate and configure your project.

Manual install

Install required dependencies

npm install normalize.css --save-dev
npm install breakpoint-sass --save-dev

Copy the src/scss directory in your project.
Import Normalize.css to your bundle (optional)

Configure your bundler to import _lib.scss in every file (optional)

For Webpack:

// webpack.config.js
module.exports = {
  // ...
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          // ...
          {
            loader: 'sass-loader',
            options: {
              // Enabling sourcemaps is strongly advised
              sourceMap: true,
              // Depending on the version of sass-loader, the option property may vary
              // (data <8.0.0, prependData >8.0.0, additionalData >9.0.0)
              // See sass-loader's documentation and CHANGELOG for details
              // (https://github.com/webpack-contrib/sass-loader)
              // Update path to fit your needs
              additionalData: '@import "@/scss/lib/_lib.scss";',
            },
          },
        ],
      },
    ],
  },
};

Include the main entry point to your HTML (src/scss/main.scss)

You can take a look at src/main.js and webpack.config.js for a light implementation example.

Documentation

In order to keep documentation up to date and to have it to hand once in your project, most of the documentation is directly written in the code (don't worry, Sass comments are skipped during compilation).

Once installation is complete, feel free to browse files and toggle commented sections or tweak code to fit your needs, especially in the following files:

scss/lib/_lib.scss: please keep in mind this file (and its dependencies) is loaded in every Scss file/Vue Component. Therefore, it MUST NOT generate any CSS once compiled. Doing so would lead to a massive code duplication.
scss/lib/variables/
scss/main.scss
scss/_base.scss

Development

Clone the project locally and install node dependencies:

npm install

Available commands:

npm run build Build the CSS using Webpack to ensure there is no error
npm run watch Same as build but with change detection
npm run prettier:check Check files are properly formatted with Prettier
npm run prettier:fix Reformat files with Prettier
npm run stylelint Lint SCSS files

Please note that Prettier and Stylelint run automatically on pre-commit. Please check package.json for implementation details.

Contributing

Please see contributing guide.

License

MIT

JungHoonGhae/sass-boilerplate-1