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?
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.
The Jekyll documentation says:
create a file with the proper extension name (one of .sass, .scss, or .coffee) and start the file with two lines of triple dashes, like this:
---
---
// start content
.my-definition
font-size: 1.2em
Jekyll asset documentation
But... why? I don't see any explanation anywhere of why Jekyll requires this. I'm worried that this will make it improper Sass/SCSS and I won't so easily be able to migrate my stuff out of Jekyll if I need to.
Additionally, I see many examples of people using Sass on GitHub's Jekyll without this practice.
For instance:
NSHipster.com (example from screen.sass)
#import './bourbon/bourbon'
#import './neat/neat'
#import './base/base'
If you dig a little further in the documentation you can find why front matter ?
And it's only necessary for your entry scss/sass file.
I am trying to use Bourbon, Bitters & Neat. However, I get en error when I import them.
The error is:
Error: Undefined variable: "$font-stack-system".
on line 6 of base/_variables.scss
from line 6 of base/_base.scss
from line 2 of base.sass
File structure:
sass/base (bitters)/ content of biitters is here
sass/bourbon/content here
sass/neat/content here
base.sass is the file that I am importing bourbon etc into.
base.sass is located in sass/base.sass
Any help?
They are installed via ruby gems.
Just make some changes in base folders that gets created after you install bitters. Goto _variable.scss
copy and paste the following code under //Typography
// Typography
$sans-serif: $monospace;
$serif: $georgia;
$base-font-family: $sans-serif;
$heading-font-family: $base-font-family;
I have my project laid out like so:
-Project
-css
-import.scss
-_sass/
main.scss
The contents of import.scss are:
---
---
#import "main.scss";
What I expected to happen was for main.scss to be imported into import.scss, then, import.scss would compile to import.css within the genrated _site/ directory.
Instead, I get the following error
Conversion error: There was an error converting 'css/import.scss'.
jekyll 2.0.3 | Error: Invalid CSS after "-": expected number or function, was "--"
I'm guessing it's complaining about the YAML front-matter at the top of import.scss, but I'm unsure what the solution is.
I had the same error, but here was my fix: use the “---” YAML front-matter only on the /css/*.scss files (e.g. your import.scss), but not on the partials.
The error seems to be referring to front-matters in the partials (/_scss) files. Once I took though out, the Sass started compiling again.
Hope this helps!
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