LESS CSS has got the feature where one can include a LESS file by reference. Is this or something similar possible via SASS through the #import directive?
Related
In the past I have used and seen #import be used to bring in an external stylesheet (i.e. #import url(https://unpkg.com/normalize.css#7.0.0/normalize.css)).
Going forward with #use and #forward it appears you can no longer bring in an external stylesheet? The following statements result in the following errors:
#use 'https://unpkg.com/normalize.css#7.0.0/normalize.css';
Error: Can't find stylesheet to import.
#use url('https://unpkg.com/normalize.css#7.0.0/normalize.css');
Error: Expected string.
I'll continue to research but does anyone know if using/forwarding an external stylesheet be possible?
Before Sass modules the #import rule was responsible for both import sass members (variables, functions, and mixins) and plain css.
Today #use and #forward are used to load Sass members, while you can still use #import for plain css, from the docs:
"Because #import is also defined in CSS, Sass needs a way of compiling plain CSS #imports without trying to import the files at compile time. To accomplish this, and to ensure SCSS is as much of a superset of CSS as possible, Sass will compile any #imports with the following characteristics to plain CSS imports:
Imports where the URL ends with .css.
Imports where the URL begins http:// or https://.
Imports where the URL is written as a url().
Imports that have media queries."
https://sass-lang.com/documentation/at-rules/import
For example, a lot of the SASS I have been writing require and use the mixins from bootstrap. However, I would like everything to not be complied into one large file. So for example in a main.scss I could have:
#import 'bootstrap/assets/stylesheets/_bootstrap';
#import '_mypage'
#import '_mypage2'
but when you compile the file it would just end up as one file where I am trying to get it so I have bootstrap, mypage, and mypag2 as separate css file, while maintain the ability to use the bootstrap.
Is there a way to do this in sass? Or should I be looking at certain tools to achieve this goal?
IIRC, the _ in front of SCSS files is what tells the compiler not to make its own file. What you're telling the compiler with your #import lines is that you want all of those files to be added to the top of your main.scss.
If you make a mypage.scss, and put it in the same directory where the compiler is looking, it will compile to its own file. You can either import bootstrap at the top of that file as well, or just load earlier it in your HTML to be able to reference it.
I'm currently working with singularity.gs v1.7.0 and I noticed that the helper files _box-sizing.scss, and _clearfix.scss, are not included into the _helpers.scss file. I did had the same experience with singularity.gs v1.6.2.
Here is how I'm including singularity.gs into my SASS code and also how I'm going around this issue:
#import "_singularitygs.scss";
// for some reason the content bellow wasn't called from inside singularity
#import "singularitygs/helpers/_box-sizing.scss";
#import "singularitygs/helpers/_clearfix.scss";
// end of missing libraries
Can somebody confirm if this is a bug or not, and what would be the preferable procedure to including these two files?
Unfortunately I wasn't able to find a clear answer on the documentation.
Thank you
I've been using Prepros lately which performs some magic automatically, decided to move to Gulp and I'm in trouble, I guess.
I have multpiple scss files such as:
mixins.scss (here I store all the mixins)
variables.scss (variables here)
colors.scss (and colors)
base.scss (base styles for my app)
app.scss (here I import mixins, variables, colors and base - in that order)
Now, with Prepros it used to work like this - first all the files were imported to app.scss, then beautiful app.css file was generated, easy and painless.
Gulp, I assume, tries to compile every single one of these files separately and fails at base.scss, because I use mixins/variables/colors there and Gulp is unaware of these.
How can I fix that? I was thinking maybe watching app.scss alone would fix the problem, but then app.scss wouldn't even know if there were any changes to variables.scss for example.
My default Gulp task looks like this:
// default task for "gulp"
gulp.task('default', ['sass'], function() {
gulp.watch('./assets/scss/*.scss', function() {
gulp.run('sass');
});
});
Any hints?
Are you 100% sure all your partials files (mixins, variables, etc) are properly named ?
This is, they start with an underscore, ie: _variables.scss, _mixins.scss, etc.
This seems the issue for you, is not a gulp problem, but a sass one.
This way you tell sass compiler that those files should not be compiled.
From sass docs:
The underscore lets Sass know that the file is only a partial file and
that it should not be generated into a CSS file. Sass partials are
used with the #import directive.
My problem: I want to use some compass features (mostly sprites generation and css3 mixins), but I don't want to create a compass project for it. My project structure should be a bit more complicated than compass allows me to create. So I'd like to stay in my project with sass, but import and use some compass features in it. Is it possible?
Compass IS able to manage all your stuff. Just give it a try.
Here's an example, this is the structure of a Compass project i'm currently working on:
First of all, you should have a folder like sass where you store your non-partial SASS files, e. g. sass/style.sass or sass/screen.scss. Your config.rb should point at it.
Then create a subfolder called partials where you store all the stuff.
In partials subfolder you start creating the structure:
sass/
partials/
_global.sass
_modules.sass
style.sass
The contents of your style.sass should be like this:
#import partials/global
#import partials/modules
This structure is easily extendable. Once your partial grows large and you decide to split it, just create a subfolder named after the partial, create smaller partials there and import them from the initial partial:
sass/
partials/
global/
_extendables.sass
_functions.sass
_mixins.sass
_variables.sass
_global.sass
_modules.sass
style.sass
Contents of _global.sass:
#import global/extendables
#import global/functions
#import global/mixins
#import global/variables
This makes your project structure easily extendable.
Note that if you're using the SCSS syntax, quotes are necessary in the import statements, e. g. #import "global/extendables";.
If the imports aren't working for you, please share your project structure, the exact code you use and the error text you receive.