SASS cores.scss

cores.scss

/*----------------------------------------------------
@File: Core Styles
@Author: Wes Duff
Author E-mail: [email protected]

This is the core css for your application
- fonts
- base text sizes for h1-h6
---------------------------------------------------- */

/*=====================================================================

@Core Styles

Table of Content:
01/ mixins
02/ variables
03/ functions
04/ predefin
05/ fonts
06/ button
07/ header
08/ footer

=====================================================================*/

/*----------------------------------------------------*/
@import "mixins";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "variables";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "functions";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "predefin";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "fonts";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "button";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "header";
/*---------------------------------------------------- */

/*----------------------------------------------------*/
@import "footer";
/*---------------------------------------------------- */

Make sure to create these .scss files
_mixins.scss
_variables.scss
_functions.scss
_predefin.scss
_fonts.scss
_button.scss
_header.scss
_footer.scss

mixins
Contains all of the mixins that will be used for your application

variables
Contains the colors, font sizes, set widths etc.. any variable you may need in your application

functions
Contains any functions that need to be ran to build the correct CSS values that are needed in your application.

predefin
pre-defined sections of your code. The specific styling for tags such as the "a" tag, "i" etc... these are default styles for basic tags and custom tags

fonts
This is where you add all of your custom fonts, font-sizes, colors etc.. You can use your variables import here

button
Contains all the necessary CSS for the core styles and themes for your buttons

header
Necessary css for your header, your header should be a re-used partial.

footer
Necessary css for you footer, your footer should be a re-used partial.

Script should be ran to build your core.css file

script is added to your package.json file under scripts

"coreStyles": "sass SASS/core.scss public/css/core.css",

You will also need to include sass in your package manager under devdependencies

npm --save-dev sass

Example of mixins.scss

/* MIXINS
============================================================================================ */
@mixin core-layout {
    margin: 1.5em 0 1.5em 0;
    background-color:white;
    border-radius: 1em;
    padding: 2em;
}
/* End MIXINS
============================================================================================ */