I'm converting an existing website to use Zurb Foundation 5, and using Libsass rather than Compass to compile CSS from SASS
Having been impressed by the speed of Libsass (and 'grunt') over Compass (and 'watch'), I now have a problem: if I was using Compass, I could access the mixin library with
#import "compass/css3";
then use something like this
#include font-face...
Does anyone know the equivalent for a Foundation 5 project created using Libsass?
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.
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?
I'm new to bower/git/nodejs and using the SCSS from a css framework. Previously I would just download the framework CSS and just include it in my website. Then write scss and include that as a separate file.
I followed the directions on foundations site: http://foundation.zurb.com/docs/sass.html
I'm getting the following warnings which I imagine can't be good. I have sass 3.3 installed.
What am I doing wrong?
But, as it's a warning not an error (for now!)
you can add
disable_warnings = true
to your config.rb.
I expect foundation will update that stuff before it becomes completely deprecated.
The authors of Sass typically roll out backwards incompatible changes in 2 stages. First they will release a version that warns you that the feature you're using is not going to work in a future version but it still works in this version. Then they'll release a version where the feature is changed/removed.
In this case, manipulating global variables is changing. This is perfectly valid in 3.2, but gives deprecated warnings in 3.3:
$foo: blue;
.foo {
$foo: red;
}
It still works, though. To properly do the same thing in 3.3 (or to silence the warnings), the code should be written like this:
$foo: blue;
.foo {
$foo: red !global;
}
The addition of the !global flag makes the code incompatible with 3.2, which is all the warning is telling you.
Since this is a 3rd party library, I would recommend either ignoring it (though I suppose you're getting a lot of these warnings every time it compiles) or downgrading to 3.2 until the library has been updated to be compatible with 3.3.
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.