I'm using Compass 0.12.2 which uses this code for its border-radius mixin:
https://github.com/chriseppstein/compass/blob/stable/frameworks/compass/stylesheets/compass/css3/_border-radius.scss
As easy to see, the default value for the argument $radius is set with the variable $default-border-radius which is defined at top of the file.
Then why does this
#include border-radius; // or #include border-radius();
throw the error Mixin border-radius is missing argument $radius ?
Shouldn't it use the default value?
In my case this was caused by bootstrap-sass defining its own border-radius mixin, which was overriding the compass one.
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.
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.
How can I set Sass to validade my scss files and output any errors on console?
I am writing this class in order to test it:
.test {
color: #ff3;
border-right: 5px solid blueee
aaaaaa
}
And when I hit Save, the console shows:
>> File "scss/app.scss" changed.
Running "sass:dist" (sass) task
Done, without errors.
But obviously as you can see, there is an error on my scss file. How can I display that on console?
Your best bet would be to try either a Sass linting tool or a CSS linting tool (or both) depending what it is you want to do.
For Sass there is grunt-scss-lint
For Css there is grunt-contrib-csslint
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.
In a Compass config.rb file, you can set the environment to :development or :production.
Is it possible to use this setting in Sass conditionals? Here's what I want to do:
#if (environment === :development) {
#import 'debug';
}
Solved: I found the answer while drafting my question. Will post anyway since I didn't find anything definitive that actually explains this.
Thanks in part to this issue in the Compass repository, I found that you can use settings-based conditionals in Sass like this:
#if compass-env() == 'development' {
body {
color: red;
}
}
Confirmed this works with Sass 3.2.5 + Compass 0.12.2 + Ruby 1.9.3p194.
However you can't do this:
#if compass-env() == 'development' {
#import 'debug';
}
That throws a Syntax Error: "Import directives may not be used within control directives or mixins.
So the workaround is to #import the file and then wrap its entire contents in the environment conditional.
This can done (when Compass is not available) by storing environment information in an dynamically generated SCSS file, which can then be imported wherever this information is required. This should be done before the SASS compiler is started.
Here's what the build script can look like (i.e. build.sh):
#!/bin/bash
echo "\$ENV: 'production';" > ./_sass/env.scss
../node_modules/.bin/node-sass ./_sass/style.scss ../_site/css/style.css --source-map=true
This SCSS file can the be used like so:
#import 'env';
#if ($ENV == 'production') {
...
// some SCSS styling to be used in production only
...
}