Importing scss partials inside another scss partial - sass

can i import scss partials inside another scss partial? Eg- importing _abc.scss inside _xyz.scss

yes, with this simple code (syntax) : #import "anotherScssFile.scss";
Consider you have two scss files together, called config.scss and main.scss, if you want to import the config.scss file in main.scss, you can add this code in the first line of your main.scss :
#import "./config.scss"; /* this is what you want! */
.
.
.
in your case code must be like this (in _xyz.scss):
#import "path_to_abc_container_directory/_abc.scss";

Related

Separate main files in SCSS result in undefined variables

I'm basically doing a "theme" over existing scss by changing some variable definitions. I need to have separate css bundles rendered with different variables. I thought of having separate main files that import the common files to keep it DRY.
File structure
- variables_1.scss
- variables_2.scss
- main_1.scss
- main_2.scss
- _main-shared.scss
_main-shared.scss contains #import statements for all other scss files, but does not import variables.
Main file contents:
//main_1.scss
#use 'variables_1' as *;
#import "main-shared";
//main_2.scss
#use 'variables_2' as *;
#import "main-shared";
But multi-level imports do not seem to work resulting in SassError:
Undefined variable in _main-shared.scss.
Is there a better way to do this? I cannot import variables in _main-shared.scss since it would defeat the purpose of having separate variable files.
Is there a fix for this that I am not aware of or a better solution?

Sass doesn't compile variables properly

I start to write my own SCSS along with boostrap. I follow the hierarchy of the framework like:
/* The main file and all partial files are in the same directory */
#import "variables";
#import "mixins";
#import "other-components";
Everything compiles perfectly except that every variable from variables.scss is not compiled. From my understanding, CSS doesn't have variables except for :root, so SCSS variables will be compiled directly to its value in CSS. But when it's done compiling, the variables in CSS remain the same as they're in SCSS, just name like --primary but not value like #000.
Before my post gets slammed as duplicate, here's what I've done:
I've followed Bootstrap's practice. You can check them on Github.
I use VSCode and my colors have boxes right next to them, so I've written valid hex values;
I've tried to switch to #use and use as namespace instead of #import.
I've tried to rename my variables file with and without underscore _ back and forth. It doesn't help solve the problems.
The compiler shows no error whatsoever.
I only use sass package to compile .scss to .css. No extra libraries.
main.scss
_variables.scss
main.css
Any help is appreciated!
When using standard CSS variables, you should make SASS write out the contents like this:
--variable: #{$sass-var};
Otherwise SASS will print the variable as if it's a valid value inside a CSS value (since you could technically define something like --var: $text and then use it later with content: var(--var) to print out that string). Anyways, it's because SASS otherwise doesn't know if you want to print the output of the variable, or just a string named similar to a sass variable.

Gulp not compiling ALL sass files

Gulp Function:
function style() {
//1.where is my scss
return gulp.src('src/scss/**/*.scss') //gets all files ending with .scss in src/scss
//2. pass that file through sass compiler
.pipe(sass().on('error',sass.logError))
//3. where do I save the compiled css file
.pipe(gulp.dest('src/css'))
//4. stream change to all browsers
.pipe(browserSync.stream());
}
Folder Structure:
Expected output:
syles.css will have styles written in syles.scss and vendor.scss
Actual Output:
syles.css will have styles written in syles.scss alone. vendor.scss styles are not added in styles.css
Your actual output is correct. You need to #use a partial into your styles.scss if you want only one file styles.css output containing the vendor.scss content.
Modules
You don't have to write all your Sass in a single file. You can split
it up however you want with the #use rule. This rule loads another
Sass file as a module, which means you can refer to its variables,
mixins, and functions in your Sass file with a namespace based on the
filename. Using a file will also include the CSS it generates in your
compiled output!
from https://sass-lang.com/guide
so in your styles.scss at the top:
#use 'vendor;
and then rename vendor.scss to _vendor.scss

Sass #import using leading underscore

I understand that it is best practise to import SASS/SCSS partials without using the leading underscore; e.g.
#import 'normalize-scss/normalize';
// this imports ./normalize-scss/_normalize.scss
My question for nerdy completeness is, are there any consequences if the file is imported using the underscore?
#import 'normalize-scss/_normalize';
No. If your file is _foo.scss, all of these imports have identical results as long as you don't have any ambiguous filenames (barring any side effects that might exist):
#import "foo";
#import "foo.scss";
#import "_foo";
#import "_foo.scss";
Files with the same name but different extension
The only time an extension is necessary is if you have both _foo.scss and _foo.sass in the same search path. You'll get the following error if you don't specify which one:
error sass/test.scss (Line 7: It's not clear which file to import for '#import "test/bar"'.
Candidates:
test/_bar.sass
test/_bar.scss
Please delete or rename all but one of these files.
)
Files with the same name, but one is prefixed with an underscore
If you have both foo.scss and _foo.scss, then foo.scss will take precedence. If you want _foo.scss instead, you'll need to add the underscore to your import statement.
#import "test/_foo";
Sass will nag you with a warning every time you save no matter what your import statement looks like:
WARNING: In /path/to/test:
There are multiple files that match the name "bar.scss":
_bar.scss
bar.scss
If you add an underscore to the start of the file name, Sass won’t compile it. So, if you don’t want colors.scss to compile to colors.css, name the file _colors.scss instead. Files named this way are called partials in Sass terminology.
More about import feature in Sass you can find here
#import 'normalize-scss/_normalize';
This will simply treat the _normalize.scss file as not partial.
So, if you want that file to be a partial file. then you add another underscore in the front of the actual file name. so the file name will be __normalize.scss.

Using Gumby, when I import a new custom scss file into gumby.scss, do I include an underscore?

I noticed that in the gumby.scss file, there is the line:
#import "custom";
... but the filename itself is _custom.scss.
For every file that I create after that, do I include the underscore?
As an example, if I create a file _custom2.scss, would I then use the import
#import "custom2";
or
#import "_custom2":
?
If it assumes that there will be an underscore in the file name, what are the rules for its assumptions? Does it do that with all filenames?
You can use either.
A file that begins with an _ is a partial in Sass.
Basically, if you want it to generate its own css file, don't add the underscore. If you want to import it into another sass file, use the _.

Resources