├── .gitignore ├── LICENSE ├── README.md ├── gulp3file.js ├── gulpfile.js ├── index.html ├── package.json └── src ├── images ├── cave-0600.jpg ├── cave-1200.jpg ├── cave-1800.jpg └── icons │ ├── alert.svg │ ├── fast.svg │ └── reload.svg └── scss ├── base ├── _base.scss ├── _layout.scss └── _normalize.scss ├── components ├── _footer.scss ├── _header.scss ├── _iconlist.scss └── _linklist.scss ├── helpers ├── _mixins.scss └── _variables.scss └── main.scss /.gitignore: -------------------------------------------------------------------------------- 1 | build/ 2 | 3 | node_modules 4 | 5 | .npm 6 | package-lock.json 7 | npm-debug.log* 8 | 9 | logs 10 | *.log 11 | 12 | .DS_Store 13 | Thumbs.db 14 | 15 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2018 Craig Buckler 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gulp-css 2 | This provides an example Gulp.js project which automates CSS tasks including: 3 | 4 | * optimizing images 5 | * compiling Sass .scss files 6 | * handling and inlining assets 7 | * automatically appending vendor prefixes 8 | * removing unused CSS selectors 9 | * minifying CSS 10 | * reporting file sizes 11 | * outputing sourcemaps for use in browser devtools 12 | * live-reloading CSS in a browser when source files change. 13 | 14 | 15 | ## Installation 16 | To install on any Linux, Mac OS or Windows system, ensure [Node.js](https://nodejs.org/) is installed then clone the repository: 17 | 18 | ```bash 19 | git clone https://github.com/craigbuckler/gulp-css.git 20 | ``` 21 | 22 | Navigate to the folder: 23 | 24 | ```bash 25 | cd gulp-css 26 | ``` 27 | 28 | Install dependencies: 29 | 30 | ```bash 31 | npm i gulp-cli -g 32 | npm i 33 | ``` 34 | 35 | Note that module versions have been fixed to guarantee compatibility. Run `npm outdated` and update `package.json` as necessary. 36 | 37 | 38 | ## Usage 39 | Run in live-reloading development mode: 40 | 41 | ```bash 42 | gulp 43 | ``` 44 | 45 | Navigate to `http://localhost:8000/` or the `External` URL if accessing from another device. Further instructions are shown on the index page. 46 | 47 | 48 | ## Build production CSS 49 | Set `NODE_ENV` to `production` so Gulp tasks produce final code, i.e. remove unused CSS, minify files, and disable sourcemap generation. 50 | 51 | Linux/Mac OS: 52 | 53 | ```bash 54 | NODE_ENV=production 55 | gulp css 56 | ``` 57 | 58 | (or inline `NODE_ENV=production gulp css`) 59 | 60 | Windows Powershell: 61 | 62 | ```powershell 63 | $env:NODE_ENV="production" 64 | gulp css 65 | ``` 66 | 67 | Windows legacy command line: 68 | 69 | ```cmd 70 | set NODE_ENV=production 71 | gulp css 72 | ``` 73 | -------------------------------------------------------------------------------- /gulp3file.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | 3 | 'use strict'; 4 | 5 | /**************** Gulp.js 3 configuration ****************/ 6 | 7 | const 8 | 9 | // development or production 10 | devBuild = ((process.env.NODE_ENV || 'development').trim().toLowerCase() === 'development'), 11 | 12 | // directory locations 13 | dir = { 14 | src : 'src/', 15 | build : 'build/' 16 | }, 17 | 18 | // modules 19 | gulp = require('gulp'), 20 | del = require('del'), 21 | noop = require('gulp-noop'), 22 | newer = require('gulp-newer'), 23 | size = require('gulp-size'), 24 | imagemin = require('gulp-imagemin'), 25 | sass = require('gulp-sass'), 26 | postcss = require('gulp-postcss'), 27 | sourcemaps = devBuild ? require('gulp-sourcemaps') : null, 28 | browsersync = devBuild ? require('browser-sync').create() : null; 29 | 30 | 31 | console.log('Gulp', devBuild ? 'development' : 'production', 'build'); 32 | 33 | 34 | /**************** clean task ****************/ 35 | 36 | gulp.task('clean', () => { 37 | 38 | del([ dir.build ]); 39 | 40 | }); 41 | 42 | 43 | /**************** images task ****************/ 44 | 45 | const imgConfig = { 46 | src : dir.src + 'images/**/*', 47 | build : dir.build + 'images/', 48 | 49 | minOpts: { 50 | optimizationLevel: 5 51 | } 52 | }; 53 | 54 | gulp.task('images', () => 55 | 56 | gulp.src(imgConfig.src) 57 | .pipe(newer(imgConfig.build)) 58 | .pipe(imagemin(imgConfig.minOpts)) 59 | .pipe(size({ showFiles:true })) 60 | .pipe(gulp.dest(imgConfig.build)) 61 | 62 | ); 63 | 64 | 65 | /**************** CSS task ****************/ 66 | 67 | const cssConfig = { 68 | 69 | src : dir.src + 'scss/main.scss', 70 | watch : dir.src + 'scss/**/*', 71 | build : dir.build + 'css/', 72 | sassOpts: { 73 | sourceMap : devBuild, 74 | outputStyle : 'nested', 75 | imagePath : '/images/', 76 | precision : 3, 77 | errLogToConsole : true 78 | }, 79 | 80 | postCSS: [ 81 | require('postcss-assets')({ 82 | loadPaths: ['images/'], 83 | basePath: dir.build 84 | }), 85 | require('autoprefixer')({ 86 | browsers: ['> 1%'] 87 | }) 88 | ] 89 | 90 | }; 91 | 92 | // remove unused selectors and minify production CSS 93 | if (!devBuild) { 94 | 95 | cssConfig.postCSS.push( 96 | require('usedcss')({ html: ['index.html'] }), 97 | require('cssnano') 98 | ); 99 | 100 | } 101 | 102 | gulp.task('css', ['images'], () => 103 | 104 | gulp.src(cssConfig.src) 105 | .pipe(sourcemaps ? sourcemaps.init() : noop()) 106 | .pipe(sass(cssConfig.sassOpts).on('error', sass.logError)) 107 | .pipe(postcss(cssConfig.postCSS)) 108 | .pipe(sourcemaps ? sourcemaps.write() : noop()) 109 | .pipe(size({ showFiles:true })) 110 | .pipe(gulp.dest(cssConfig.build)) 111 | .pipe(browsersync ? browsersync.reload({ stream: true }) : noop()) 112 | 113 | ); 114 | 115 | 116 | /**************** server task ****************/ 117 | 118 | const syncConfig = { 119 | server: { 120 | baseDir : './', 121 | index : 'index.html' 122 | }, 123 | port : 8000, 124 | open : false 125 | }; 126 | 127 | // browser-sync 128 | gulp.task('server', () => 129 | browsersync ? browsersync.init(syncConfig) : null 130 | ); 131 | 132 | 133 | /**************** watch task ****************/ 134 | 135 | gulp.task('default', ['css', 'server'], () => { 136 | 137 | // image changes 138 | gulp.watch(imgConfig.src, ['images']); 139 | 140 | // CSS changes 141 | gulp.watch(cssConfig.watch, ['css']); 142 | 143 | }); 144 | 145 | 146 | })(); 147 | -------------------------------------------------------------------------------- /gulpfile.js: -------------------------------------------------------------------------------- 1 | (() => { 2 | 3 | 'use strict'; 4 | 5 | /**************** Gulp.js 4 configuration ****************/ 6 | 7 | const 8 | 9 | // development or production 10 | devBuild = ((process.env.NODE_ENV || 'development').trim().toLowerCase() === 'development'), 11 | 12 | // directory locations 13 | dir = { 14 | src : 'src/', 15 | build : 'build/' 16 | }, 17 | 18 | // modules 19 | gulp = require('gulp'), 20 | del = require('del'), 21 | noop = require('gulp-noop'), 22 | newer = require('gulp-newer'), 23 | size = require('gulp-size'), 24 | imagemin = require('gulp-imagemin'), 25 | sass = require('gulp-sass')(require('sass')), 26 | postcss = require('gulp-postcss'), 27 | sourcemaps = devBuild ? require('gulp-sourcemaps') : null, 28 | browsersync = devBuild ? require('browser-sync').create() : null; 29 | 30 | 31 | console.log('Gulp', devBuild ? 'development' : 'production', 'build'); 32 | 33 | 34 | /**************** clean task ****************/ 35 | 36 | function clean() { 37 | 38 | return del([ dir.build ]); 39 | 40 | } 41 | exports.clean = clean; 42 | exports.wipe = clean; 43 | 44 | 45 | /**************** images task ****************/ 46 | 47 | const imgConfig = { 48 | src : dir.src + 'images/**/*', 49 | build : dir.build + 'images/', 50 | 51 | minOpts: { 52 | optimizationLevel: 5 53 | } 54 | }; 55 | 56 | function images() { 57 | 58 | return gulp.src(imgConfig.src) 59 | .pipe(newer(imgConfig.build)) 60 | .pipe(imagemin(imgConfig.minOpts)) 61 | .pipe(size({ showFiles:true })) 62 | .pipe(gulp.dest(imgConfig.build)); 63 | 64 | } 65 | exports.images = images; 66 | 67 | 68 | /**************** CSS task ****************/ 69 | 70 | const cssConfig = { 71 | 72 | src : dir.src + 'scss/main.scss', 73 | watch : dir.src + 'scss/**/*', 74 | build : dir.build + 'css/', 75 | sassOpts: { 76 | sourceMap : devBuild, 77 | outputStyle : 'compressed', 78 | imagePath : '/images/', 79 | precision : 3, 80 | errLogToConsole : true 81 | }, 82 | 83 | postCSS: [ 84 | require('postcss-assets')({ 85 | loadPaths: ['images/'], 86 | basePath: dir.build 87 | }), 88 | require('autoprefixer')({ 89 | browsers: ['> 1%'] 90 | }) 91 | ] 92 | 93 | }; 94 | 95 | // remove unused selectors and minify production CSS 96 | if (!devBuild) { 97 | 98 | cssConfig.postCSS.push( 99 | require('usedcss')({ html: ['index.html'] }), 100 | require('cssnano') 101 | ); 102 | 103 | } 104 | 105 | function css() { 106 | 107 | return gulp.src(cssConfig.src) 108 | .pipe(sourcemaps ? sourcemaps.init() : noop()) 109 | .pipe(sass(cssConfig.sassOpts).on('error', sass.logError)) 110 | .pipe(postcss(cssConfig.postCSS)) 111 | .pipe(sourcemaps ? sourcemaps.write() : noop()) 112 | .pipe(size({ showFiles:true })) 113 | .pipe(gulp.dest(cssConfig.build)) 114 | .pipe(browsersync ? browsersync.reload({ stream: true }) : noop()); 115 | 116 | } 117 | exports.css = gulp.series(images, css); 118 | 119 | 120 | /**************** server task (now private) ****************/ 121 | 122 | const syncConfig = { 123 | server: { 124 | baseDir : './', 125 | index : 'index.html' 126 | }, 127 | port : 8000, 128 | open : false 129 | }; 130 | 131 | // browser-sync 132 | function server(done) { 133 | if (browsersync) browsersync.init(syncConfig); 134 | done(); 135 | } 136 | 137 | 138 | /**************** watch task ****************/ 139 | 140 | function watch(done) { 141 | 142 | // image changes 143 | gulp.watch(imgConfig.src, images); 144 | 145 | // CSS changes 146 | gulp.watch(cssConfig.watch, css); 147 | 148 | done(); 149 | 150 | } 151 | 152 | /**************** default task ****************/ 153 | 154 | exports.default = gulp.series(exports.css, watch, server); 155 | 156 | })(); 157 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Using Gulp.js for CSS tasks 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 |

photo by Kevin Lanceplaine

20 | 21 |
22 | 23 |
24 | 25 |
26 | 27 |

Using Gulp.js for CSS tasks

28 | 29 |

Gulp.js is a Node.js task runner which can aid your CSS workflow:

30 | 31 | 36 | 37 | 38 |

Installation

39 | 40 |

To install on any Linux, Mac OS or Windows system, ensure Node.js is installed then clone the repository:

41 | 42 | 
git clone https://github.com/craigbuckler/gulp-css.git
43 | 44 |

Navigate to the folder:

45 | 46 | 
cd gulp-css
47 | 48 |

Install dependencies:

49 | 50 | 
npm i gulp-cli -g
 51 | npm i
52 | 53 | 54 |

Folders

55 | 56 |

A demonstration index.html file is provided in the root folder. Other folders and files:

57 | 58 | 64 | 65 | 66 |

Development usage

67 | 68 |

Run in live-reloading development mode:

69 | 70 | 
gulp
71 | 72 |

Navigate to http://localhost:8000/ or the External URL reported if accessing from another device.

73 | 74 | 75 |

Production build

76 | 77 |

gulp clean can be used to delete the build folder if necessary.

78 | 79 |

To build final minified files, set the NODE_ENV environment variable to production before running the gulp css task. On Linux or Mac OS:

80 | 81 | 
NODE_ENV=production
 82 | gulp css
83 | 84 |

(Alternatively, run inline using NODE_ENV=production gulp css)

85 | 86 |

Windows Powershell:

87 | 88 | 
$env:NODE_ENV="production"
 89 | gulp css
90 | 91 |

Windows legacy command line:

92 | 93 | 
set NODE_ENV=production
 94 | gulp css
95 | 96 | 97 |

Modules used

98 | 99 |

The following Gulp.js modules/plugins have been used:

100 | 101 | 113 | 114 |

The following PostCSS plugins have been used:

115 | 116 | 122 | 123 |
124 | 125 |
126 | 127 | 136 | 137 | 138 | 139 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gulp-css", 3 | "version": "1.0.0", 4 | "description": "Using Gulp.js for CSS tasks", 5 | "main": "index.js", 6 | "scripts": { 7 | "build": "gulp css", 8 | "test": "echo \"Error: no test specified\" && exit 1" 9 | }, 10 | "repository": { 11 | "type": "git", 12 | "url": "git+https://github.com/craigbuckler/gulp-css.git" 13 | }, 14 | "keywords": [ 15 | "gulp", 16 | "css" 17 | ], 18 | "author": "Craig Buckler", 19 | "license": "MIT", 20 | "bugs": { 21 | "url": "https://github.com/craigbuckler/gulp-css/issues" 22 | }, 23 | "homepage": "https://github.com/craigbuckler/gulp-css#readme", 24 | "dependencies": { 25 | "autoprefixer": "10.4.3", 26 | "cssnano": "5.1.4", 27 | "del": "6.0.0", 28 | "gulp": "4.0.2", 29 | "gulp-imagemin": "^7.1.0", 30 | "gulp-newer": "1.4.0", 31 | "gulp-noop": "1.0.1", 32 | "gulp-postcss": "9.0.1", 33 | "gulp-sass": "5.1.0", 34 | "gulp-size": "4.0.1", 35 | "gulp-sourcemaps": "3.0.0", 36 | "postcss-assets": "6.0.0", 37 | "sass": "^1.49.9", 38 | "usedcss": "1.0.7" 39 | }, 40 | "devDependencies": { 41 | "browser-sync": "2.27.9" 42 | } 43 | } 44 | -------------------------------------------------------------------------------- /src/images/cave-0600.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/craigbuckler/gulp-css/89ffcbbb97b7ea77061ed19ed36ecf6e68fdac03/src/images/cave-0600.jpg -------------------------------------------------------------------------------- /src/images/cave-1200.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/craigbuckler/gulp-css/89ffcbbb97b7ea77061ed19ed36ecf6e68fdac03/src/images/cave-1200.jpg -------------------------------------------------------------------------------- /src/images/cave-1800.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/craigbuckler/gulp-css/89ffcbbb97b7ea77061ed19ed36ecf6e68fdac03/src/images/cave-1800.jpg -------------------------------------------------------------------------------- /src/images/icons/alert.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/images/icons/fast.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/images/icons/reload.svg: -------------------------------------------------------------------------------- 1 | 2 | -------------------------------------------------------------------------------- /src/scss/base/_base.scss: -------------------------------------------------------------------------------- 1 | // Base styles 2 | :root { 3 | font-size: $font-size-rwd; 4 | } 5 | 6 | body { 7 | font-family: $font-main; 8 | font-size: $font-size; 9 | font-weight: 300; 10 | line-height: 1.2; 11 | @include reset; 12 | color: $color-text; 13 | background-color: $color-back; 14 | } 15 | 16 | h1, h2 { 17 | font-size: 2em; 18 | font-weight: 500; 19 | margin: 1.8em 0 0 0; 20 | } 21 | 22 | h2 { 23 | font-size: 1.5em; 24 | } 25 | 26 | p { 27 | margin: 1em 0 0 0; 28 | } 29 | 30 | h1 + p, h2 + p { 31 | margin-top: 0.25em; 32 | } 33 | 34 | ul { 35 | list-style-type: square; 36 | padding: 0; 37 | margin: 1em 0 1.5em 3em; 38 | } 39 | 40 | li { 41 | padding: 0; 42 | margin: 0.6em 0; 43 | } 44 | 45 | pre { 46 | white-space: pre; 47 | padding: 0.2em 0.4em; 48 | margin: 1em 0 1.5em 3em; 49 | background-color: $color-code; 50 | border-radius: 0.2em; 51 | overflow-x: auto; 52 | } 53 | 54 | code { 55 | font-family: $font-code; 56 | font-size: 1em; 57 | background-color: $color-code; 58 | border-radius: 0.2em; 59 | } 60 | 61 | strong { 62 | font-weight: 600; 63 | } 64 | 65 | :not(pre) > code { 66 | padding: 0.1em 0.3em; 67 | } 68 | 69 | a:link, a:visited { 70 | font-weight: 400; 71 | text-decoration: none; 72 | color: $color-link; 73 | } 74 | 75 | a:hover, a:active { 76 | text-decoration: underline; 77 | text-decoration-skip-ink: auto; 78 | color: $color-hovr; 79 | } 80 | -------------------------------------------------------------------------------- /src/scss/base/_layout.scss: -------------------------------------------------------------------------------- 1 | // CSS Grid layout 2 | 3 | main { 4 | max-width: 44em; 5 | padding: 0 2em; 6 | margin: 0 auto; 7 | } 8 | 9 | @supports (display: grid) { 10 | 11 | main { 12 | max-width: none; 13 | @include reset; 14 | display: grid; 15 | grid-gap: 0; 16 | grid-template-columns: 17 | [full-start] minmax(2em, 1fr) 18 | [main-start] minmax(10em, 40em) [main-end] 19 | minmax(2em, 1fr) [full-end]; 20 | } 21 | 22 | main > * { 23 | grid-column: main; 24 | } 25 | 26 | main > .full { 27 | grid-column: full; 28 | } 29 | 30 | } 31 | -------------------------------------------------------------------------------- /src/scss/base/_normalize.scss: -------------------------------------------------------------------------------- 1 | // Normalize styles 2 | 3 | // border-box by default 4 | *, *:before, *:after { 5 | box-sizing: border-box; 6 | } 7 | 8 | // HTML5 block elements 9 | article, 10 | aside, 11 | footer, 12 | header, 13 | main, 14 | nav, 15 | section { 16 | display: block; 17 | } 18 | -------------------------------------------------------------------------------- /src/scss/components/_footer.scss: -------------------------------------------------------------------------------- 1 | // page footer 2 | footer { 3 | 4 | padding: 1em; 5 | margin: 2em 0 0 0; 6 | background-color: $color-foot; 7 | 8 | p { 9 | text-align: center; 10 | margin: 0.7em 0; 11 | } 12 | 13 | } 14 | -------------------------------------------------------------------------------- /src/scss/components/_header.scss: -------------------------------------------------------------------------------- 1 | // page header 2 | header { 3 | 4 | position: relative; 5 | height: 40vh; 6 | overflow: hidden; 7 | 8 | picture, img { 9 | display: block; 10 | width: 100%; 11 | height: 100%; 12 | } 13 | 14 | img { 15 | object-fit: cover; 16 | } 17 | 18 | p { 19 | position: absolute; 20 | right: 0; 21 | bottom: 0; 22 | font-size: 0.8rem; 23 | margin: 0.6em; 24 | } 25 | 26 | a:link, a:visited { 27 | text-decoration: none; 28 | color: $color-back; 29 | } 30 | 31 | } 32 | -------------------------------------------------------------------------------- /src/scss/components/_iconlist.scss: -------------------------------------------------------------------------------- 1 | // icon list 2 | .iconlist { 3 | display: flex; 4 | flex-flow: row wrap; 5 | justify-content: space-around; 6 | list-style-type: none; 7 | @include reset; 8 | } 9 | 10 | .iconlist > * { 11 | max-width: 7em; 12 | font-weight: 500; 13 | text-align: center; 14 | padding: 7em 0 0 0; 15 | margin: 1em; 16 | background: inline('icons/fast.svg') 50% 0 no-repeat; 17 | background-size: contain; 18 | } 19 | 20 | .reload { 21 | background-image: inline('icons/reload.svg'); 22 | } 23 | 24 | .alert { 25 | background-image: inline('icons/alert.svg'); 26 | } 27 | -------------------------------------------------------------------------------- /src/scss/components/_linklist.scss: -------------------------------------------------------------------------------- 1 | .linklist { 2 | 3 | a, code { 4 | display: inline-block; 5 | width: 9em; 6 | } 7 | 8 | } 9 | -------------------------------------------------------------------------------- /src/scss/helpers/_mixins.scss: -------------------------------------------------------------------------------- 1 | // Generic Sass mixins 2 | 3 | // reset padding and margin 4 | @mixin reset { 5 | padding: 0; 6 | margin: 0; 7 | } 8 | -------------------------------------------------------------------------------- /src/scss/helpers/_variables.scss: -------------------------------------------------------------------------------- 1 | // Global Sass variables 2 | 3 | // fonts 4 | $font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; 5 | $font-code: monospace; 6 | $font-size: 100%; 7 | $font-size-rwd: calc(0.8em + 0.5vmax); 8 | 9 | // colors 10 | $color-back: #fff; 11 | $color-text: #444; 12 | $color-foot: #cbd; 13 | $color-code: #eee; 14 | $color-link: #00c; 15 | $color-hovr: #c00; 16 | -------------------------------------------------------------------------------- /src/scss/main.scss: -------------------------------------------------------------------------------- 1 | // import all styles 2 | 3 | // helpers 4 | @import 'helpers/_variables'; 5 | @import 'helpers/_mixins'; 6 | 7 | // base 8 | @import 'base/_normalize'; 9 | @import 'base/_base'; 10 | @import 'base/_layout'; 11 | 12 | // components 13 | @import 'components/_header'; 14 | @import 'components/_footer'; 15 | @import 'components/_iconlist'; 16 | @import 'components/_linklist'; 17 | --------------------------------------------------------------------------------