├── .gitattributes
├── .gitignore
├── .vscode
└── settings.json
├── README.md
├── app
├── js
│ └── script.js
├── scss-old
│ ├── globals
│ │ ├── _index.scss
│ │ ├── boilerplate.scss
│ │ └── colors.scss
│ ├── style.scss
│ └── util
│ │ ├── _index.scss
│ │ ├── border-radius.scss
│ │ └── breakpoints.scss
└── scss
│ ├── globals
│ ├── _index.scss
│ ├── boilerplate.scss
│ └── colors.scss
│ ├── style.scss
│ └── util
│ ├── _index.scss
│ ├── border-radius.scss
│ └── breakpoints.scss
├── gulpfile.js
├── index.html
├── lib
└── library.scss
├── package-lock.json
└── package.json
/.gitattributes:
--------------------------------------------------------------------------------
1 | # Auto detect text files and perform LF normalization
2 | * text=auto
3 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules/
2 | dist/
3 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "compile-hero.disable-compile-files-on-did-save-code": true
3 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Sass Modules Demo
2 |
3 | Source code for project comparing the old Sass `@import` with the new `@use` and `@forward`.
4 |
5 | YouTube link: TBD
6 |
--------------------------------------------------------------------------------
/app/js/script.js:
--------------------------------------------------------------------------------
1 | console.log('HELLO');
2 |
3 | const test = () => {
4 | console.log('this is a test');
5 | };
6 |
--------------------------------------------------------------------------------
/app/scss-old/globals/_index.scss:
--------------------------------------------------------------------------------
1 | @import 'boilerplate';
2 | @import 'colors';
3 |
--------------------------------------------------------------------------------
/app/scss-old/globals/boilerplate.scss:
--------------------------------------------------------------------------------
1 | html {
2 | font-size: 100%;
3 | box-sizing: border-box;
4 | }
5 |
6 | *,
7 | *::before,
8 | *::after {
9 | box-sizing: inherit;
10 | }
11 |
12 | body {
13 | margin: 0;
14 | padding: 2rem;
15 | background: var(--black);
16 | color: var(--white);
17 |
18 | @include breakpoint(medium) {
19 | padding: 0;
20 | }
21 | }
22 |
23 | .rounded-corners {
24 | border-radius: $border-radius;
25 | }
26 |
--------------------------------------------------------------------------------
/app/scss-old/globals/colors.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --white: hsl(0, 0%, 100%);
3 | --black: hsl(0, 0%, 0%);
4 | }
5 |
--------------------------------------------------------------------------------
/app/scss-old/style.scss:
--------------------------------------------------------------------------------
1 | @import '../../lib/library.scss';
2 |
3 | @import 'util';
4 | @import 'globals';
5 |
--------------------------------------------------------------------------------
/app/scss-old/util/_index.scss:
--------------------------------------------------------------------------------
1 | @import 'breakpoints';
2 | @import 'border-radius';
3 |
--------------------------------------------------------------------------------
/app/scss-old/util/border-radius.scss:
--------------------------------------------------------------------------------
1 | $border-radius: 0.5rem;
2 |
--------------------------------------------------------------------------------
/app/scss-old/util/breakpoints.scss:
--------------------------------------------------------------------------------
1 | // 640px, 1150px, 1400px
2 | $breakpoints-up: (
3 | 'medium': '40em',
4 | 'large': '71.875em',
5 | 'xlarge': '87.5em',
6 | );
7 |
8 | // 639px, 1149px, 1399px
9 | $breakpoints-down: (
10 | 'small': '39.9375em',
11 | 'medium': '71.8125em',
12 | 'large': '87.4375em',
13 | );
14 |
15 | @mixin breakpoint($size) {
16 | @media (min-width: map-get($breakpoints-up, $size)) {
17 | @content;
18 | }
19 | }
20 |
21 | @mixin breakpoint-down($size) {
22 | @media (max-width: map-get($breakpoints-down, $size)) {
23 | @content;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/app/scss/globals/_index.scss:
--------------------------------------------------------------------------------
1 | @forward 'boilerplate';
2 | @forward 'colors';
3 |
--------------------------------------------------------------------------------
/app/scss/globals/boilerplate.scss:
--------------------------------------------------------------------------------
1 | @use '../util';
2 | @use '../../../lib/library.scss';
3 |
4 | html {
5 | font-size: 100%;
6 | box-sizing: border-box;
7 | }
8 |
9 | *,
10 | *::before,
11 | *::after {
12 | box-sizing: inherit;
13 | }
14 |
15 | body {
16 | margin: 0;
17 | padding: 2rem;
18 | background: var(--black);
19 | color: var(--white);
20 |
21 | @include util.breakpoint(medium) {
22 | padding: 0;
23 | }
24 | }
25 |
26 | .rounded-corners {
27 | border-radius: library.$border-radius;
28 | }
29 |
--------------------------------------------------------------------------------
/app/scss/globals/colors.scss:
--------------------------------------------------------------------------------
1 | :root {
2 | --white: hsl(0, 0%, 100%);
3 | --black: hsl(0, 0%, 0%);
4 | }
5 |
--------------------------------------------------------------------------------
/app/scss/style.scss:
--------------------------------------------------------------------------------
1 | //@import '../../lib/library.scss';
2 |
3 | //@import 'util';
4 | @forward 'globals';
5 |
--------------------------------------------------------------------------------
/app/scss/util/_index.scss:
--------------------------------------------------------------------------------
1 | @forward 'breakpoints';
2 | @forward 'border-radius';
3 |
--------------------------------------------------------------------------------
/app/scss/util/border-radius.scss:
--------------------------------------------------------------------------------
1 | $border-radius: 0.5rem;
2 |
--------------------------------------------------------------------------------
/app/scss/util/breakpoints.scss:
--------------------------------------------------------------------------------
1 | // 640px, 1150px, 1400px
2 | $breakpoints-up: (
3 | 'medium': '40em',
4 | 'large': '71.875em',
5 | 'xlarge': '87.5em',
6 | );
7 |
8 | // 639px, 1149px, 1399px
9 | $breakpoints-down: (
10 | 'small': '39.9375em',
11 | 'medium': '71.8125em',
12 | 'large': '87.4375em',
13 | );
14 |
15 | @mixin breakpoint($size) {
16 | @media (min-width: map-get($breakpoints-up, $size)) {
17 | @content;
18 | }
19 | }
20 |
21 | @mixin breakpoint-down($size) {
22 | @media (max-width: map-get($breakpoints-down, $size)) {
23 | @content;
24 | }
25 | }
26 |
--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
1 | // Initialize modules
2 | const { src, dest, watch, series } = require('gulp');
3 | const sass = require('gulp-sass')(require('sass'));
4 | const postcss = require('gulp-postcss');
5 | const autoprefixer = require('autoprefixer');
6 | const cssnano = require('cssnano');
7 | const babel = require('gulp-babel');
8 | const terser = require('gulp-terser');
9 | const browsersync = require('browser-sync').create();
10 |
11 | // Sass Task
12 | function scssTask() {
13 | return (
14 | src('app/scss/style.scss', { sourcemaps: true })
15 | .pipe(sass())
16 | //.pipe(postcss([autoprefixer(), cssnano()]))
17 | .pipe(dest('dist', { sourcemaps: '.' }))
18 | );
19 | }
20 |
21 | // JavaScript Task
22 | function jsTask() {
23 | return src('app/js/script.js', { sourcemaps: true })
24 | .pipe(babel({ presets: ['@babel/preset-env'] }))
25 | .pipe(terser())
26 | .pipe(dest('dist', { sourcemaps: '.' }));
27 | }
28 |
29 | // Browsersync
30 | function browserSyncServe(cb) {
31 | browsersync.init({
32 | server: {
33 | baseDir: '.',
34 | },
35 | notify: {
36 | styles: {
37 | top: 'auto',
38 | bottom: '0',
39 | },
40 | },
41 | });
42 | cb();
43 | }
44 | function browserSyncReload(cb) {
45 | browsersync.reload();
46 | cb();
47 | }
48 |
49 | // Watch Task
50 | function watchTask() {
51 | //watch('*.html', browserSyncReload);
52 | watch(
53 | ['app/scss/**/*.scss', 'app/**/*.js'],
54 | series(scssTask, jsTask) //, browserSyncReload
55 | );
56 | }
57 |
58 | // Default Gulp Task
59 | exports.default = series(scssTask, jsTask, watchTask); // browserSyncServe
60 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 | Website generated by Gulp and Sass Boilerplate Generator!
12 |
13 |
14 |
--------------------------------------------------------------------------------
/lib/library.scss:
--------------------------------------------------------------------------------
1 | $border-radius: 0.75rem;
2 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "gulp-sass-boilerplate",
3 | "version": "1.0.0",
4 | "description": "Minimal Gulp workflow to compile Sass",
5 | "keywords": [],
6 | "author": "Jessica Chan (Coder Coder)",
7 | "license": "ISC",
8 | "dependencies": {
9 | "@babel/core": "^7.14.8",
10 | "@babel/preset-env": "^7.14.8",
11 | "autoprefixer": "^10.2.6",
12 | "browser-sync": "^2.27.4",
13 | "cssnano": "^5.0.6",
14 | "gulp": "^4.0.2",
15 | "gulp-babel": "^8.0.0",
16 | "gulp-postcss": "^9.0.0",
17 | "gulp-sass": "^5.0.0",
18 | "gulp-terser": "^2.0.1",
19 | "postcss": "^8.3.5",
20 | "sass": "^1.35.2"
21 | },
22 | "browserslist": [
23 | "last 1 version",
24 | "IE 11",
25 | "> 1%"
26 | ]
27 | }
28 |
--------------------------------------------------------------------------------