I started to importing shared things like variables and mixins in one place - css manifest file. Now I'm importing some Compass mixins using direct path to the files.
My question is if using #import 'compass' injects the whole framework into application.css or is it done by looking by references in sass files and then importing only needed mixins?
I don't want to include everything.
According to the docs #import 'compass' will import CSS3, Typography and Utilities modules. These modules won't inject anything into your output CSS, they contain only mixins.
By limiting import to a specific module or submodule (i.e. #import 'compass/css3/image') you will reduce the time required to compile your SASS files into CSS.
For example, lets create two files.
// all.scss
#import "compass";
.candy {
#include background(linear-gradient(top left, #333, #0c0));
}
// module.scss
#import "compass/css3/images";
.candy {
#include background(linear-gradient(top left, #333, #0c0));
}
If we compile them (compass compile sass/FILENAME.scss), result CSS will be identical:
.candy {
background: -webkit-gradient(linear, 0% 0%, 100% 100%, color-stop(0%, #333333), color-stop(100%, #00cc00));
background: -webkit-linear-gradient(top left, #333333, #00cc00);
background: -moz-linear-gradient(top left, #333333, #00cc00);
background: -o-linear-gradient(top left, #333333, #00cc00);
background: linear-gradient(top left, #333333, #00cc00);
}
Now lets add --time argument to the compilation command and compare the results. For my machine, it took 1.516 s to compile all.css vs only 0.108 s for module.css.
Related
I'm running Visual Studio 2019 (16.3.9) using the Web Compiler extension (1.12.394) to compile scss files.
Here is a simple case that works. I have a file - test.scss:
$color: blue;
.button {
background-color: $color;
}
This gets compiled to this:
.button {
background-color: blue;
}
But if I try and do something like what is outlined here - https://sass-lang.com/documentation/at-rules/use#configuring-modules - it doesn't seem to work. I create another file - _base.scss:
$color: red !default;
.button {
background-color: $color;
}
Then I change my test.scss file to this:
#use 'base' with (
$color: blue
);
I expected that the compiled output would be the same as the original example:
.button {
background-color: blue;
}
But this is what I get:
#use 'base' with (
$color: blue
);
My guess is that the compiler is not happy with the #use rule, but I don't see any errors. _base.scss & test.scss are in the same directory. I'm only new to Sass, but surely this should be possible?
This is filed as an issue on Web Compiler on GitHub:
#use does not work
The response is:
#use its currently supported only by dart-sass and other platforms use
#import for now so this is not a Web Compiler issue
I am also new to Sass, and I can't figure out how to tell what version of Sass is supported in Web Compiler. (Edit: Just found SO question Which version of SASS is my WebCompiler extension using?)
Frustrating, because I am struggling with preventing duplicated CSS from #imports and it seems like #use is the answer.
As mentioned, I'm new to Sass so was jumping straight in with the latest features. My first hunch, as mentioned by #Bauke, is that the current version of Web Compiler doesn't support #use (and other new features of Sass).
Based on this, I opted for a workaround with currently supported features that achieves the same result.
_base.scss:
$color: red !default;
.button {
background-color: $color;
}
test.scss:
$color: blue;
#import 'base';
Compiled output:
.button {
background-color: blue;
}
Am trying to use SASS in my project. I wrote a SCSS and then converted that to CSS.
The SCSS I created is ,
$primaryColor: #D92231;
body {
$primaryColor: #ccc;
background: $primaryColor;
}
p {
background-color: $primaryColor;
}
ui-btn {
background-color: $primary-color;
}
Converted that SCSS to CSS by the command,
sass-convert style.css style.scss
Finally I got the CSS generated. Generated CSS is ,
$primaryColor: #D92231
body
background: $primaryColor
p
color: $primaryColor
ui-btn
background-color: $primary-color
I linked this to my html page but no effect. Where am I going wrong ???
The generated CSS isn't actually CSS as sass-convert doesn't actually convert sass to css.
It converts CSS to SASS or SCSS dependant on what you want.
To convert the SCSS to SASS you will need to run the below script. You will need SASS installed.
sass input.scss output.css
Alternatively, you can run a script to have Ruby watch the SCSS file and update on every save.
Like so:
sass --watch input.scss:output.css
Read more here: Documentation
Try your Sass at sassmeister.com and you'll see that primary-color variable is not defined. I believe your code never gets compiled because of that error. See : Sassmeister output in Github Gist
For example:
app.scss
#import url('orange.css');
#import 'navel.scss';
orange.css
.orange {
color: orange;
}
navel.scss
.navel {
#extend .orange;
}
In SASS if you add
#import "test.css";
or
#import url("test.css");
it is compiled to pure css #import directive. Because the file has a .css extension, the SASS preprocessor thinks that this is pure CSS and the code inside is not involved in the SASS language operations. In your example, if you try to extend .orange you will get:
The selector ".orange" was not found.
Shortly: the extending is possible only if you use SASS files.
#extend is not possible by importing a CSS file. You have to
convert your css into an SCSS partial (or file)
#import this partial
#extend CSS classes
The downside to this is you would be left with duplication. Supposed this import is a 7000 line long CSS file (like bootstrap), then you are going to be in trouble
In order to use
#include box-shadow(0 0 10px black);
you would have to include the "library":
#import "compass/css3";
later in the file, I am including other scss:
#import "sidebar/main";
and in that sidebar/_main.scss, when i call the same:
#include box-shadow(0 0 10px black);
compass breaks with an error:
< ... Undefined mixin 'box-shadow'.>
Does this mean that I'll have to abstract the libraries in my own library file, and then include that file in each and every other scss???
Rename the sidebar/main.scss to sidebar/_main.scss - no other code changes needed.
This instructs sass compiler not to compile the sidebar/main.scss file into a separate css file, but include it in the main scss file.
The process works like this:
sass compiles the main scss file with all inclusions and generates the css (no errors here, since compass is included at top)
sass compiles all other scss files that don't begin with _, but since these don't have compass included, it throws the error.
I am ugrading an app from rails 3.0 to 3.2 there is a problem with some of my scss code. stylin.css contains:
/*
= require_self
= require_tree .
*/
stylin.css.scss contains:
#import "palette";
#import "round";
#import "html_elements";
#import "graph";
#import "menu";
#import "button";
#import "pop_up";
#import "basic_abrev";
When the styling.css is updated 'palette' is imported but nothing else is imported. Consequently, I get the following error when loading the first page:
Undefined mixin 'round_corners'
I think it is because the top of 'round.css.scss' includes the following:
#mixin round_corners($radius: 8px) {
border-radius: $radius;
-moz-border-radius: $radius;
-webkit-border-radius: $radius;
}
If no variable passed the default would be 8px. In the following case '20px' is passed to the mixin.
#include round_corners(20px);
This worked in 3.0. Is this no longer possible? If not, I'll have to create numerous mixins or discontinue using the mixing / include feature for rounding corners.
thanks.
I found this here:
If you want to use multiple Sass files, you should generally use the Sass #import rule instead of these Sprockets directives. Using Sprockets directives all Sass files exist within their own scope, making variables or mixins only available within the document they were defined in.
I found this here:
When using Sprockets 2.x with Sass you will eventually run into a pretty big issue. //= require directives will not allow Sass mixins, variables, etc. to be shared between files.
Found this here:
Sprockets provides some directives that are placed inside of comments called require, require_tree, and require_self. DO NOT USE THEM IN YOUR SASS/SCSS FILES. They are very primitive and do not work well with Sass files. Instead, use Sass's native #import directive which sass-rails has customized to integrate with the conventions of your rails projects.
When I deleted this (sprockets commands) from the stylin.css.scss file, everything worked.
/*
= require_self
= require_tree .
*/