I'm upgrading a rails app with lots of SCSS stylesheets to use the asset pipeline, and need to include some global variables and mixins for each file.
Adding several #import directives at the top of every file isn't very DRY, so I'd like to do something like this:
# application.css
/*
*= require variables
*= require mixins
*= require_tree .
*/
This doesn't work of course, because the variables are not persisted across files. Anyone know how to achieve this?
The default manifest syntax isn't powerful enough to give you useful Sass features like shared variables, mixins, etc. Instead, you should:
Rename application.css to application.scss (or application.css.scss in Rails 4 or earlier)
Instead of using the
/*
*= require variables
*= require mixins
*= require_tree .
*/
nonsense, you should now use
#import "variables";
#import "mixins";
#import "blah"; // import each SCSS file in your project like this.
This will ensure you have full benefit of your variables and mixins throughout your project, and you are kept as DRY as Sass allows.
Simply importing the necessary file from each Scss or Sass file seems to have worked for me. For example, I have a colors.scss file that includes some constants like this:
$black: #222;
I require it in my application.css manifest along with some other files:
/*
*= require colors
*= require buttons
*/
In my buttons.css.scss file, I simply do this to avoid the error:
#import "colors";
Doesn't seem to be possible. Ended up prepending each file with #import 'includes/all'; and including everything else from includes/all.css.scss.
Replace require with #import and remove any = require even if you think you've commented it out.
Related
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";
Novice web dev here getting set up with SASS for the first time. Currently using Grunt to compile my css from a main SASS file.
So I have three files:
//main.css
/*some css*/
//main.scss
#import 'header';
//_header.scss
/* some sass */
When I edit and save the _header.scss file, I also have to save the main.scss file. Only then will gulp compile changes in the main.css file.
Is there a way to "autosave" every file that contains an import of a partial?
Based on what your providing I am thinking it has something to do with your main.css stuff at the top of your file. I am assuming that you have actual css below that comment in the real file?
Best practice is to #import everything at the top of the file before you do anything else.
If that is exactly what you have in the real file then it might be with how your running grunt.. Would you be able to provide your grunt config file please?
I want to use Bootstrap with SASS, but I can't find any tutorials or explanation how one can use Bootstrap with SASS. The only thing I find is installatio trough a ruby gem:
compass create my-new-project -r bootstrap-sass --using bootstrap
Which creates the following tree in my folder:
Is this enough for Bootstrap to use its own Grid, because I don't see the bootstrap.scss file, neither any Grid related files. However, I find the grid classes and all in a styles.css file. Isn't there a bootstrap.scss file that has all the mixins and everything else? And where can I find a more extended use of SASS's Bootstrap mixins, which are described here briefly:
http://www.hongkiat.com/blog/bootstrap-and-sass/
Thank You all in advance! I really can't find nothing on my problem.
(I'm using .sass files in my answer, but it should apply to .scss files, too)
Isn't there a bootstrap.scss file that has all the mixins and everything else?
Yes, there is. Here's the generated styles.sass file:
// Import Bootstrap Compass integration
#import "bootstrap-compass"
// Import custom Bootstrap variables
#import "bootstrap-variables"
// Import Bootstrap for Sass
#import "bootstrap"
bootstap_variables refers to the generated _bootstrap-variables.sass file in your project tree, whereas bootstrap-compass and bootstrap are imported from the gem's stylesheets directory.
The latter imports all other Bootstrap files, including the grid:
// Core variables and mixins
#import "bootstrap/variables";
#import "bootstrap/mixins";
// Reset and dependencies
#import "bootstrap/normalize";
#import "bootstrap/print";
#import "bootstrap/glyphicons";
// Core CSS
#import "bootstrap/scaffolding";
#import "bootstrap/type";
#import "bootstrap/code";
#import "bootstrap/grid"; # <-- here it is
...
I am ugrading an app from rails 3.0 to 3.2 there is a problem with some of my scss code. stylin.css contains:
/*
= require_self
= require_tree .
*/
stylin.css.scss contains:
#import "palette";
#import "round";
#import "html_elements";
#import "graph";
#import "menu";
#import "button";
#import "pop_up";
#import "basic_abrev";
When the styling.css is updated 'palette' is imported but nothing else is imported. Consequently, I get the following error when loading the first page:
Undefined mixin 'round_corners'
I think it is because the top of 'round.css.scss' includes the following:
#mixin round_corners($radius: 8px) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
If no variable passed the default would be 8px. In the following case '20px' is passed to the mixin.
#include round_corners(20px);
This worked in 3.0. Is this no longer possible? If not, I'll have to create numerous mixins or discontinue using the mixing / include feature for rounding corners.
thanks.
I found this here:
If you want to use multiple Sass files, you should generally use the Sass #import rule instead of these Sprockets directives. Using Sprockets directives all Sass files exist within their own scope, making variables or mixins only available within the document they were defined in.
I found this here:
When using Sprockets 2.x with Sass you will eventually run into a pretty big issue. //= require directives will not allow Sass mixins, variables, etc. to be shared between files.
Found this here:
Sprockets provides some directives that are placed inside of comments called require, require_tree, and require_self. DO NOT USE THEM IN YOUR SASS/SCSS FILES. They are very primitive and do not work well with Sass files. Instead, use Sass's native #import directive which sass-rails has customized to integrate with the conventions of your rails projects.
When I deleted this (sprockets commands) from the stylin.css.scss file, everything worked.
/*
= require_self
= require_tree .
*/
I've got application.css.scss in my assets/stylesheets directory, along with a number of controller-specific scss files.
The application.css.scss file has
*= require_self
*= require_tree .
And I have some ordinary scss following these directives.
When both require statements are enabled, I get "/app/assets/stylesheets/application.css.scss has already been required." (There is no application.css, I've double-checked.)
Commenting out the *require_tree .* line eliminates the error, but obviously doesn't include the other scss files in the directory. The workaround is to require these files individually but that's not the long term solution. (Taking out the require_self line doesn't eliminate the error, either.)
I had thought Rails was smart enough to resolve this -- I have a feeling I've missed something obvious. Thoughts?
You say it doesn't include the other scss files. What are the other scss/css files and did you inserted the *= require_tree . in at least one of them? This would load the application.css file again. I had the same problem. I just removed these lines from all other css/scss files.