I am developing a WordPress theme and I am trying to use sass from another file using the #use method but it doesn't seem to be working. How can I fix the problem since the #import rule method will be depreciated soon?
I have files
//_brand.scss
$base-color: #c6538c;
$border-dark: rgba($base-color, 0.88);
and then
//footer.scsss
#use 'brand' as b;
.footer{
padding: 0px 5%;
background-color: b.$base-color;
}
and I get this error when it's compiling
Compilation Error
Error: Invalid CSS after "...ground-color: b": expected expression (e.g. 1px, bold), was ".$font-size;"
on line 5 of sass/opt/lampp/.../sass/footer.scss
>> background-color: b.$base-color;
I am using "Live Sass Compiler" visual studio code extension to compile to CSS
If you want to use the variables you have defined within the brand.scss file across different files, you can use the #import directive. For using it, just add the line below to your footer.scss file:
#import "brand";
Source: https://www.w3schools.com/sass/sass_import.asp
I hope my answer will help you
Related
I just started writing sass and on my first lines
body{
background-color: #272727;
color: white;
}
I get an error of
--------------------
Change Detected...
index.sass
--------------------
Compilation Error
Error: Invalid CSS after "body{": expected "}", was "{"
on line 1 of sass/c:\Users\user\desktop\Scripts\cryptoChess\src\Assets\Style\index.sass
>> body{ {
-----^
--------------------
I am using the live sass compiler extension on vs code. Anyone know how to fix this?
It looks like you're using the .sass file extension for index.sass for a scss file. You need to change it to use the scss file extension for it to compile.
See also:
Sass Invalid CSS Error: "expected expression"
so iv'e started learning sass and i'm now in a spot when i added a class to my html (.circle)
and my sass file is already linked to my css file.
when i typed .circle to my sass file and tried to give him a color i incountred in the next error:
This selector doesn't have any properties and will not be rendered.
error styles.sass (Line 6: Properties are only allowed within rules, directives, mixin includes, or other properties.)
my sass file is really simple by now as i try to play with it:
body
background-color: cadetblue
.circle
color: red
as i said when reaching the .circle i get the error. any ideas?
i used the sass --watch command and i use ruby devkit 2.6.5-1
thanks for helping! im new so i try my best
It seems like the syntax is not correct. Try this instead (remark the indentation on color property):
body
background-color: cadetblue
.circle
color: red
More info about Sass syntax : https://sass-lang.com/documentation/syntax#the-indented-syntax
I'm struggling with the dotLESS #import to have a separate variables file; I just constantly get "variable is undefined".
If I browse to the variable config file it works; if I put the variables inline in the main stylesheet it works; but in an #import, no dice. I'm mapping .css as well as .less to the extension, however it also doesn't work if I use .less only.
The variables file LESS-config.less is:
/*
.LESS VARIABLES
*/
#mbw_dark_cyan: #1293b5;
#mbw_cyan: #11add4;
#mbw_magenta: #e935da;
#control_text: #ffffff;
#action_delete: #ff5400;
#section_level1_bg: #mbw_dark_cyan;
#section_level1_fg: #control_text;
#button_bg: #mbw_dark_cyan;
#button_fg: #control_text;
#button_icon: #control_text;
#data_table_header: #mbw_cyan;
.dummy {
color: #control_text;
}
Which renders as:
/*
.LESS VARIABLES
*/
.dummy {
color: #ffffff;
}
Calling stylesheet main.css is:
#import (less) '/css/LESS-config';
button {
background: #button_bg;
}
Which gives the error:
variable #button_bg is undefined on line 4 in file '/css/main.css':
[3]: button {
[4]: background: #button_bg;
----------------^
[5]: }
As I said, if I replace the import with the same variables copied and pasted, it all works fine.
I've tried saving without BOM as in another answer, but that doesn't help.
EDIT, I've tried:
Removing the (less)
Changing to double quotes
Using relative path LESS-config as opposed to virtual absolute as above
Adding logger="dotless.Core.Loggers.AspResponseLogger" log="debug" to
web.config (cache is already false)
Adding debug="1"
Adding
debug="true"
Absolutely no change in behaviour.
EDIT 2:
I created a cut-down css that only had the import statement in it; when I browse to it the imported styles are in there. However, on a refresh, I just get a blank response.
So it seems to be something to do with my IIS config / caching? I've turned off content compression but no joy; disabled all output caching for .less and .css, still no joy!
FIXED as per Toni's comment; https://stackoverflow.com/a/51754771/318411:
This turned out to be a dotLESS issue, tracked on GitHub here: https://github.com/dotless/dotless/issues/553
The complete fix was to:
Upgrade dotLESS to version 1.6.7
Downgrade Microsoft.Extensions.DependencyInjection to 1.1.1.0 due to Method
not found error
Change the file extension of the import from .css to .less
Now all working.
Please try version 1.6.7 which fixes an error that imports are only executed on the very first request.
I potentially see two problems that you have.
You are trying to call #import (less) in a css file. This is a syntax specific to less framework.
Your main.css is not a less file.
Change your main.css to a main.less file and now try generating your css from main.less as your root file.
Assuming your import url for LESS-config.less is correct.
The above mentioned corrections should probably do the trick.
#import (less, optional) "mystyle.css"; is Less syntax, you cannot use it in CSS (Less #import Rules).
If you want to use #import in your CSS, it should follow this syntax (See here)
#import url|string list-of-mediaqueries;
But, you cannot import a Less file inside your CSS anyways.
The way I would have done this:
Say you have 3 .less files: config.less, color.less, header.less
I would create a style.less file with the following content:
/*------------------------------------------------------------------------------*/
style.less
/*------------------------------------------------------------------------------*/
/* 01. config */
#import "config.less";
/* 02. color */
#import "color.less";
/* 03. header */
#import "header.less";
Then I would complie style.less which would produce, style.css and I would include style.css in my website.
I am building a sass compiler with nodejs, electron, and node-sass.
There will be a config file that will describe some "sass compilers" for many projects and the user will have the ability to activate and deactivate them through a GUI.
I managed with "electron" to create the interface and with the use of electron`s "ipcmain" to initiate the compilers on demand.
To init a compiler, I spawn a child process which encloses the whole compiler.
The compilation is done with following code:
var result = this.sass.renderSync({
file: 'C:\\Users\\George\\Desktop\\css_compiler_tests\\test3\\scss\\style.scss',
outFile: 'C:\\Users\\George\\Desktop\\css_compiler_tests\\test3\\css\\style.css',
includePaths:[
'C:\\Users\\George\\Desktop\\css_compiler_tests\\test3\\scss\\',
'C:\\Users\\George\\Desktop\\css_compiler_tests\\test3\\scss\\foundation\\components\\'
]
});
I execute the compilation using absolute paths but the files us relative paths.
I run my program/gui and activated the compiler and I got a CSS file.
The problem is that some imports are missing.
My root folder is at 'C:\Users\George\Desktop\css_compiler_tests\test3\'.
I try to compile 'scss\style.scss' which imports 'scss_inculded-files.scss'.
The file 'scss_inculded-files' imports 'scss\foundation.scss' which imports form 'scss\foundation\components'.
Here is an example:
/*scss\style.scss*/
#import "included-files";
/*scss\_inculded-files.scss*/
#import
"includes/fonts",
"includes/custom-colors",
"includes/foundation-custom-settings",
"foundation/settings",
"foundation";
/*scss\foundation.scss*/
#import
"foundation/components/grid",
"foundation/components/accordion";
The content of the two last imports is missing.
Finaly I tried from command line and got the same error:
D:\mytests\nodejs\nodeSass> node_modules/.bin/node-sass C:\Users\George\Desktop\css_compiler_tests\test3\scss\style.scss -o C:\Users\George\Desktop\css_compiler_tests\test3\scss\ --include-path C:\Users\George\Desktop\css_compiler_tests\test3\scss\
Is there a way to include those missing files?
Thank you in advance.
Edit 1
After some experimentation I found out that the Mixins are the problem.
Let say I have a Mixin like that:
#mixin headline($size, $color: $base-color) {
color: $color;
font-size: $size;
}
It is compiled perfectly if I call it like that:
h1 {
#include headline($color: blue, $size: 12px);
}
If I don't call it isn't compiled.
I am using Foundation Zurb framework which I believe auto includes the mixins.
How can I reference a variable defined in a central variables.less file in an individual module.less file, when the module does not directly reference variables.less?
Here's the structure of my Styles folder:
Styles
_variables.less
Site.less
Modules
_forms.less
_navbar-top.less
_panels.less
_titlebar.less
Modules.less
Pages
_page1.less
_page2.less
Pages.less
The file Site.less basically looks like this:
#import "_variables.less";
#import "Modules/Modules.less";
#import "Pages/Pages.less";
(it only includes capitalized LESS files)
And Modules.less looks like:
#import "_forms.less";
#import "_navbar-top.less";
#import "_panels.less";
#import "_titlebar.less";
(it only includes underscore-prefixed files in the same folder)
Pages.less is structured the same way.
What I want to do is have the following in the Modules/_panels.less file:
.panel-form {
.panel-variant(1px; #text-color; #component-default-bg; 1px);
border-top: solid darken(#component-default-bg, 1px);
border-bottom: solid darken(#component-default-bg, 1px);
border-left: none;
border-right: none;
}
But of course my LESS compiler (Visual Studio Web Essentials 2013.5) is throwing an error and refusing to compile the file _panels.less because it is referencing a variable that does not exist in its scope.
Currently my workaround is to declare .panel-form in Site.css but that is a hack -- I don't want to start declaring an arbitrary number of modules there.
Is it possible to reference a variable like this and still compile to CSS, and if so how? If not, is there a better structure I should use?
Incidentally I noticed that the LESS compiler doesn't like Bootstrap either, because it raises errors if I type a single space into a Bootstrap LESS file e.g. navbar.less and try to save it, reporting that (for navbar.less) the mixin .clearfix() is undefined. Which of course it is, because navbar.less does not reference mixins.less, yet if it can compile from bootstrap.less downward then everything will work just fine...
I don't know what is your environment but with triple slash directives it usually works:
root
less
_vars.less
modules
someModule.less
Inside "someModule.less" you should try this:
/// <reference path="../_variables.less" />