I've set up a set of [object].css.scss styles in my assets/stylesheets directory to correspond with the different views in my application. Every sheet includes a set of global style variable values in the first line:
#import "branding.css.scss";
And then accesses the variable values when needed ($primaryColor, $secondaryColor, etc) throughout the library.
It's beautifully dry, but unfortunately Rails doesn't refresh the object stylesheets when I make a change to the variable values in the _branding.css.scss file. I have to go and touch each file before the SCSS recompiles the object style library with the updated variable value.
This is a minor gripe but it's disruptive to the workflow, especially when I keep clearing the browser cache trying to fix it :/
Is there a better way to organize variables?
Is there any way to force the refresh?
I've been putting variables and mixins into an includes.css.scss file and importing them into each stylesheet that requires them. To make Rails recompile when the includes file is changed you need to use the depend_on directive in application.js. For example:
application.css:
/*
*= depend_on includes
*= require_self
*= require stylesheet
*/
includes.css.scss:
$bg-color: #999;
stylesheet.css.scss:
#import "includes.css.scss";
body { background: $bg-color; }
This is indeed very annoying...
I don't have a complete solution, but one thing I've found is that all you need to do is touch 'application.css.scss' to get it recompile everything.
I've started using guard-compass and guard-livereload recently, but it has the same problem in 3.1. Maybe someone cleverer than me could fix it so that it touches 'application.css.scss' as well?
Related
I was looking for an easy way to prefix a style sheet and sass works just great. I don't need any building tool, just vs code sass extension, and press watch.
What I did was, renamed the css to scss and then imported it inside the main style nesting in the selector I want, like:
#wrapper {
#import 'style1';
#import 'style2';
}
The issue comes when one of the files has #font-face, they also get prefixed and that is a problem. I checked the issue tracker and apparently this is the correct behavior.
https://github.com/sass/sass/issues/2442
Given that. I am looking for a way to import only the #font-face rules to the root instead of the #wrapper selector.
Is this possible without having to change the content of 'style1' or 'style2' ?
I was able to get around this problem with node sass magic importer.
But again you need node scripting and terminal, but can be mitigated with a bundler which kinda is not what I want but at least I can sort of prebuilt it and still use a watcher.
But given the hasle to set this up for such a simple thing I would just go to the style sheet and copy the font-faces to the root of the main file anyways.
If anyone knows a solution with sass only please reply.
So, let's say I have a SASS module _module.scss that declares some css variables aka custom properties. When I now load this module in another SASS styleshee, let's call it main.scss, I have access to all SASS-variables, mixins and also rules, but not the custom properties inside of it? Am I missing something?
Example files:
//_module.scss
:root {
--some-variable: red;
}
// main.scss
#use 'module';
div {
background-color: var(module.--some-variable); // won't work, private property because of leading '-'
background-color: module.var(--some-variable); // won't work, would have been horrible syntax as well
}
I could use #import but that is discouraged and deprecated (see SASS Documentation). I've tried including the variables in a pure css file module.css, which compiled but didn't declare any custom properties at runtime as it directly translates the #use 'module' from my SASS file to the exact same in CSS - which browsers don't understand obviously. It should just more or less copy the content of a pure css file but it doesn't. Sure, I could try writing mixins in my modules that set the variables but that's just a workaround.
Am I missing something? Do I really need to write a mixin, that sets the variables and needs to be loaded? This makes the use of custom properties within modules pretty cumbersome.
EDIT
Forgot to mention, that background-color: var(--some-variable) doesn't work either even though it should according to the documentation, since rules should just be applied directly without scoping.
Ugh. The issue is most definitely the fact that my VS Code extension uses LibSass and not Dart Sass. Therefore #use is not yet supported in most environments. The documentation should most definitely be more explicit about this especially when warning about the use of #import.
Since I know it works with #import the issue is resolved though I'd love to see the module system being included in LibSass as well.
tl;dr
Do no use #use if you're not absolutely certain that you use Dart Sass!
Should be relatively simple, by I can't quiet figure it out.
I have this:
.parent
#include grid-row()
.main
#include grid-column(8)
.sidebar
#include grid-column(4)
The elements 'main' and 'sidebar' end up sitting right next to each other with no gutter.
I can see in the grid docs that there is a variable called $column-gutter, and that it has a default setting. But I can't see it's effect.
In the file _grid.scss I can see $column-gutter. It has a default value, and I have touched it. But it has no effect on side-by-side elements in a row. These elements have no gutters.
So how do I make use of that variable, or otherwise set gutter widths?
You should set values of the configuration variables prior to importing Foundation.
See http://compass-style.org/help/tutorials/configurable-variables/ :
Many Compass modules use guarded assignment to allow you to set defaults for that module. In order for these configurable variables to work correctly, you must set the variables before you import the module. For example:
$blueprint-grid-columns = 12
#import "blueprint/grid"
Because of this, it is common to have one or more partials that set the constants first and get imported before any other imports in your stylesheet(s). This is commonly referred to as the "base" stylesheet and is usually named _base.scss
or _base.sass.
I had this same issue and in my case the problem was that I was never actually using the _settings.scss file. And since this was the case, none of my changes were being reflected on the site.
If this is the same for you, then what you need to do go to the screen.scss file, make sure its calling #import "app". Once this is confirmed, go to the app.scss file and at the top make sure you call #import "settings". Once you do this, the settings in the _settings.scss file should actually cause an affect on the gutter settings that you want to change.
I'm trying to figure out how to correctly define a stylesheet (say...bootstrap_and_overrides.css.scss) to override all other stylesheets in my Ruby on Rails app. The thing is I want to leave all {wrap}bootstrap theme files I'm using intact so I can upgrade when updates come out. So all changes I may need to make should be done on this "overriding" css file.
Maybe something in application.css.scss?
*= require_self
*= require_tree .
*/
I've tried declaring this specific stylesheet after require_tree but nothing. I'm sure there are some concepts I'm not fully grasping. Any help is greatly appreciated.
I am not sure about using Rails specifically, but the definitions in the last stylesheet (added to the page last) will trump preceding styles.
You need to ensure that the override stylesheet contains equivalent css selectors to ensure the styles will be overridden.
I'm using CMS Made Simple. I'm trying to include conditional Smarty code in my css stylesheet.
[[if $raduno eq '1']]
[[assign var='bgcolor' value='#bc3516']] /* red */
[[else]]
[[assign var='bgcolor' value='#f3c127']] /* yellow */
[[/if]]
body {
background-color: [[$bgcolor]];
...
}
The code seems to be working (I get a red vs. yellow background depending on the value of raduno). However, caching of css stylesheets seems to interfere with this approach. The background color selected on the first page visited after clearing the CMSMS server cache is the one I also get on all subsequently visited pages, regardless of the value of variable raduno.
Is it possible to cache the stylesheet depending on the value of a variable? (If so, automatically or manually?)
The problem is currently resolved by having two separate stylesheets. However, this makes maintainance difficult. Also, disabling the cache is not an option here --- the template using the two stylesheets is used for the whole site.
I am using CMSMS version 1.10.3. I realize that upgrading might help, but I haven't found any indications that this is the case in the changelogs. (And my version is installed on opensourcecms.com!)
No, the only way to do this would be to avoid caching the stylesheets, which would not be a good idea. The simplest workaround would be to use inline css and Smarty, or do the swap with jquery.