I'm modularizing my stylesheets with SASS partials like so:
@import partials/header
@import partials/viewport
@import partials/footer
@import partials/forms
@import partials/list_container
@import partials/info_container
@import partials/notifications
@import partials/queues
Is there any way to include the whole partials directory(it's a directory full of SASS-partials) like @import compass or something?
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.
@import "*" (in application.css.scss) if your controller css/scss files are in the "app/assets/stylesheets" folder together with application.css.scss. –
Denominative @import "*" in application.scss includes all other files present in the same directory but doesn't re-include application.scss... I expected to get an infinite looping bug. –
Grappa !src/**/thatOneOddFileFromPackae.css –
Centesimal This feature will never be part of Sass. One major reason is import order. In CSS, the files imported last can override the styles stated before. If you import a directory, how can you determine import order? There's no way that doesn't introduce some new level of complexity. By keeping a list of imports (as you did in your example), you're being explicit with import order. This is essential if you want to be able to confidently override styles that are defined in another file or write mixins in one file and use them in another.
For a more thorough discussion, view this closed feature request here:
@import "/functions" or @import "partials/". –
Inherent _00_base.scss, _01_mixins.scss anyways, so importing the whole dir would save time for me. –
Jandel _middle-of-the-folder.scss could always potentially throw off the cascade, especially if you use--or begin to use--helpful Sass features like placeholders If you're writing CSS without the cascade, I would never want to work with you. –
Zlatoust Check out the sass-globbing project.
I create a file named __partials__.scss in the same directory of partials
|- __partials__.scss
|- /partials
|- __header__.scss
|- __viewport__.scss
|- ....
In __partials__.scss, I wrote these:
@import "partials/header";
@import "partials/viewport";
@import "partials/footer";
@import "partials/forms";
....
So, when I want import the whole partials, just write @import "partials". If I want import any of them, I can also write @import "partials/header".
@import 'partials/xyz' statements each time a new partial is created. –
Helsell forms and widgets directories, I can @import "forms"; @import "widgets" in the main CSS file for a page, and only worry about all the individual partials (@import forms/text; @import forms/button...) inside forms.scss and widgets.scss. –
Vermiculite It might be an old question, but still relevant in 2020, so I might post some update. Since Octobers'19 update we generally should use @use instead of @import, but that's only a remark. Solution to this question is use index files to simplify including whole folders. Example below.
// foundation/_code.scss
code {
padding: .25em;
line-height: 0;
}
// foundation/_lists.scss
ul, ol {
text-align: left;
& & {
padding: {
bottom: 0;
left: 0;
}
}
}
// foundation/_index.scss
@use 'code';
@use 'lists';
// style.scss
@use 'foundation';
https://sass-lang.com/documentation/at-rules/use#index-files
@forward in your _index.scss instead of @use –
Minnick _index.scss every time you create one. Is there really no way of doin @import foobar/**/* with @use or ` @forward`? –
Querist You could use a bit of workaround by placing a sass file in folder what you would like to import and import all files in that file like this:
file path:main/current/_current.scss
@import "placeholders";
@import "colors";
and in next dir level file you just use import for file what imported all files from that dir:
file path:main/main.scss
@import "EricMeyerResetCSSv20";
@import "clearfix";
@import "current";
That way you have same number of files, like you are importing the whole dir. Beware of order, file that comes last will override the matching stiles.
You might want to retain source order then you can just use this.
@import
'foo',
'bar';
I prefer this.
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#import
doesn't look like it.
If any of these files always require the others, then have them import the other files and only import the top-level ones. If they're all standalone, then I think you're going to have to keep doing it like you are now.
I also search for an answer to your question. Correspond to the answers the correct import all function does not exist.
Thats why I have written a python script which you need to place into the root of your scss folder like so:
- scss
|- scss-crawler.py
|- abstract
|- base
|- components
|- layout
|- themes
|- vender
It will then walk through the tree and find all scss files. Once executed, it will create a scss file called main.scss
#python3
import os
valid_file_endings = ["scss"]
with open("main.scss", "w") as scssFile:
for dirpath, dirs, files in os.walk("."):
# ignore the current path where the script is placed
if not dirpath == ".":
# change the dir seperator
dirpath = dirpath.replace("\\", "/")
currentDir = dirpath.split("/")[-1]
# filter out the valid ending scss
commentPrinted = False
for file in files:
# if there is a file with more dots just focus on the last part
fileEnding = file.split(".")[-1]
if fileEnding in valid_file_endings:
if not commentPrinted:
print("/* {0} */".format(currentDir), file = scssFile)
commentPrinted = True
print("@import '{0}/{1}';".format(dirpath, file.split(".")[0][1:]), file = scssFile)
an example of an output file:
/* abstract */
@import './abstract/colors';
/* base */
@import './base/base';
/* components */
@import './components/audioPlayer';
@import './components/cardLayouter';
@import './components/content';
@import './components/logo';
@import './components/navbar';
@import './components/songCard';
@import './components/whoami';
/* layout */
@import './layout/body';
@import './layout/header';
The accepted answer by Dennis Best states that "Otherwise, load order is and should be irrelevant... if we are doing things properly." This is simply incorrect. If you are doing things properly, you make use of the css order to help you reduce specificity and keeping you css simple and clean.
What I do to organize imports is adding an _all.scss file in a directory, where I import all the relevant files in it, in the correct order.
This way, my main import file will be simple and clean, like this:
// Import all scss in the project
// Utilities, mixins and placeholders
@import 'utils/_all';
// Styles
@import 'components/_all';
@import 'modules/_all';
@import 'templates/_all';
You could do this for sub-directories as well, if you need, but I don't think the structure of your css files should be too deep.
Though I use this approach, I still think a glob import should exist in sass, for situations where order does not matter, like a directory of mixins or even animations.
You can generate SASS file which imports everything automatically, I use this Gulp task:
concatFilenames = require('gulp-concat-filenames')
let concatFilenamesOptions = {
root: './',
prepend: "@import '",
append: "'"
}
gulp.task('sass-import', () => {
gulp.src(path_src_sass)
.pipe(concatFilenames('app.sass', concatFilenamesOptions))
.pipe(gulp.dest('./build'))
})
You can also control importing order by ordering the folders like this:
path_src_sass = [
'./style/**/*.sass', // mixins, variables - import first
'./components/**/*.sass', // singule components
'./pages/**/*.sass' // higher-level templates that could override components settings if necessary
]
this worked fine for me
@import 'folder/*';
With defining the file to import it's possible to use all folders common definitions.
So, @import "style/*" will compile all the files in the style folder.
More about import feature in Sass you can find here.
© 2022 - 2024 — McMap. All rights reserved.
@import 'partials/header', 'partials/viewport', 'partials/footer';. – Overfill