I made a standard installation of SASS (Dart Sass 1.16.1), following instructions: https://sass-lang.com/install.
My setup:
node -v : v11.6.0
sass --version: 1.16.0
OS: Ubuntu linux 18.04 LTE.
SASS installation:
npm install -g sass
Process flow:
First creation of CSS from SCSS:
sass index.scss index.css
Attemt to start [--watch]: (the both files are located in same folder):
sass --no-source-map --watch index.scss index.css
Also tried with colon [:] between file names, which actually is only required when specifying folders:
sass --no-source-map --watch index.scss:index.css
After activating the watch, I change something [color: red;] to [color: blue], but css is not update when saving scss.
Terminal printout after running [--watch]: None.
My SCSS file:
$color: blue;
.div-1 {
background-color: $color;
}
The CSS result without running [--watch]:
.div-1 {
background-color: red;
}
I Think the problem might be, that you need to use : between the input and the output.
sass --no-source-map --watch index.scss:index.css
Reference is here:
https://sass-lang.com/guide
Related
In trying to learn/use sass for 1st time, I used Homebrew to install dart-sass on recently updated High Sierra 10.13.3 . That worked and sass --version shows 1.1.1 I created a simple .scss file:
$color: #d9534f;
body {
color: $color;
}
and while in the same directory, then issued:
sass main.scss main.css --trace
in console and got:
Error reading main: Cannot open file.
dart:io _File.readAsBytesSync
package:sass/src/io/vm.dart 27 readFile
package:sass/src/compile.dart 33 compile
package:sass/sass.dart 63 compile
package:sass/src/executable.dart 110 main
What do I need to change, learn or do to get this working?
Oops. Reinstall. I ran
brew update multiple times, then
brew uninstall sass then
brew install --devel sass/sass/sass
and now
sass main.scss main.css
works.
i'm getting this error when i try to compile a scss file with:
sass test.scss test.css
the error in particulary is:
C:/Ruby24-x64/lib/ruby/gems/2.4.0/gems/sass-3.5.2/lib/sass/util.rb:637: [BUG] Segmentation fault
I installed Ruby and Sass via gem. Reinstalling and creating an empty test.css didn't solve the problem.
this is the scss file:
$font-stack: Helvetica, sans-serif
$primary-color: #333
body
font: 100% $font-stack
color: $primary-color
Is there something I'm missing?
Make sure your extension is right! If you use the indented syntax, use .sass, otherwise use .scss. Fixing that lets it compile as expected for me.
I am trying to add scss to my grunt file so i ran the following command:
npm install grunt-contrib-sass sass --save-dev.
Then i added the following to my Gruntfile.js
grunt.loadNpmTasks('grunt-contrib-sass'); and
grunt.initConfig({
...
sass: {
dev: {
files: {
'<%=meta.src %>assets/css/all2.css': '<%=meta.src %>assets/scss/build.scss'
}
},
dist: {
files: {
'<%=meta.dist %>/assets/css/all.min.css': '<%=meta.src %>/assets/scss/build.scss'
}
}
},
When i run this i get the output of the build.scss in the console and it creates a empty file?
What am i missing????
Running "sass:dev" (sass) task
#flupdidup {
font-weight: bold;
}
Running "sass:dist" (sass) task
#flupdidup {
font-weight: bold;
}
Done, without errors.
Process terminated with code 0.
a minimal recreation of the issue can be found here: https://github.com/Peter-Optiway/grunt-sass-issue
Switching to grunt-sass was always an option, but your issue was not because of that. The issue was because you had sass install using npm.
npm install -g sass
When you look at that
$ sass --help
Compile Sass to CSS.
Usage: dart-sass <input>
-s, --style Output style.
[expanded (default)]
-c, --[no-]color Whether to emit terminal colors.
--[no-]trace Print full Dart stack traces for exceptions.
-h, --help Print this usage information.
--version Print the version of Dart Sass.
It has no output parameter. While grunt-contrib-sass expects the sass to be install from the ruby gem.
$ sudo gem install sass
Now sass will have different options
$ sass --help
Usage: sass [options] [INPUT] [OUTPUT]
Description:
Converts SCSS or Sass files to CSS.
...
And now the build works fine
$ cat ./dist/assets/css/all.min.css
main #flupdidup {
font-weight: bold;
background: #eeffcc; }
/*# sourceMappingURL=all.min.css.map */
I managed to fix the issue by changing to the grunt-sass package instead.
npm install --save-dev load-grunt-tasks load-grunt-tasks
Then i added the following to my Gruntfile.js require('load-grunt-tasks')(grunt); and it just worked.
(.sass)
div
background-color: cyan
Build error: Transform Sass on dart_gol|lib/forms_menu.sass threw
error: Invalid CSS after "...und-color: #333": expected "{", was ""
on line 6 of standard input
I have Sass installed:
sass --version
"Sass 3.4.22 (Selective Steve)"
I just began using the Sass transformer using pub. I got that error; then went back to --watch . (using Sass via terminal) to see if it happened there. The error was the same both times.
I'm using a .sass extension and it is giving me the problem. I'm using the Sass Basics as a guide.
I did not have a problem when using .scss, with the bracket formatting. I'm not sure why .sass has a problem.
The problem appears to be in the dart_sass_transformer. It isn't properly compiling the sass into css.
Turning off the transformer (removing it from the pubspec) and running sass via Terminal is working properly.
The code in question is just fine.
It tells you it was expecting {
What you need is:
div {
background-color: cyan
}
This question already has answers here:
Is Sass 3.3 compatible with Compass?
(3 answers)
Closed 7 years ago.
I've encountered the following issue with grunt-contrib-sass/compass:
(https://github.com/nex3/sass/issues/746)
Compiling this:
.badge {
border: 1px solid black;
&-info {
background:blue;
}
}
Errors this:
Sass Error: Invalid CSS after " &": expected "{", was "-info {"
"-info" may only be used at the beginning of a compound selector.
I have the latest SASS version (3.3.7) installed on the system (Ubuntu 12.04.4 LTS), and running scss from the command line on a fresh file with above code DO work.
However creating a fresh project with yo webapp (Yeoman generator-webapp), with Grunt, gives the above error.
Any thoughts?
As #cimmanon kindly commented, this is probably due to version conflict between SASS and Compass.
As Compass uses it's own version of SASS and I was using grunt-contrib-compass (and not SASS), and my version of Compass was < 1 - the effect was that the 3.3 version I had on my system wasn't used.
Watch out for that when using out-of-the-box Yeoman generators.
So when compiling this with 3.3.6 of SASS I get:
.badge {
border: 1px solid black;
}
.badge-info {
background: blue;
}
But with 3.2.19 I get the same error you do:
Invalid CSS after " &": expected "{", was "-info {"
"-info" may only be used at the beginning of a compound selector.
There's a rather involved history to using suffixes this way, see: A Change in Plans for Sass 3.3
So you have a SASS version problem somewhere in your toolchain.