I'm trying Zurb Foundation 5.
So, I've created a new project and try changing settings. When I changed, for example, $row-width: rem-calc(1170); in my-project/scss/settings.scss, it compiled (in my-project/stylesheets/app.css) into:
.row {
max-width: rem-calc(1170);
}
It seems like it doesn't know about rem-calc function.
How to make it calculate rem-calc properly?
Your function doesn't exist. You must declare it (or import it from another file) before you use it. Sass does not throw errors for non-existent functions because they have a similar syntax to CSS functions. So it assumes that if it isn't a Sass function that it must be a CSS function.
Related: Test whether a Sass function is defined
Related
I am gonna use css global variables in scss file so that I can change the button colour in any time.
I want to do like this:
:root {
--button-color: #FF0000;
}
$button-color: var(--button-color);
...
But this makes the issue now.
SASS variables are compile time and final value depends on all files were #import in line. CSS variables are run-time and are calculated based on cascade(say if any parent element redeclares variable - it will be applied to children).
Also take a look into docs section on difference between
You can use css-vars to compile SASS variables into CSS custom properties. But you still cannot use CSS custom properties in SASS code, say, to calculate some value - since CSS property is not initialized yet.
Even with css-vars plugins, things are rather messy, because SASS files does not describe how component tree looks like finally so we cannot see cascade.
TL;DR; don't mix SASS variables and CSS custom properties. Use first for compile-time variables/calculation only and use latest one for run-time/cascade-based styling. Probably prefer using CSS custom properties only.
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!
The root of my problem is using CSS4 variables with css functions that is overridden by SASS mixins.
SASS overrides rgb and rgba to help with passing hex to them, for instance. Problem is I am using the new CSS4 spec which allows for variables.
What I want to do is:
background-color: rgba(var(--theme-color, 0.5)
Now this would work fine if SASS hadn't taken over and expect a different input.
So is it possible to override this mixin somehow, so I just get it output as a normal css value?
Thanks to Justinas who led me in the right direction on this question.
Although it could be argued that this is a duplicate of
Named CSS grid lines with SCSS, I still want to share the solution that is more spesific to what I tried to solve.
Here is a codepen of a rather ok solution: https://codepen.io/anon/pen/LydWMd
Basically just creating a mixin that either overrides(as pointed out, not necessarely what you want unless you know you will never use the built-in sass functionality in your project) or an addition:
#function native-rgba($string, $opacity) {
#return #{"rgba(#{$string}, #{$opacity})"};
}
I'm using angularjs along with the angular-material framework. I started writing my project based on the angular-seed project.
In my project I have a form that contains <md-select> elements. My problem is that the selection view is always only as big as 5 select options. I want to see more options when scrolling.
I looked around the angular-material source code and found this !default SASS variable which controls how many options are displayed. I want to make it bigger.
The way I understand it, !default means SASS will ignore the value of that variable if it's already defined elsewhere.
But I also understand that the SASS preprocessor takes a single SASS file as input and outputs a single CSS file - which means I can't override a SASS variable in one file from another file.
I'm also quite confused on which component is responsible for compiling the .scss files found in the angular-material framework and at what stage are they compiled. Are they compiled when installed by Bower? Are they compiled when I call npm start?
I'm new to all these technologies so even though those stuff might seem trivial, I don't really know what to search for to find answers to these questions, I tried and found nothing.
Well I just looked around and realized that the angular-material Bower package comes with css files that have already been pre-processed from scss files. There's nothing I can do to affect that variable.
To show more options in the md-select component I just resorted to the ugly solution of adding these hard-coded pre-calculated attributes to my stylesheets:
md-select-menu {
max-height: 784px !important; }
md-select-menu md-content {
max-height: 784px !important; }
EDIT:
Actually I found this solution even nicer:
md-select-menu {
max-height: 100vh !important; }
md-select-menu md-content {
max-height: 100vh !important; }
It fills as much of the view as possible with options
I have my application.css.scss set like this:
#import "base/variables";
#import "./application/application";
Like the documentation says I am not using Sprockets' directives (require, require_tree, and require_self) at all so I expect my variables defined inside of base/_variables.scss to be globals and available for my /application/application.scss file but it's not the case:
#content {
margin-top: $big;
}
Will return the error Undefined variable: "$big".
I've tried the same thing with SASS by naming by files application.css.sass and /application/application.sass and while the variables now do seems to be globals I'll like to keep using the SCSS syntax, I've tried that by setting config.sass.preferred_syntax = :scss but I'm still being asked for Sass.
Of course I could just import my variables file everytime I need my variables but that would go against the DRY principle.
Is that possible to use the SCSS syntax while making my variables globally available? What am I missing here? Thanks in advance.
What versions of sprockets, rails and sass-rails gems do you have? There were some problems around undefined variables, maybe try to bump up sass-rails and sprockets (if possible).
My application/application.scss was being precompiled (in assets.rb) by an old rule using a wildcard, which I missed, it's now working correctly.