create-scss

⚠️⚠️⚠️

WARNING create-scss is deprecated. There are no plans to add additional features.

Projects that still use it should move to create-scss-cli

⚠️⚠️⚠️

A quick and easy way to add a scss directory structure to your projet ⚡

A starter template with scss directory structure, dependencies, scripts for developement and production.

Table of Contents

1. Structure
2. Installation
3. Usage
4. Versions
5. Contribution and support

Structure

     scss
        │
        ├── abstracts
        │   ├── functions.scss
        │   ├── helpers.scss
        │   ├── mixins.scss
        │   └── variables.scss
        │
        ├── base
        │   ├── global.scss
        │   ├── reset.scss
        │   ├── shame.scss
        │   └── typography.scss
        │
        ├── components
        │   ├── alert.scss
        │   ├── banner.scss
        │   ├── buttons.scss
        │   ├── card.scss
        │   ├── forms.scss
        │   ├── icons.scss
        │   ├── menu.scss
        │   ├── modal.scss
        │   ├── progress.scss
        │   └── table.scss
        │
        ├── layout
        │   ├── footer.scss
        │   ├── grid.scss
        │   ├── header.scss
        │   ├── navigation.scss
        │   └── sidebar.scss
        │
        ├── pages
        │   └── home.scss
        │
        ├── themes
        │   └── theme.scss
        │
        ├── vendor
        │
        └── main.scss

Installation

node js is required -> download

package.json is require in your project

npm init -y

npm i create-scss

You should find a scss directory at the root of your project. All depedencies you need to compile you scss are located on node_modules folder.

Dependencies installed with this package

• sass
• postcss-cli
• autoprefixer
• npm-run-all
• fs-extra

Usage

After the installation you can use any tool to compile your sass into css, but if you want to make the best out of this package, use the scripts below.

Make sure all your scss files are imported in your main.scss

Compile your scss into css, everytime you save

npm run cs-watch

Compile your scss into css once

npm run cs-compile

Make your css ready for production (it will compile, prefix and compress your scss).

npm run cs-build

Changing name of commands

By default the commands are prefixed with *cs- to make sure it wont overwrite others scripts inside your package.json

You can remove that prefix or rename the commands in the package.json to suit your need.

default

"scripts": {
    "cs-watch": "sass scss/main.scss css/style.css --watch --no-source-map",
    "cs-compile": "sass scss/main.scss css/style.css --no-source-map",
    "cs-compress": "sass scss/main.scss css/style.css --style=compressed --no-source-map",
    "cs-prefix": "postcss css/style.css -o css/style.css --use autoprefixer -b 'last 4 versions' --no-source-map",
    "cs-build": "npm-run-all cs-compile cs-compress cs-prefix"
  },

Example of custom name

"scripts": {
    "dev": "sass scss/main.scss css/style.css --watch --no-source-map",
    "compile": "sass scss/main.scss css/style.css --no-source-map",
    "minify": "sass scss/main.scss css/style.css --style=compressed --no-source-map",
    "add-prefixes": "postcss css/style.css -o css/style.css --use autoprefixer -b 'last 4 versions' --no-source-map",
    "production": "npm-run-all cs-compile cs-compress cs-prefix"
  },

Versions

2.7.1

• Adapt responsive helper to match new breakpoints strategy
• Change class from responsive-helper to debug
• Change some css that affect the visual of the helper
• Now showing visual feedback of (small, medium, large and xlarge)

2.7.0

• Simplify breakpoints, with mobile first approach
• path: scss/abstracts/_mixins.scss
• code example:

#mixin
$small: 600px;
$medium: 1024px;
$large: 1440px;
$xlarge: 1920px;

@mixin breakpoint($breakpoint) {
  @if $breakpoint == small {
    @media (min-width: $small) {
      @content;
    }
  } @else if $breakpoint == medium {
    @media (min-width: $medium) {
      @content;
    }
  } @else if $breakpoint == large {
    @media (min-width: $large) {
      @content;
    }
  }
  @else if $breakpoint == xlarge {
    @media (min-width: $xlarge) {
      @content;
    }
  }
}

#usage
body {
  background:red;
  @include breakpoint(small){
    background:green;
  }
  @include breakpoint(medium){
    background:blue;
  }
  @include breakpoint(large){
    background:orange;
  }
  @include breakpoint(xlarge){
    background:pink;
  }
}

2.6.1

• Add support to documentation

2.6.0

• Replace deprecated node-sass/LibSass *source.
• Add sass using dart-sass
• Change scripts in package.json to match new sass librairy

2.5.5

• Add responsive helper to create an breakpoint indicator inside your markup file. To use it add the snippet below to you html document.

<span class="responsive-helper"></span>

• Clean breakpoint mixin in mixins.scss

2.5.4

• Remove duplicate of @import "components/table"; in main.scss

2.5.3

• Update documentation + add page to github registry

2.5.2

• Update documentation

2.5.1

• Add normalize.css in the _reset.scss partial

2.5.0

• Installing the package will not overwrite existing scss folder in your project 👏
• If you do not have a scss folder, it will be added with the full starter structure 🗂
• If you already have a scss folder, it will simply added files from the starter structure to it 📄

2.4.0

• Add commands to compile your sass in css directly to your package.json, no more copy-pasting require to start working on your project 👍

2.2.2

• Prevent package.json to be overwrited by installation 😉

2.1.2

• minor fixes ⚡

2.1.1

• minor fixes ⚡

2.1.0

• Add new partials in components directory
• Remove _breadcrums.scss
• Rename _progressbar.scss by _progress.scss
• Reorganize main.scss

Contribution

If you want to contribute to this project go to the create-scss repo and open an issue ✌️

Show your support be giving a ⭐ on Github

🙋‍♂️ Author

Maxime Daraize

Github Codepen