Use Multiple SASS Files

Use multiple SASS files

What Rich Bradshaw mentions is correct, however here is another approach that you could take.

Create 1 scss file called combined.scss (for example) then inside of this file @import all your scss files, then simply run sass --style compressed --watch combined.scss:combined.css and it will detect changes to the imported scss files and recompile as needed.

Combined.scss example:

@import "reset";
@import "layout";
@import "styles";
@import "ie";

So when you make a change to the layout.scss file combined.scss will recompile and all your actual html pages will need to reference is combined.css.

But like I said, Rich Bradshaw's solution will work just as well and depending on the project you're working on might be better to use.

Import multiple SCSS files into one SCSS file and compile to one CSS file

This is the config I use :

• Installs

npm i node-sass-glob-importer
npm i --global gulp-cli
    
npm i sass gulp-sass --save-dev
npm i gulp-sass-glob --save-dev
npm i gulp-sourcemaps
npm i gulp-concat
npm i gulp-uglify

• gulpfile.js :

const { src, dest } = require('gulp');

const
sourcemaps = require('gulp-sourcemaps'),
sassGlob = require('gulp-sass-glob'),
sass = require('gulp-sass')(require('sass')),
concat = require('gulp-concat'),
uglify = require('gulp-uglify');

function scss() {
return src(['./dev/assets/_scss/main.scss'])
.pipe(sourcemaps.init({largeFile: true}))
.pipe(sassGlob())
.pipe(sass())
.pipe(concat('theme.min.css'))
.pipe(sourcemaps.write('.', {debug: true}))
.pipe(dest('dev/assets/css'));
};
exports.scss = scss;

function js() {
return src('./dev/assets/_scripts/**/*.js') 
.pipe(uglify()) 
.pipe(sourcemaps.init())  
.pipe(concat('theme.min.js')) 
.pipe(sourcemaps.write('.')) 
.pipe(dest('dev/assets/js'));
};
exports.js = js;

main.scss contains imports like @import 'folder/*'; or @import 'file.scss';

Then you can call gulp scss and gulp js

SASS - use variables across multiple files

This question was asked a long time ago so I thought I'd post an updated answer.

You should now avoid using @import. Taken from the docs:

Sass will gradually phase it out over the next few years, and
eventually remove it from the language entirely. Prefer the @use rule
instead.

A full list of reasons can be found here

You should now use @use as shown below:

_variables.scss

$text-colour: #262626;

_otherFile.scss

@use 'variables'; // Path to _variables.scss Notice how we don't include the underscore or file extension

body {
  // namespace.$variable-name
  // namespace is just the last component of its URL without a file extension
  color: variables.$text-colour;
}

You can also create an alias for the namespace:

_otherFile.scss

@use 'variables' as v;

body {
  // alias.$variable-name
  color: v.$text-colour;
}

EDIT As pointed out by @und3rdg at the time of writing (November 2020) @use is currently only available for Dart Sass and not LibSass (now deprecated) or Ruby Sass. See https://sass-lang.com/documentation/at-rules/use for the latest compatibility

Is it okay two import same .scss file to two different .scss file?

It is perfectly fine to import a variable.scss file as much times as necessary, but only if there is no styling in it, if you have other css selectors and styling applied to that file, then you will be getting duplication.

Is it possible to import a whole directory in sass using @import?

If you are using Sass in a Rails project, the sass-rails gem, https://github.com/rails/sass-rails, features glob importing.

@import "foo/*"     // import all the files in the foo folder
@import "bar/**/*"  // import all the files in the bar tree

To answer the concern in another answer "If you import a directory, how can you determine import order? There's no way that doesn't introduce some new level of complexity."

Some would argue that organizing your files into directories can REDUCE complexity.

My organization's project is a rather complex app. There are 119 Sass files in 17 directories. These correspond roughly to our views and are mainly used for adjustments, with the heavy lifting being handled by our custom framework. To me, a few lines of imported directories is a tad less complex than 119 lines of imported filenames.

To address load order, we place files that need to load first – mixins, variables, etc. — in an early-loading directory. Otherwise, load order is and should be irrelevant... if we are doing things properly.

Should I combine my SASS output (multiple files) into a single file? If so, how?

Look into files called "Partials". You would name your files like this

_buttons.scss
_lists.scss

Then create a main.scss file(name it whatever you want). enter

@import buttons
@import lists

Then convert your main.scss file to css. You will have one css file. You can read up on this at the SASS website

http://sass-lang.com/guide

If you use SMACSS or other methods, in each directory you would do this. For instance a layout directory

Layout
_buttons.scss
_list.scss
_layout-dir.scss

In the layout-dir file you would import all the files in the layout directory
then in your main.scss file you would only import each directory file

@import layout/layout-dir
@import basics/base-dir

etc

Your variable and mixins files would also import into the main.scss file, include them first so everything has access to them

https://www.youtube.com/watch?v=GI1BhlDtoUs

---

Related Topics