SCSS Scratch

SCSS Scratch is a barebones structure/starting-point for SCSS-projects.

Download the repository and import it into your SASS-Processor or clone it:

git clone https://github.com/FrontEndNetWork/SCSS-Scratch

Then run:

npm install 

You're good to go now!

In the style.scss-file, you'll find the following config:

@use "node_modules/minireset.css/minireset";
@use '_globals/mixins';
@use '_globals/utilities' as *;
@use '_globals/variables' as *;
@use '_globals/colors';
@use '_globals/fonts';
@use "main";
@use "shame";

This includes a version of minireset.css, mixins and functions (e.g. rem-calculation) (_globals/mixins.scss), utilities of barebones.scss (_globals/utilities.scss) and documents for variables, colors and fonts which are set for the whole page.

If you need a flexbox-grid, you can uncomment the follwoing line:

// @use '_globals/grid';

Do your main styling in the main.scss-file. It it imported with:

@use "main";

For anything quick and dirty, which will be cleaned up later, you can use the shame.scss stylesheet. It it imported with:

@use "shame"

In /_modules/mod-logo.scss you'll find a file which can be used as an example for how the included mixins and utilities are used. Please remove this file before processing.

All text and code in this repository is licensed under WTFPL.

• Created by @philipbrembeck
• This is a fork & recreation of barebones