In Less I can do something like this
#basePath:"../../some_crazy_project_path_to_repeat/less/";
#import "#{basePath}less.less";
So I tried to do the same thing in Sass
$basePath:"../../some_crazy_project_path_to_repeat/less/";
#import "${basePath}less.scss";
// Syntax error: File to import not found or unreadable: ${basePath}less.scss.
and
#import "#{basePath}less.scss";
// Syntax error: File to import not found or unreadable: #{basePath}less.scss.
Is there a way to do this in Sass?
You can't use conditional stuff for imports in SASS.
Consider creating a Compass extension out of your project.
You cannot use variables in import paths as already mentioned. What you can do is use the -I or --load-path option to specify a directory to search from.
sass --watch sass/:css/ --load-path ../../path/to/library/
Let's say you have a directory structure like this:
themes
hotdog
_variables.scss
classic
_variables.scss
styles.scss
Your styles.scss should have import paths that are relative to the provided load-path(s):
// note the import here doesn't contain themes, hotdog, or classic
#import "variables";
#debug $foo;
Your commands would look something like this:
# hotdog
sass styles.scss hotdog.css --load-path ./themes/hotdog/
# classic
sass styles.scss classic.css --load-path ./themes/classic/
See the Sass options documentation for more information.
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 have the following mix of Material and bootswatch which cause a compiler error:
#import '~#angular/material/prebuilt-themes/indigo-pink.css';
#import "~bootswatch/dist/yeti/_variables.scss";
#import "~bootstrap/scss/bootstrap.scss";
#import "~bootswatch/dist/yeti/_bootswatch.scss";
#import '~font-awesome/scss/font-awesome';
The error is:
ERROR in ./src/styles.css (./node_modules/#angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/styles.css)
Module build failed (from ./node_modules/postcss-loader/src/index.js):
SyntaxError
(1:4) Unknown word
> 1 | // Yeti 4.3.1
| ^
2 | // Bootswatch
3 |
According to this, I can use ng set defaults.styleExt scss to start processing Sass files.
However, it doesn't go through the process of converting your already existing .css files to .scss files. You'll have to make the conversion manually.
Can keep my css files and import what I need of sass files, side by side?
Thank you in advance
If you are going to support SASS in your application, consider only replacing the extension of your css files with .sass which will work without any further modification. This is because SASS is a superset of CSS and therefore simple CSS will be fully compatible.
Edit: Would the imported CSS not be of your own but rather from an external package (such as a node module), then removing the .css extension from your import should fix the problem:
#import '~#angular/material/prebuilt-themes/indigo-pink';
#import "~bootswatch/dist/yeti/_variables.scss";
#import "~bootstrap/scss/bootstrap.scss";
#import "~bootswatch/dist/yeti/_bootswatch.scss";
#import '~font-awesome/scss/font-awesome';
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';
Conversion error: Jekyll::Converters::Sass encountered an error while converti
ng 'assets/css/all.sass':
File to import not found or unreadable: 1-tools/-tools-dir.
on line 1
That is the error i get every time i run Jekyll and i can't seem to fix it. I've tried everything that i found on Google and still can't seem to make it work.
Any idea what is wrong with the includes?
My files are like this:
_-tools-dir.sass
#import 'bourbon/bourbon'
#import 'fonts'
#import 'normalize'
#import 'vars'
_-sections-dir.sass
#import 'header'
all.sass
---
---
#import '1-tools/-tools-dir'
#import '2-base/-base-dir'
#import '3-sections/-sections-dir'
and in base-dir i have no includes yet so the file is empty
With default Jekyll settings, all sass/scss/coffee imports are supposed to be in _sass folder.
Your #import '1-tools/-tools-dir' import rule is looking for _sass/1-tools/-tools-dir.sass file and not _sass/1-tools/_-tools-dir.sass (note the underscrore).
You can change the import to #import '1-tools/_-tools-dir or change the file name to -tools-dir.sass.
Same for other imports that will cause the same not found error.
you're probably doing the YouTube tutorial from DevTips (which is a pretty good one imo).
Add this to your config.yml:
sass:
sass_dir: assets/css
style: :nested
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).