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.
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.
Is it possible? I've using scss with react and I've to create many .scss files, what's annyoing is that I always have to #import variable although it's global.
First create a entry point scss file name "app.scss"
Then create "_variables.scss" file which will contain all variables.
Then you create other component files like "_header.scss, _button.scss" ...
Then import the _variables.scss file in app.scss.
app.scss
#import "variables.scss" /*Note that this should be before any other components*/
#import "header"
#import "button"
...
Importing it at the top will ensure that all remainig components will
have acess to the variables
Then import the app.sccs file in your reactjs app.
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
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'
All I need is to do is have a directory with my custom reset sheets and other sass files for imports.
I've been playing around and I can't get compass to read my custom sheets.
1) Where do I put my custom css sheets for import?
2) how do I #import them
(I'm using the sass indentation, but I doubt that makes a difference,)
(I know little about ruby I'm just using it for compass)
Thanks
Look at the #import section in Sass reference.
You can import a Sass file without telling explicitly the file extension:
#import "file"; /*will import file.scss or file.sass. Anyway you could as well use #import "file.scss" or #import "file.sass*/
To import a CSS, provide its extension.
#import "file.css"; /*will import file.css"
There are more ways to differentiate them in the reference, but these are the most used.
You can put your files where you want, but write the path relative to the current directory (the directory which the file from where you are importing is).