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.
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
I am having issues sharing scss files between projects in Visual Studio (2019) compiled using Gulp tasks ran by VS' Task Runner.
I have one ASP.NET Core (2.2) website which uses MVC areas. Each area is located in a different Razor class library project. Areas are mostly independent, but they do share some styles, such as styling the header, controls, colors, normalization, etc. I have one class library which is shared by all RCLs. Base controller, ViewModel implementation etc. I put shared scss files over there as well. I put RCL-specific scss files where they should go, and instructed task runner to execute gulp task which will compile scss files for that RCL before building it. Resulting css is then set to copy always to publish directory, which works nicely.
RCL structure:
- Areas
- Styles
--- main.scss
--- _partial1.scss
--- ...
--- _partialN.scss
--- _shared-"add as link".scss from elsewhere
- wwwroot / css / generated-css-goes-here.css
main.scss content:
#import "shared-dependency1";
...
#import "shared-dependencyN";
#import "partial1";
...
#import "partialN";
I hoped this would work, but instead I get:
events.js:173
throw er; // Unhandled 'error' event
^
Error: Styles\main.scss
Error: File to import not found or unreadable: _colors.scss.
on line 2 of Styles/main.scss
>> #import "_colors.scss";
So, linking shared files doesn't seem to work. Before I try some arcane ways to get my shared files, I decided to shoot you guys a question here, in case someone solved this problem already and is willing to share.
I realized I don't really need to bother with linking shared files. I opted to use relative paths to the actual locations and it works. If someone has a better solution, feel free to comment / add another answer.
main.scss in RCL:
#import "../../Common/Styles/colors";
...
_partialX.scss in RCL:
/// <reference path="../../Common/Styles/colors" />
...
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'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.
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?