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.
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
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?
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.
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