I installed Ruby and entered "gem install sass" and created a style.scss file on ++notepad and entered "sass --watch style.scss:style.css"
what I get: Sass is watching for changes.Press ctrl-c to stop.
error no such a file or directory style.scss
style.scss is saved on my desktop.
Do I have to put it in specific directory..?
I just wantted to taste sass and went on codepen and just a simple code
<div class="box"> </box>
sass
$blue: #3bbfce;
.box{background:$blue;}
that s what I get: Invalid CSS after "#3bbfce": expected expression (e.g. 1px, bold), was ";"
What am I doing wrong with sass?
That isn't SASS.
SASS doesn't use semi-colons or braces, and it's telling you as much. After #3bbfce, you have a semi-colon which is invalid syntax.
Here is the equivalent syntactically-correct SASS:
$blue: #3bbfce
.box
background: $blue
If you want to use the SCSS variant which does use semi-colons and braces, you need to add --scss to your command line:
$ sass --scss --watch style.scss:style.css
You need to execute your terminal commands from the directory where your .sass and .css files should live. So in your command prompt, do something like cd c:\Users\username\Desktop or cd ~\Desktop - whichever is appropriate for your operating system.
Also note that Sass has two different syntaxes - .sass and .scss. The .scss syntax uses brackets and nesting, but the .sass syntax uses whitspace for nesting. It looks like you're writing .scss but you've set the syntax to .sass; so either change the syntax or use whitespace in your code.
Related
I start to write my own SCSS along with boostrap. I follow the hierarchy of the framework like:
/* The main file and all partial files are in the same directory */
#import "variables";
#import "mixins";
#import "other-components";
Everything compiles perfectly except that every variable from variables.scss is not compiled. From my understanding, CSS doesn't have variables except for :root, so SCSS variables will be compiled directly to its value in CSS. But when it's done compiling, the variables in CSS remain the same as they're in SCSS, just name like --primary but not value like #000.
Before my post gets slammed as duplicate, here's what I've done:
I've followed Bootstrap's practice. You can check them on Github.
I use VSCode and my colors have boxes right next to them, so I've written valid hex values;
I've tried to switch to #use and use as namespace instead of #import.
I've tried to rename my variables file with and without underscore _ back and forth. It doesn't help solve the problems.
The compiler shows no error whatsoever.
I only use sass package to compile .scss to .css. No extra libraries.
main.scss
_variables.scss
main.css
Any help is appreciated!
When using standard CSS variables, you should make SASS write out the contents like this:
--variable: #{$sass-var};
Otherwise SASS will print the variable as if it's a valid value inside a CSS value (since you could technically define something like --var: $text and then use it later with content: var(--var) to print out that string). Anyways, it's because SASS otherwise doesn't know if you want to print the output of the variable, or just a string named similar to a sass variable.
I am using Vim with Syntastic syntax checking plugin, configured to lint scss files with default sass and scss-lint linters.
Opening css/main.scss in a Jekyll project, scss-lint returns error:
css/main.scss:5:1 [E] Syntax Error: Invalid CSS after "#charset "utf-8"": expected "{", was ";"
Removing the charset declaration results in the same error on the next line down, and so on...
Remove the Front Matter block and scss-lint no longer reports the error, but Jekyll requires an empty Front Matter block at the head of a sass file to process it and import partials and output css.
How do I configure scss-lint to ignore the Front Matter block?
Add a .scss-lint.yml config file in your user directory containing the following:
preprocess_command: "sed '1{/^---$/{:a N;/---$/!ba;d}}'"
scss-lint gem will look for a config file first in the current working directory, then in the user directory.
The preprocess_command intstructs scss-lint to run the text of the scss file through the sed command first.
The sed command strips out the Front Matter block; the file is then passed to scss-lint for error checking with the #charset declaration now on the first line.
If there is no Front Matter block between triple dashes --- starting on the first line, the file is passed from sed to scss-lint as is.
I have no background in SCSS, but I want to make a small change to an existing SCSS and recompile it. However, I found that variables with a dollar sign appear in the output CSS. Even if I discard my changes, the output CSS does not match the original.
For example,
#-webkit-keyframes $animation-name {...
is in my output, while
#-webkit-keyframes move-up {...
is the expected original output.
I think it is either because I didn't use the right command to compile the SCSS files, or because the SCSS files were written for an older compiler.
I have tried the following commands (I clear any output before each trial):
sass --scss main.scss main.css
sass --scss --update main.scss:main.css
sass --scss --update .
Because main.scss imports another SCSS file, I also tried copying the content of the depedent SCSS file into main.scss. This didn't make any difference.
The reason variable names are printed instead of their values is because they were not interpolated so sass uses them as the values instead.
You should write
//Assuming a variable $animation-name: move-up;
#-webkit-keyframes #{$animation-name} { ....
Which gets compiled to
#-webkit-keyframes move-up { ....
Without the interpolation sass believes that the $animation-name is the actual name intended to be used as the name for the animation.
After I installing Sass ruby gem, three new commands have been added into the system: sass, scss and sass-convert. So, my question is what the difference between sass and scss commands is, do they share the same functionality? Because both of them can turn .sass file or .scss file into .css file:
$ sass style.sass style.css
$ sass style.scss style.css
$ scss style.sass style.css
$ scss style.scss style.css
All this four kinds of directives can run correctly.
PS: I'm NOT asking the differences between SCSS syntax and Sass syntax.
The command scss is equivalent to sass --scss, where the command sass is equivalent to scss --sass. These two commands (a.k.a. the two options) use different default syntax for syntax selection.
At first, both scss and sass would parse your syntax based on your file extension. (scss would use the sass syntax parser if your file extension is sass, and vice versa.) They would behave the same in this case and that's why you get the correct result.
However, if your file doesn't have a file extension. The command would parse the syntax using the default syntax. For example, the following code would give you correct result because it uses sass syntax parser.
$ scss style.sass style.css
The following code would probably give you a parsing error because it uses scss syntax parser.
$ scss style_sass.txt style.css
Using the --help flag on your command would have given you your answer:
sass-convert:
$ sass-convert --help
Usage: sass-convert [options] [INPUT] [OUTPUT]
Description:
Converts between CSS, Sass, and SCSS files.
E.g. converts from SCSS to Sass,
or converts from CSS to SCSS (adding appropriate nesting).
scss:
$ scss --help
Usage: scss [options] [INPUT] [OUTPUT]
Description:
Converts SCSS or Sass files to CSS.
sass:
$ sass --help
Usage: sass [options] [INPUT] [OUTPUT]
Description:
Converts SCSS or Sass files to CSS.
Sass is a CSS pre-processor with syntax advancements. Style sheets in the advanced syntax are processed by the program, and turned into regular CSS style sheets. However, they do not extend the CSS standard itself.
The main reason for this is the addition of features that CSS painfully lacks (like variables).
Re the difference between SCSS and Sass, the text on the Sass home page should answer the question:
Sass is an extension of CSS3, adding nested rules, variables, mixins, selector inheritance, and more. It’s translated to well-formatted, standard CSS using the command line tool or a web-framework plugin.
Sass has two syntaxes. The new main syntax (as of Sass 3) is known as “SCSS” (for “Sassy CSS”), and is a superset of CSS3’s syntax. This means that every valid CSS3 stylesheet is valid SCSS as well. SCSS files use the extension .scss.
The second, older syntax is known as the indented syntax (or just “Sass”). Inspired by Haml’s terseness, it’s intended for people who prefer conciseness over similarity to CSS. Instead of brackets and semicolons, it uses the indentation of lines to specify blocks. Although no longer the primary syntax, the indented syntax will continue to be supported. Files in the indented syntax use the extension .sass.
However, all this works only with the Sass pre-compiler which in the end creates CSS. It is not an extension to the CSS standard itself.
So we've got a standard Compass CSS project, with the sass and css directories. As a scenario, let's say that the .scss file is called foo-all.scss.
Is it possible, via command line or config.rb or any other means, to have Compass generate both a foo-all.css file, using the "compressed" style, and also a foo-all-debug.css file using the "expanded" style?
It seems to me like Compass will refuse to generate a CSS file that doesn't have the exact same name as the .scss file, and that the most you can do is specify which directory the CSS file gets generated to.
On my MacOS X shell I've been able to generate two different css (production.css and development.css) from a original.scss sass file in this way
fc-iMac:sass fcalderan$ sass -t compact --watch original.scss:production.css &
sass -t expanded --watch original.scss:development.css
(I've used compact instead of compressed but the example is still valid)
Doing so, every time I make a change to original.scss I've got two updated css file in the same folder (with a different output style)
Of course if you have many scss files to watch, you could specify an entire directory to watch instead of a single file (see SASS documentation for further reference)
This seems like somewhat of a deficiency in Compass. Is this really an uncommon thing to do? Regardless, here's what I went with. Let's say that the folder structure is like this:
Rakefile
/foo
/resources
/css
/debug
/sass
foo-all.scss
And then in the Rakefile, to generate both compressed and expanded version, I do this:
Dir.chdir "foo/resources/sass" do
# Compile both expanded and compressed variations
debugdir = File.join(File.dirname(__FILE__), 'foo/resources/css/debug')
sh "compass compile --output-style compressed --force"
sh "compass compile --output-style expanded --force --css-dir #{debugdir}"
mv "../css/debug/foo-all.css", "../css/foo-all-debug.css"
end
In essence, I generate the compressed CSS file in a separate /debug directory, and then move it up to the /css directory, to preserve URL paths in the CSS file. The debudir shenanigans are necessary because Compass seems to require an absolute path when using the -css-dir switch (on Windows, anyway).