I am trying to do :
#if (debug)
.crazyClass {}
And I would like the debug variable to come from the console when I compile my sass, is this possible?
You can't inject variables into SASS or set variables via the command line. I really wish we could because it would simplify issues like this.
I know of only two ways of doing conditional compiles.
Use Different Entry Points
Use different SASS files as the entry points for compile. Your project might look something like this.
/www
/css
_styles.scss
dev.scss
prod.scss
The dev.scss file would set debug to true, and import _style.scss, but the prod.scss would set debug to false, and import _style.scss. Both produce the output CSS file but for different environments.
Use Different Import Paths
You can configure SASS to use different import paths and setup your project files like this.
/www
/css
/dev
_config.scss
/prod
_config.scss
styles.scss
The styles.scss would just do a #import "config" at the top, and depending on which path is set the corresponding _config.scss file would be imported.
Related
Folder structure:
Error description:
Sass version:
ParcelJS solved my problem by being able to compile my Sass/Scss code into plain CSS but i don't want to use it in such a small project like this one.
OS: MX Linux.
Sass is able to compile my code just fine if i don't use #use or #import.
Try importing like below with a relative path:
#use ./abstracts/resets
Here is an overview of how Sass imports files:
Finding the File
It wouldn’t be any fun to write out absolute URLs for every stylesheet you import, so Sass’s algorithm for finding a file to import makes it a little easier. For starters, you don’t have to explicitly write out the extension of the file you want to import; #import "variables" will automatically load variables.scss, variables.sass, or variables.css.
⚠️ Heads up
To ensure that stylesheets work on every operating system, Sass imports files by URL, not by file path. This means you need to use forward slashes, not backslashes, even when you’re on Windows.
Load Paths
All Sass implementations allow users to provide load paths: paths on the filesystem that Sass will look in when resolving imports. For example, if you pass node_modules/susy/sass as a load path, you can use #import "susy" to load node_modules/susy/sass/susy.scss.
Imports will always be resolved relative to the current file first, though. Load paths will only be used if no relative file exists that matches the import. This ensures that you can’t accidentally mess up your relative imports when you add a new library.
💡 Fun fact:
Unlike some other languages, Sass doesn’t require that you use ./ for relative imports. Relative imports are always available.
I created a new cli project with --style=sass and then defined some variables in the src/sass/styles.scss (no partials created) so they should be globally defined right? , so when i tried to use them in home.component.scss i got this error https://imgur.com/a/IckJL14
i then added a black border just to make sure normal css works and it did work , the problem is with sass ,
here's the angular.json
"styles": [
"src/sass/styles.scss",
"./node_modules/bootstrap/dist/css/bootstrap.min.css",
"./node_modules/malihu-custom-scrollbar-
plugin/jquery.mCustomScrollbar.css",
"./node_modules/animate.css/animate.min.css",
edit: i then created a partial _variables.scss and in the component.scss i wrote #import '~sass/variables'; after importing them in the styles.scss like so #import './variables'; according to the guide from this link : https://scotch.io/tutorials/using-sass-with-the-angular-cli
still not working.
The best approach to achieve this, is creating a variable file and import this file in your scss files.
Like so:
#import "../../variables.scss";
or
#import "~variables.scss";
And in your styles.scss you just put a reference of your variable file!
If it's correct that you used the --style=sass option on project init, then that might be the problem. If you intend to use .scss files (which I would recommend), then you should have used --style=scss.
To fix this now, you can run the command ng set defaults.styleExt scss.
the answer was to simply add the full path to the component.scss like so,
#import "src/sass/~variables.scss"; instead of just #import "~variables.scss";
I have a folder of SCSS files. The main SCSS file is /css/app.scss. It imports all the other SCSS files, like /css/variables.scss and /css/component_a.scss.
How can I have sass watch my /css/ folder for any changes, then recompile starting from /css/app.scss?
Right now it errors since /css/component_a.scss uses variables defined in a different file. But in app.scss they are imported in the correct order.
My answer may be limited because I don't have all the information about how you are compiling sass and what settings you are using.
However I can see that your file names aren't prefixed with an underscore, basically sass will compile every file individually that doesn't have the '_' prefix.
Basically what you want to do is set up your task manager (grunt, gulp, etc) to watch all files ending with '.scss' then tell it to run the sass compile task and have this pointed at your app.scss file.
With the limited information I have from your question I hope that my answer points you in the right direction to solve your problem.
I'm currently using css-loader, node-sass, sass-loader and style-loader packages within webpack to compile my sass files, here is how my loader looks at the moment:
{
test: /\.scss$/,
loader: 'style!css!sass'
}
I want to use folder structure like this for my styles
styles
components/
main.sass
and somehow within main.sass I want to import everything from components folder so something like #import './components/**/*' is this possible via webpack?
You can prefix a Sass import with '~' to tell the Sass loader to use webpack's require() resolution on the import. Once webpack is in charge of the import you have some flexibility.
If you do a dynamic require, e.g. require('~./components/' + someVar + '.scss'), webpack can't evaluate the variable at build time and it bundles all the possible files in that directory, and the actual resolution of the require() happens at runtime (which can lead to errors at runtime if you've asked for something that doesn't exist). Not sure off the top of my head if that would give you what you need (all the files bundled) or if you would still need to explicitly require() each partial -- but if that's the case you could easily loop through all the files in the directory and require each one.
More on how you can leverage webpack's dynamic requires and loading context.
I've got some SCSS files set as imports for my main SCSS file, so I don't need them to compile down to CSS. In fact, they will get an error because they reference variable that don't work outside being imported.
How to I set grunt.js to not compile them directly?
CodeKit seems able to do this automatically, but I'd rather stick with grunt.
Rename the files that you wish to only import so that they start with an underscore. Files starting with an underscore are not compiled, but are treated normally by import statements.
The only caveat is that you can't have the same name with and without the underscore in a folder or the import statement will be unhappy.