Gulp Function:
function style() {
//1.where is my scss
return gulp.src('src/scss/**/*.scss') //gets all files ending with .scss in src/scss
//2. pass that file through sass compiler
.pipe(sass().on('error',sass.logError))
//3. where do I save the compiled css file
.pipe(gulp.dest('src/css'))
//4. stream change to all browsers
.pipe(browserSync.stream());
}
Folder Structure:
Expected output:
syles.css will have styles written in syles.scss and vendor.scss
Actual Output:
syles.css will have styles written in syles.scss alone. vendor.scss styles are not added in styles.css
Your actual output is correct. You need to #use a partial into your styles.scss if you want only one file styles.css output containing the vendor.scss content.
Modules
You don't have to write all your Sass in a single file. You can split
it up however you want with the #use rule. This rule loads another
Sass file as a module, which means you can refer to its variables,
mixins, and functions in your Sass file with a namespace based on the
filename. Using a file will also include the CSS it generates in your
compiled output!
from https://sass-lang.com/guide
so in your styles.scss at the top:
#use 'vendor;
and then rename vendor.scss to _vendor.scss
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'm trying to use multiple variables accross my differents files, but I got an error saying Undefined variable.
The example:
base.scss
$dark-blue: #031f60;
$blue: #36b2e6;
$dark-grey: #747577;
center.scss
#use 'base';
p {
color: $dark-blue;
}
I specifically used #use because SASS website mentioned that it will be deprecated in the future.
#use only works with dart-sass so far, nonetheless,
The naming scheme for files that you want to include should have an underscore _ at the start of the file name.
for example if anyone wants to include a variables file they should name it as _variables.scss rather than variables.scss.
In your case, change the name of base.scss to _base.scss and it should work as long as they are in the same folder/path given is correct.
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.
I would like the file watcher for SCSS files to ignore files with file names starting with an underscore, for example _buttons.scss.
How would I do that?
Start by adding a _ to a file that you want to be ignored... Done! From the documentation:
Partials
If you have a SCSS or Sass file that you want to import but don’t want
to compile to a CSS file, you can add an underscore to the beginning
of the filename. This will tell Sass not to compile it to a normal CSS
file. You can then import these files without using the underscore.
For example, you might have _colors.scss. Then no _colors.css file
would be created, and you can do
#import "colors";
So adding an underscore will do the job. Just don't import.
Be careful naming your files because if you have a style.scss and _style.scss Sass will see these as the same filename and trow an error:
>>> Change detected to: /Users/allcaps/test/style.scss
WARNING: In /Users/allcaps/test:
There are multiple files that match the name "style.scss":
_style.scss
style.scss
A simple workaround will be to add two underscores: __style.scss.
#LazyOne has the right idea. A Scope can be created that excludes files that being with an underscore (_). The page at http://www.jetbrains.com/phpstorm/webhelp/scopes.html#d437174e402 has more information about this, but basically you select the folder you want after creating a custom scope and then in the scope field append it again with && ! between the two and exclude files starting with an underscore.
For example:
file:website/css//* && !file:website/css//_*