compass compile: Invalid CSS after "...lor}: #{$value}": expected "{", was ";") - css

I am trying to handpick the parts of a certain theme/plugin we want to use in our site by tinkering with the source SCSS files. The theme in question is Vali Admin.
I haven't used SASS or LESS in ages. Not familiar with compiling them at all. I just installed ruby and the compass (through gem install) in my system, and ran compass compile on the root directory of the vendor theme. However I am getting the following error:
error sass/main.scss (Line 4 of sass/1-tools/bootstrap-source/_root.scss: Invalid CSS after "...lor}: #{$value}": expected "{", was ";")
I am also getting a couple of warnings about "interpolation near operators". I'll paste it here if needed.
I have no idea why I am getting that error. I haven't made any changes to the SCSS files yet, I am simply trying to compile the vendor source code.
Here is the SCSS:
:root {
// Custom variable values only support SassScript inside `#{}`.
#each $color, $value in $colors {
--#{$color}: #{$value};
}
#each $color, $value in $theme-colors {
--#{$color}: #{$value};
}
#each $bp, $value in $grid-breakpoints {
--breakpoint-#{$bp}: #{$value};
}
// Use `inspect` for lists so that quoted items keep the quotes.
// See https://github.com/sass/sass/issues/2383#issuecomment-336349172
--font-family-sans-serif: #{inspect($font-family-sans-serif)};
--font-family-monospace: #{inspect($font-family-monospace)};
}

Just delete of the double "-" in the following lines:
old: --#{$color}:
new: -#{$color}:
this works fine.

I was getting this same error for Bootstrap 4.3 (https://getbootstrap.com/docs/4.3) in the _root.scss file.
I'm using CodeKit to compile Scss and it was pretty out of date. I realised that it didn't like to compile --#{$varname where -- and # live next to each other without a string in between. Whereas this line worked fine: --breakpoint-#{$bp}: #{$value};
My solution:
Updating CodeKit fixed the issue so I imagine you're not using the latest version of Compass?

Don't make any changes in the code. Just upgrade the version of sass gem that you are using. You can install the latest version using gem install sass.
I had version 3.4.25 and it was giving me the exact same error. I installed version 3.7.4 and everything is fine.
Check here for more information - https://github.com/sass/sass/issues/2383#issuecomment-399755755

change to
--#{''+$color+''}: #{$value};
and worked :)

My solution was to wrap the '--' into a sass variable:
#{'--'}#{$color}: #{$value};

Related

Symfony encore, variables in sass and scss

I have a variable file in scss and import it with Symfony encore for my scss and sass files (see the code below).
// enables Sass/SCSS support
Encore.enableSassLoader((options) => {
options.implementation = require('sass')
options.additionalData = `#import "#/scss/variables.scss"`
});
The problem is there are sass (node-module(s)) and scss (template) files in my project which needs them.
If I run it like the snippet above it went fine for the sass files, but the scss files give an error: 'SassError: expected ";" after the #import line in the additionalData'.
However if I add the ; after the import line I get an error from the sass files 'SassError: semicolons aren't allowed in the indented syntax.'.
It's probably a small issue which I miss but I have no clue at the moment. I tried it with the added parameter indentedSyntax with true and false in the sassOptions but this was no success.
Anyone have an idea?
With kind regards

Sass Rails doesn't support map syntax (object variables)

I'm getting the following error when trying to use Sass Maps (which look like object variables):
Invalid CSS after " primary": expected ")", was ": #3097D1,"
(in /Users/.../app/assets/stylesheets/new_design.scss:19)
I reproduced the error by using the following minimal example:
$theme-colors: (
primary: #3097D1,
secondary: black
);
#each $key, $val in $theme-colors {
.foo.#{$key} {
color: $val;
}
}
Expected:
.foo.primary {
color: #3097D1;
}
.foo.secondary {
color: black;
}
But getting the error mentioned.
sass-rails, ~> 5.0.0 seems to be installed according to the Gemfile:
gem 'sass-rails', '~> 5.0.0'
I'd assume that loads one of the latest sass versions which should support object variables.
I have the feeling the current version I have is not recognizing this syntax.
How can I make sure I have the right sass version? Is there anything else I have to do to compile this syntax successfully?
bundle show sass-rails shows 5.0.6, which seems recent.
as discussed in the comments there is a stackoverflow discussion about a similar issue with the map sass syntax
The discussion refers to Github Issue 1088
I quote
There's a number of issues with the indented syntax, and Sass maintainers aren't going to fix them. :( They say, the .sass parser is weird and hard to refactor.
I find Sass syntax to be quicker to type and easier to read. It is deprived of the visual noise:
indented_vs_bracketed
It's also much easier to do copy-pasting.
So Sass maintainers, PLEASE don't let the indented syntax fall behind!
Probably by digging down in the discussion we will be able to find the solution. Now I am quoting the solution from the owner of the post Ionică Bizău:
wrapping the values between quotes, saving, reloading in browser without any errors, and then removing the quotes back and reloading the page in browser solved the problem. Maybe it was something cached somewhere... but I can't understand where. I didn't restart rake or ran any bundle command... Thanks! :)

using Jeet and Compass results in an error?

Whenever I try to use a combination of Jeet and Compass I get the following error:
Syntax error: Invalid CSS after \" gutter\": expected \")\", was \": 3,\"\A on line 3 of sass/jeet/_settings.scss\A from line 15 of sass/jeet/index.scss\A from line 7 of sass/screen.scss\A \A 1: // Grid Settings\A 2: $jeet: (\A 3: gutter: 3,\A 4: parent-first: false,\A 5: layout-direction: LTR\A 6: );\A 7: \A 8: // Sass Namespacing Function
When I run just Jeet or just compass everything works fine. I've tried different versions of SASS, Jeet, and Compass but I can't seem to find either the right combination or the right settings here.
Current Versions:
Sass 3.3.0.alpha.149 (Bleeding Edge)
Compass 0.12.2 (Alnilam)
I previously had both at their latest versions.
What can I try?
Recently tried:
- Updating to Compass 0.12.6 which results in the new error: ERROR: Cannot load compass.
Previously, this is the related code from Jeet that was throwing the error:
// Grid Settings
$jeet: (
gutter: 3,
parent-first: false,
layout-direction: LTR
);
// Sass Namespacing Function
#function jeet($var) {
#return map-get($jeet, $var);
}
$g: jeet(gutter);
error sass/jeet/_settings.scss (Line 3: Invalid CSS after " gutter": expected ")", was ": 3,")
I am using it in a Yeoman scaffold with
Sass 3.3.4 (Maptastic Maple)
Compass 0.12.5 (Alnilam)
It is being compiled by "grunt-contrib-compass": "~0.7.0" and so far have had no errors.
edit:
Also those settings appear to be stylus not scss.

Sass: How can I decode JSON file directly into a Sass variable?

Is possible decode a JSON file with Node-Sass?
Ex:
#import "../data/data.json";
I need iterate this data directly into a variable
Any help is welcome :)
sass-json-vars is an excellent gem, but won't work with node-sass (which is a requirement of the original question).
Instead, try node-sass-json-importer, which is essentially the same thing, only re-worked to fit into node-sass's importer api.
There's a gem called Sass JSON Vars that does exactly what you want.
You can install the gem with the following command line code:
gem install sass-json-vars
HOW TO USE Sass JSON Vars
For projects using Sass >= 3.3
Place variables in a JSON file:
// variables.json
{
"font-sans": "Helvetica, sans-serif",
"colors": {
"red": "#c33"
}
}
Import the file in Sass to expose variable names:
#import "variables.json"
body {
color: map-get($colors, red);
font: $font-sans;
}
Require sass-json-vars when compiling:
sass style.scss -r sass-json-vars
For projects using Sass <= 3.2
Place variables in a JSON file:
// variables.json
{
"font-sans": "Helvetica, sans-serif",
"colors-red": "#c33"
}
Import the file in Sass to expose variable names:
#import "variables.json"
body {
color: $colors-red;
font: $font-sans;
}
Require sass-json-vars when compiling:
sass style.scss -r sass-json-vars
More info :
The project's Github page
Sharing Data Between Sass and JavaScript with JSON
I'm not quite sure how you would do it but here is a great example on how to add custom ruby functions to sass:
https://gist.github.com/chriseppstein/1561650
And heres one on how to parse json:
Parsing a JSON string in Ruby
Maybe after putting them together you could do something like this?
module Sass::Script::Functions
def json(Sass::Script::String)
require 'rubygems'
require 'json'
JSON.parse(string)
end
end
Add it to the end of your config.rb file, and make sure you have json ruby gem installed:
gem install json
and run:
compass compile --force
to get it all to work.
* this is obviously untested and doesn't work, but it might help you get where you need to go.

Add timestamps to compiled sass/scss

Is it possible to automatically add a timestamp on the compiled CSS file using SASS?
e.g.
/* CSS Compiled on: {date+time} */
...compiled css goes here...
I've checked the SASS and Compass docs but no mention of such a feature.
I don't know of any built-in SASS or Compass feature for this, but it's not too hard to add a custom Ruby function to do it. (See the section entitled "Adding Custom Functions" in the SASS reference here.)
Your file with the Ruby function would look like this (let's call it "timestamp.rb"):
module Sass::Script::Functions
def timestamp()
return Sass::Script::String.new(Time.now.to_s)
end
end
And you'd reference the new timestamp function in your SASS file like this:
/*!
* CSS Compiled on: #{timestamp()}
*/
You just need to make sure your "timestamp.rb" file is loaded when you compile the SASS, either by requiring it from a Compass config file, or by using the --require parameter with the SASS command line. When all is said and done, you should get output like the following:
/*
* CSS Compiled on: 2012-10-23 08:53:03 -0400
*/
If you are using the command line version of SCSS you can do the following:
Install sass-timestamp
gem install sass-timestamp
Use it within your code like (see documentation for more information)
/* Compiled on #{timestamp()} */
Require it on the command line
scss -r sass-timestamp ...
Output will be
/* Compiled on 2015-02-02 13:01:40 +0800 */
Note: Use #{unix_timestamp()} for a unix timestamp
I don't know if everyone needs it (cause the question is a long time answered ago),
but a simple solution is to write the timestamp/date
to a single sass/scss file as SASS variable,
import them to the location where the timestamp should be
and then let a comment in sass write them out.
Nothing to install, compile or anything else - just using scripts and sass:
1.) Write the timestamp to a separate sass file: (Here a dos-script, but you can also use any other script/language to generate the simple file):
echo $BuildTimeStamp : "%date% %time%"> _timestamp.scss
2.) Import the generated file with the timestamp:
#import '_timestamp.scss';
3.) Write the header out as comment:
/*! Automatic build at: #{$BuildTimeStamp} */
Write the timestamp before you call the original sass command
and it will also work without the need to install, build or do anything else.

Resources