I'm using singularitygs 1.2.1, compass (1.0.0.alpha.19), sass (3.3.7, 3.2.19)
when I add:
#include add-gutter(3px);
#include sgs-change('gutter styles', 'fixed');
it completely breaks the gutters
also getting this warning on the command line:
WARNING: DEPRECATION: In order to remove global variable naming conflicts, Singularity's settings have been moved into the single $singularity variable. Please refer to our documentation (https://github.com/Team-Sass/Singularity/wiki) on how to update your settings. In the next version of Singularity, this warning will be removed. split has been returned.
if I remove the sgs-change and just use:
#include add-gutter(3px);
I get:
error sass/style.scss (Line 201 of _background-grid.scss: Incompatible units: 'px' and '%'.)
I followed the wiki on how to add fixed width gutters, what am I missing, or is this a bug?
Two things are happening here:
The docs were incorrect, it should be #include add-gutter-style('fixed'). They have since been updated.
The error you're getting is from using the background grid with px gutters. This should produce a grid with no visible gutter, but rather alternating color columns. Please file an issue so we can fix it.
Related
I want to start using #use instead of #import, since #import is going to be depreciated. I have a partial:
// _test.scss
$color1: #ee00ee;
referenced by:
// demo.scss
#use test;
html {
color: $color1;
}
If I comment out the html: $color1 line, I get no error. If I delete _test.scss I get a file not found error, so it seems the file is included.
But when everything is in place, I'm getting an undefined variable error. If I replace #use with #import, I get no error and the generated css has the expected color.
I'm on a Mac (big sur), using dart sass:
% dart --version
Dart SDK version: 2.9.3 (stable) (Tue Sep 8 11:21:00 2020 +0200) on "macos_x64"
The docs I've seen say that #use will replace #import, so I thought just changing to #use would be easy. Is there a step I'm missing?
It's a bit late, but as I understand it, #use treats the partial as modules, which more closely resembles the way JavaScript treats ES modules: In particular, the #use statement makes available a namespaced bit of external code, which changes the way you reference imported variables (and mixins and functions as well):
// demo.scss
#use test;
html {
color: test.$color1;
}
Some documentation is found in the article about #use on the SASS docs, and this article explains dart-sass' namespacing in some detail.
Why does Inno Setup treat the following line as an error:
#include <C:\ABOfficeProjects\Install\InnoSetupProject\VCL_Styles\VCL_Styles.iss>
Why can't I use angle brackets like this?
That problem turned to be a syntax highlighter bug which I've created a report for.
Here's the link: https://groups.google.com/g/innosetup/c/oZ87CLZyOXM
How do I escape variable in url? Seems like this nor this variant do not work
#include image("R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=")
#mixin image($base64)
background: url(data:image/gif;base64,#{$base64}) //this is line N
//background: url("data:image/gif;base64,#{$base64}")
(Line N: Properties are only allowed within rules, directives, mixin
includes, or other properties.)
I tried sass 3.4.22 and 3.5.0-rc.1
The error message tells you that the background property needs to be wrapped by one of the named options.
#mixin image($base64)
background: url(data:image/gif;base64,#{$base64})
.class
#include image("R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=")
compiles to
.class {
background: url(data:image/gif;base64,R0lGODlhAQABAIAAAAUEBAAAACwAAAAAAQABAAACAkQBADs=);
}
with SassMeister and Sass v3.4.21. I had to change the order of the mixin definition and its usage to make the compilation work. I don't know if this is just a compiler thing, it might work the other way around for you.
I'm fairly new to Compass, but I have been trying to use Compass in a project to generate my icon sprites. See this tutorial:
http://beta.compass-style.org/help/tutorials/spriting/
IMO, the tutorial isn't exactly clear. To start, the tutorial never tells you to create the "_icons.scss" file that contains the "all-icon-sprites" mixin.
#import "icon/*.png";
#include all-icon-sprites;
The result of this is an error:
"Syntax error: Undefined mixin 'all-icon-sprites'."
So I added the "_icons.scss" file to my project, and changed the code to:
#import "icon/*.png";
#import "_icons";
#include all-icon-sprites;
Now, I get this error:
Syntax error: Invalid CSS after " $delete-position": expected ")", was ": $icon-delete-..."
on line 28 of /path/to/_icons.scss
Can anyone explain to me what I'm doing wrong? Or is the problem actually with the "_icons.scss" file?
The tutorial doesn't tell you to import the _icons.scss, because it is not required. You either import the png files or the generated file -- not both. They are the same, except if you import the png files, you end up importing a generated stylesheet that is kept up to date automatically as the png files change (renames, added, removed, etc).
do you have any png files in the <images>/icon directory?
To be honest, this error is one I would expect to see if the compass version that is processing the stylesheet isn't the one you're using on the command line. Are you compiling with rails or the CLI?
I am using SASS and it has been working, but now I get this...
Syntax error on line 1: Properties aren't allowed at the root of a document.
My file is using variables in the SASS format.
$blue-muted: #222244
$red-muted: #442222
$green-muted: #224422
When I remove the variables (and replace the values with the actual colors), it compiles fine. What is wrong here?
EDIT: My confusion stemmed from having installed HAML 3.0, but getting behavior consistent with an early 2.0 version. It turned out that I had a SASS command line tool from an old version in my path and it was running instead of the current version.
Looks like you are using the new SCSS syntax which should look like:
$blue-muted: #222244;
if you want to use sass, the colors should be declared as:
!blue-muted = #222244