Does anyone have any ideas why I'm getting this error when using compass watch and compiling this SASS code?
/* Error: Invalid CSS after "...176b, vertical)": expected expression
(e.g. 1px, bold), was "; // IE6-9"
on line 2 of assets/sass/theme.sass
body {
#include filter-gradient(#0b0039, #2b176b, vertical); // IE6-9
#include background-image(linear-gradient(top, rgba(11,0,57,1) 0%,rgba(40,22,99,1) 65%,rgba(43,23,107,1) 100%));
}
I also get it on the includes if I remove the background-color so not sure what's happening here.
Related
The error content:
Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
You must put any #use line of code above others.
For example the code below throws error:
.button {
#include corners.rounded;
padding: 5px + corners.$radius;
}
#use "src/corners";
But this code will work fine:
#use "src/corners";
.button {
#include corners.rounded;
padding: 5px + corners.$radius;
}
Remember that #use in the middle lines will throw error even if you don't use anything from the file.
I'm trying to apply CSS variables to my RBG/RGBA but my VS Code Live SASS compiler throws a syntax error telling me I did not provide adequate arguments. Is there a work around for this?
CSS
:root {
--bg-color: 50, 50, 50, 0.5;
}
.container {
background: rgba(var(--bg-color));
}
VS Code Live SASS Compilation error:
--------------------
Compilation Error
Error: overloaded function `rgba` given wrong number of arguments
on line 329 of sass/.../main.scss
>> background: rgba(var(--bg-color));
------------------------^
--------------------
SASS attempts to compile the styles with a SASS-specific rgba() function. However, rgba() is also a native CSS function, so you can use string interpolation to bypass the SASS function.
:root {
--bg-color: 50, 50, 50, 0.5;
}
.container {
/* This is valid CSS, but will fail in a scss compilation */
background: rgba(var(--bg-color));
/* This is valid scss, and will generate the CSS above */
background: #{'rgba(var(--bg-color))'};
}
Taken from this answer on SO.
Having issues compiling some bootstrap 4 modules (updating from beta3).
While the issue can be solved by setting #charset: 'UTF-8'; on _hover.scss mixin partial (which is noted as deprecated within the file), why would that be needed considering it should compile out of the box as previous beta versions.
Code in _hover.scss:
#mixin hover {
&:hover { #content; }
}
#mixin hover-focus {
&:hover,
&:focus {
#content;
}
}
#mixin plain-hover-focus {
&,
&:hover,
&:focus {
#content;
}
}
#mixin hover-focus-active {
&:hover,
&:focus,
&:active {
#content;
}
}
After going through SCSS files can't figure exactly what's wrong, quotes seem ok.
After going through it in detail seems to be the - character on top comments ("iOS-an issue..").
One can replace it for their own - character and should compile fine (or just add #charset: 'UTF-8'; at the top of the _hover.scss mixin file).
Issue report: https://github.com/twbs/bootstrap/issues/25391
I ran into the same charset problem.
Especially on OSX there seams to be a problem with ruby Encoding Settings.
I fixed it creating a config.rb file in the main project directory to tell ruby explicitly which charset encoding it should use.
Since sass and compass depend on ruby, chances good that this will fix your problems.
Encoding.default_external = 'utf-8'
I'm trying to create a mixin for grayscaling an html element.
In CSS way, it should be :
filter: grayscale(50%);
My mixin :
#mixin grayscale_element($value) {
-webkit-filter: grayscale($value);
-moz-filter: grayscale($value);
filter: grayscale($value);
}
My error :
Fatal error: Uncaught exception 'SassScriptFunctionException' with message 'SassNumber must be a SassColour
Source: -webkit-filter: grayscale($value)'
Problem is, in sass grayscale is already a function, and paramter should be a color.
Module: Sass::Script::Functions - Sass Documentation
How can I use these filter in a mixin ?
Note: I'm using phpsass.
If you just want to avoid the grayscale function being evaluated as a Sass function use string interpolation. Something like this:
filter: #{"grayscale(#{$value})"};
if $value is set to 50% the CSS output will be:
filter: grayscale(50%);
Demo
The code works fine for me as long as I included the mixin like:
#include grayscale_element(100%);
When a string was passed to the mixin, it failed as you mentioned.
$val: 100%;
#include grayscale_element(#{$val});
Type should be estimated.
I am trying to create a sprite mixin, based on the compass sprite mixins for SCSS.
The trouble is that the image is loading multiple times. One for each unique call of the image (so each new class name that refers to the sprite)
Here is the SCSS I am using. First we call the compass mixins:
$sprite-default-size:29px;
#import "compass/utilities/sprites/sprite-img";
Then I create my own mixin, designed to accept a column of images, with hover states to the right of each image:
$icons: "/assets/icons/socialMediaSprite.png";
#mixin verticalHoverSprite($row){
#include sprite-img("/assets/icons/socialMediaSprite.png",1,$row);
&:hover{
#include sprite-img($icons,2, $row);
}
}
The I use the apply the mixins to each required class:
.socialMediaLink{
#include verticalHoverSprite(1);
&.facebook{
#include verticalHoverSprite(2);
}
&.twitter{
#include verticalHoverSprite(3);
}
}
Here is the HTML I am attaching the images to:
<span class="socialMediaLink"></span>
<span class="facebook socialMediaLink"></span>
<span class="twitter socialMediaLink"></span>
Screen shot from Chrome network panel, which shows the image loading three times:
Check that caching is not disabled in your browser (it can be disabled from about v17).
Another idea is you include your image only once:
background: url(yourimage.png) no-repeat;
And then only change it's position with CSS without including the image again:
background-position: 0px 100px;
I guess you are trying to do this way I would just suggest not to include the image for every class, change only the position.
RynoRn was correct, but I thought his answer needed expanding to be specific to Compass SCSS, and not just CSS.
To fix it using compass and scss, I changed the code from the question to the following:
The mixin now has no reference to the image, just changes the position:
#mixin verticalHoverSprite($row){
#include sprite-position(1, $row);
&:hover{
#include sprite-position(2, $row);
}
}
and we add the background image to the socialMediaLink class:
.socialMediaLink{
#include sprite-background("/assets/icons/socialMediaSprite.png");
#include verticalHoverSprite(1);
&.facebook{
#include verticalHoverSprite(2);
}
&.twitter{
#include verticalHoverSprite(3);
}
}