I'm using sphinx with the ScssLexer class pygments.lexers.css.ScssLexer.
When I try to include a .. code-block: scss in an .rst file that uses variables, such as:
.. code-block:: scss
h1 {
color: $blue;
}
I get the following warning:
WARNING: Could not lex literal_block as "scss". Highlighting skipped.
The variables are defined in an scss file that is meant to be included in the code by the reader of the docs.
How can I fix this?
Related
I have two scss files in a folder scss which will be included into a primary app.scss file. All of these are transpiled to corresponding css files in /css folder:
scss/global/swatches.scss:
$swatch-bg: rgba(30,30,45,1);
scss/global/panels.scss
.panel {
background-color: $swatch-bg;
}
And then they are both included in my app.scss file:
scss/app.scss:
#import 'global/swatches.scss';
#import 'global/panels.scss';
and then I run:
sass --watch scss:css
This correctly creates all expected files inthe css/folder.
However, if I now modify panels.scss which contains a reference to a variable (imported in app.scss) the watcher complains it can't find the variable. But if I edit and save app.scss after, it will correctly compile and the variable is correctly parsed too.
So it seems, if I edit app.scss, any variables defined in any of the imported files will be available to subsequent imported files when sass is compiling. But this is only true when editing app.scss.
How can I get it to compile correctly without having to add the same imports to each file? Is what I am trying to do even possible?
I managed to resolve this by using partials instead in the following manner:
Firstly, rename all my imports to include a prefix, for example:
global/_swatches.scss
and then in my main file (app.scss) import is as follows:
#import 'global/swatches';
Notice the lack of the underscore and .scss file extension
In my main.scss file, I use the following two partials with #use:
#use 'variables' as v;
// #forward 'variables'; // doesn't work
#use 'layout';
In _layout.scss, I try to use this variable:
h1 {
color: v.$mainHeaderColor;
}
But it gives me the error:
There is no module with the namespace "v".
color: v.$mainHeaderColor;
How can I load all my partials in my main.scss so that every partial can use every other partial, which was possible with #import i.e. before #use namespaces.
There is no module with the namespace "v". - color: v.$mainHeaderColor;
Your receiving the error when compiling main.scss because the _layout.scss partial file doesn't know about the namespace "v" and wasn't able to load the members like $mainHeaderColor from the _variables.scss module. This happens because _layout.scss doesn't have a #use rule loading the members from "variables", therefore it can't access variables defined in that module.
A "quick" fix would be to introduce a #use rule in your _layout.scss file to load the variables from _variables.scss like this:
#use "./variables" as v;
/* _layout.scss */
h1 {
color: v.$mainHeaderColor;
}
Now there really isn't a need to use #forward with your current structure as its only two partial files being loaded into main.scss. If you want to use #forward I'd recommend reading further and setting up directories with index files.
To update your main file, this is how loading the files with #use at-rules into main.scss would look:
#use 'variables' as v;
#use 'layout';
/* main.scss */
/* Use the loaded members from '_variables.scss' inside the main file */
.demo {
color: v.$mainHeadColor;
}
Using #use rules along with #forward and index files
With the #import at-rule slowly being phased out of the main implementation of Sass, (dart-sass). It's time for us to adopt #use rules and learn how to utilize the cool features like index files with #forward and setting custom namespaces for loaded modules.
Since #import at-rules made everything globally accessible, this is where I've seen most of the confusion around usage of #use come into play. We have to make sure all files have appropriate knowledge of variables, mixins, functions etc if they aren't defined in the same partial or file.
If you have a main.scss Sass file that is going to be compiled with two (or more) imported partial files. The best way to utilize #use and #forward rules is by creating a directory at the same level as your main.scss file (or elsewhere just use the correct path) and create an index file, _index.scss to load the entire directory of partials with a single #use rule.
Note: All #use at-rules must be placed at the top of the file.
This index file will be where you place your #forward rules, using #forward "<url>"; for each partial you want to load into the index file. Think of it as one big module that you can load elsewhere with a single #use rule in your main.scss file, thus giving you access to all of the partial files loaded into that index file within the /partials directory.
- main.scss
- partials/
- _index.scss
- _variables.scss
- _layout.scss
...
Going along with the example, lets say your _variables.scss partial file looked like this and wasn't relying on any other files:
$mainHeaderColor: #222;
$someOtherVar: #f06;
and if the _layout.scss partial wanted to use variables defined in _variables.scss, we would have to include a #use rule to let _layout.scss "know" about the loaded members.
#use "./variables" as v;
/* _layout.scss */
h1 {
/* now this works as expected */
color: v.$mainHeaderColor;
}
If you didn't want to define a namespace when loading with #use, simply write #use "<url>" as <namespace>; where the namespace being an asterisk * signals that a namespace won't be defined so you can use it like color: $mainHeaderColor instead of v.$mainHeaderColor. Note, this can leading to naming conflicts if your not careful.
Now to load these partials into the main.scss file which will be compiled, you could either use two separate #use rules for the _layout.scss and _variables.scss partials or create an index file (_index.scss) and load the /partials directory with a single #use at-rule giving you access to all the partials in the directory.
#forward "./variables";
#forward "./layout";
/* partials/_index.scss */
Voila! Now all that is left is to load the /partials directory into the main.scss file to be compiled and maybe used later on. The _layout.scss partial is loaded into main.scss through our single #use rule and we also have access to _variables.scss variables or any other partial file that was forwarded in the index file.
#use "./partials" as *;
/* main.scss */
h2 {
color: $mainHeaderColor;
background: $someOtherVar;
}
If you had a directory of mixins like ./mixins, then you would follow the same workflow of placing all partial files inside the /mixins directory and then create an _index.scss file to load the partials with #forward rules. To finally load the directory with a single #use rule giving you access to all of the partials loaded in a specific directory through an index file. I used the /partials directory as a "starting" point but it would make more sense to create a directory /vars, /mixins etc and place files in their respective directories for better structure/organization.
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
I have a bunch of SCSS file and I am trying to compile them to CSS. I have tried using both Koala and Scout.
Error:
C:\Users\Ben\Desktop\officeincambridge\public_html\oc-content\themes\bender\sass\user.scss
error sass/user.scss (Line 2: Undefined variable: "$widgetbackground".)
create css/user.css
.SCSS file:
.user-card{
background-color:$widgetbackground;
position: relative;
padding-left:120px;
height:120px;
#include border-radius(4px);
margin-bottom:25px;
ul{
padding:15px;
margin:0;
list-style: none;
}
I understand why the error is coming up, but how can I compile the SCSS file with PHP variables? For further info, I am using OSCLASS
Thanks
You can't. Sass is a Ruby tool, not PHP.
Edit: according the source code, $widgetbackground is defined in the colors.scss file.
You can indeed compile SCSS with PHP, please go through the following Module . I've used that in my project, and it works just fine. All you have to do is,
Include the Module into your project
Create a Style.php file. and specify the input directory, given in their document.
Pass the scss file you have under your assets directory, as an argument to style.php
style.php/?p=application.scss
You will have the compiled file generated, under your Assets Directory,
Style.php File
$scss = new scssc();
$scss->setFormatter("scss_formatter_compressed");
$server = new scss_server("assets/", "assets/", $scss);
$server->serve();
Here "Assets" means the directory which contain the SCSS files, be sure about the relative path.
Sass is a great tool, happy coding. Hope this helps someone.
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.