I have a parent SCSS file that is importing my other CSS files:
#import 'variables.css';
#import 'helpers.css';
#import 'layout.css';
And I have three scss files: variables.css.scss;helper.css.scss & layout.css.scss.
In variables I am defining colours, fonts and sizes to be used throughout the site. The trouble is I assumed these variables will be available to the other documents so long as it is imported first, but I am getting Undefined Variable errors.
I assume I just have the process wrong. Where am I going wrong?
You can do it that way if you're ok with an extra file as a middleman.
_master.css.scss:
#import 'variables.css';
#import 'helpers.css';
#import 'layout.css';
site.css.scss:
#import '_master.css';
The problem is how you named the scss files. The way you are importing the files makes SASS think that you are using the #import CSS rule https://developer.mozilla.org/en-US/docs/CSS/#import
Rename those files only with the scss extensions, remove the ".css", and import them like this
#import 'variables.scss';
#import 'helpers.scss';
#import 'layout.scss';
or you can even skip the extension at all
#import 'variables';
#import 'helpers';
#import 'layout';
If you want variables to be available on the other files you'll need to include that css in them as well. So basically layout.css.scss and helper.css.scss will need to have #import 'variables.css'
Related
I'm working on a theme and plugin that share components. In my theme I have a scss file and in this I want to import a main.scss file from my plugin. This is the situation:
Plugin main.scss
#import "slick";
#import "slick_theme";
#import "~bootstrap/scss/bootstrap";
#import "~aos/dist/aos.css";
#import "../../../my-directory/**/*.scss";
Theme main.scss
#import "../../plugins/my-plugin/assets/src/scss/main";
II can't compile the main.scss of my theme because it can't resolve the url of node_modules and the directory with wildcards.
Any ideas?
(A) Easiest (and fastest!) way: Use full relative path!
As SASS don't support the wild cards in SASS files using #-rules: just remove wild cards and write full relative path to node-modules like #import '../../complete/relative/path/to/node/module/dir/file.scss' ;-)
(B) ALTERNATIVE: Set includePath
Set node directory as includePath for your project. As I don't know the compiler you use here are the information how to do in original SASS (but 'includePath' variable is almost the same):
https://sass-lang.com/documentation/js-api#includepaths
In that case you are able to #import only by using the filename.
Additional notes:
In SASS rule #import does NOT support mulitple includes at all. Means: in a SASS file #import '*.scss' (as you try in your example by using wildcard * in filename) will not work at all. You ALLWAYS need to specify a concrete single file: #import 'concreteFile.scss'.
In SASS you can remove the suffix .scss from filenames. As this #import path/to/filename'` works as well.
I use stylus and scss in my project.
Is it possible to have one common variables file that I can use with both?
I have tried:
variables.scss
$primary: #00A9E0
main.styl
#import 'variables.scss"
which obviously did not work because of the different syntax
Move your variables to _variables.scss(partial file) and import it.
#import 'variables';
First some background. We have a main sass file main.scss where we are basically just importing other scss files.
/* ==========================================================================
Base
========================================================================== */
#import "base/colors";
#import "base/variables";
#import "base/typography";
#import "base/layout";
#import "base/font-icons";
#import "base/base";
#import "base/ie-fixes";
Later we import components too from outside of the styles folder because we have a components like development approach where we have components with it's .js .html .scss files "bundled" in a folder.
Now the question. Say I have such a component e.g /account. In account.scss I am using variables from styles/base/variables if I write the account.scss file with #import "../../styles/base/variables" then I am duplicating code for the sass output IF i have other rules defined in the variables.scss and NOT only true variable declarations. Okay, in variables.scss I should only have variables but say in colors.scss I may have variable declarations as well as rule declarations e.g
$grey: grey;
.grey { color: $grey; }
Now if I import colors my output sass file will contain .grey { .. } at least two times so it is duplicated. Okay, let's split colors up and move rules into a different file and let variables declarations only. Then I can freely import the file without duplication.
Now my question is why would I import? Is there any benefit of importing variable decalarions into account.scss outside of documentation?
I hope I was clear I tried to be as clear as I could.
You already answered your own question:
Okay, let's split colors up and move rules into a different file and
let variables declarations only. Then I can freely import the file
without duplication.
I would always separate mixins from functions from variables – and most important: separate all of these from output that is being generated. This way you can safely import modules or single parts of your SCSS anywhere.
For example:
/setup
_variables.scss
_functions.scss
_mixins.scss
...
_module.scss
/global
_base.scss
_layout.scss
_typography.scss
_helpers.scss
...
_module.scss
/components
_slideshow.scss
_pagination.scss
_widgets.scss
...
_module.scss
main.scss
Every _module.scss in one of the subfolders would like like this:
/* setup/_modules.scss */
#import 'variables';
#import 'functions';
#import 'mixins';
The main.scss would look like this:
/* main.scss */
#import 'setup/module';
#import 'global/module';
#import 'components/module';
Your question after what would be the benefit of importing: I don’t know. You have to know since only you know your application. If a 'standalone' component uses the same color set, for example, importing one single _colors.scss is indeed a good idea and keeps you DRY.
Ok so for example, lets say I have main.css, main.sass, about.sass, and contact.sass.
main.sass should have #import about.sass and #import contact.sass. Then, when main.sass is compiled, main.css should have all the content of about.sass and contact.sass. Not #import's.
Main.sass
#import 'tools/fonts'
#import 'tools/normalize'
#import 'tools/grid'
Now when this is converted to main.min.css it looks exactly the same as in main.sass
#import url(tools/fonts.css);
#import url(tools/normalize.css);
#import url(1-tools/grid.css);
Shouldn't there be no #imports, just the combined css code?
The files you are importing don't have names that start with an underscore. If the file starts with an underscore then SASS knows that it is a partial file, and should be included wherever it is imported.
If a file name does not start with an underscore, then it will be generated as it's own CSS file.
This behaviour is described here.
Partials
If you have a SCSS or Sass file that you want to import but don’t want to compile to a CSS file, you can add an underscore to the beginning of the filename. This will tell Sass not to compile it to a normal CSS file. You can then import these files without using the underscore.
For example, you might have _colors.scss. Then no _colors.css file would be created, and you can do
#import "colors";
and _colors.scss would be imported.
Note that you may not include a partial and a non-partial with the same name in the same directory. For example, _colors.scss may not exist alongside colors.scss.
I'm looking for ways to optimize my WordPress instance. The theme has about 8-10 CSS files that are rendered in the functions.php. Consequently, I do not want to change any file names because that would mean that I have to hack the theme and I want to keep that to a bare minimum.
I want to use SCSS to combine these CSS files into one CSS file and include the new file in the theme instead. When I try...
#import "style.css";
#import "reset.css";
#import "shortcodes-styles.css";
It renders as
#import url(style.css);
#import url(reset.css);
#import url(shortcodes-styles.css);
How can I get SCSS to import the CSS as partials without changing the file names? I'm also using CodeKit if that makes a difference.
Not possible. Sass only compiles Sass files: https://github.com/nex3/sass/issues/556