My CSS output contains the word "undefined" when I use --modify-var on the Less command line. Does anybody know why, and how to resolve?
My styles.css contains only:
#my-background: blue;
body{background: #my-background;}
My command line entry is:
lessc styles.less --modify-var=my-background:red
(Copied from here: http://lesscss.org/usage/#command-line-usage-modify-variable)
(NB: I had to remove the quotes from their example because it gave a parsing error)
The output is:
body {
background: red: undefined;
}
I'm using Lessc 1.6.3.
Thanks,
Steve
Related
Hi I have a trouble with changing font-family. I have local font I need to use it. But is doesn't work, what I missing?
It seems you added an additional : after #font-face. You should use it like this:
#font-face {
font-family: 'font-name';
src: url('url');
...
}
For the past 2 days, I've been trying to figure out how to import a global stylus file into all of my components so that I don't end up with `#import '../../../styles.styl' in each component or ever need to adjust that. I've used the configuration given by VueJS here and I still can't figure it out. I've tried various different configurations, but every time it either doesn't recognize 'style-resources-loader' and gives me an error before even building, or it seems to build and then errors out because it doesn't recognize the stylus variables I'm using in my components. Giving me this error:
Module build failed (from ./node_modules/stylus-loader/index.js):
Error: C:\filepath\ViewTitle.vue:27:25
23| color white
24| font-family 'Xiomara'
25| letter-spacing 0.25rem
26| text-align center
27| text-shadow 0 0 8px rgba(light, 0.1)
-------------------------------^
28| </style>
TypeError: expected rgba or hsla, but got function:light(color)
I've also tried the css: { loaderOptions: { stylus: prependData: "#import './assets/styles/styles.styl'" } } } and that has not worked either. Any thoughts?
Edit:
This is what my variables look like:
peppermint = #FBAAA6
dusk = #135A8B
gold = #F0D355
dark = #062236
light = #EFF2F3
I have them stored in ./assets/styles/config/vars.styl, then the file I'm trying to import is in ./assets/styles/styles.styl and that file imports the vars.styl
Solution:
For anyone having the same issue, I ended up just starting over. Luckily I wasn't too deep into the project, so it only set me back a few hours. Using the code in the Auto Import section of the VueJS documentation worked fine after starting fresh.
I wrote the code below in the file of “variables.scss” or “global.scss”:
ion-searchbar {
–placeholder-color: white;
–placeholder-opacity:1;
–icon-color:white;
}
it should make the text of placeholder with white color, however, it doesn’t work.
But, if I write the code just in the page css file, it does work.
Does somebody know why?
You have to put it within the :root pseudo selector, like this:
:root {
ion-searchbar {
--placeholder-color: white;
–-placeholder-opacity: 1;
–-icon-color: white;
}
}
This will ensure that any variables you set inside of :root will apply across your entire application.
Problem
About overriding !default variables -- I have two .sass files:
main.sass
$variable: black
#import "_another_import.sass"
#import "_import.sass"
_import.sass
$variable: blue !default
body
background: $variable
The $variable resolves to blue in the compiled CSS:
body {
background: blue;
}
However, if I specify the overriding variable value right before I import the _import.sass stylesheet, Sass compiles it to black:
main.sass
#import "_another_import.sass"
$variable: black
#import "_import.sass"
Question
Is this behavior intended? Is there a way to declare overrides for !default variable values earlier than the !default values are declared in imports (maybe even in a separate file)?
Actual setup (for reference)
My actual setup is a little bit more complicated than that. I am using Myg (NPM components) with myg-rails (generating file structure to customize variables) and Webpack. So I have a myg.sass file loading _variables.sass and _myg.sass. _variables.sass loads a couple of other files which define the variables. _myg.sass imports the Myg (NPM) components. I verified that when I define a variable in _variables.sass and use it + set a default in a Myg component, the default will override the already set value.
No, what you are doing should work. The resulting behavior you're experiencing is irregular and not intended.
From sass-lang docs:
You can assign to variables if they aren't already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won't be re-assigned, but if it doesn't have a value yet, it will be given one.
I suspect there may be something else at play that we need to investigate.
I've verified the correct behavior with these files:
Sass source:
_t1.sass
div
margin: 0
_t2.sass
$c: blue !default
body
background: $c
main.sass
$c: black
#import '_t1.sass'
#import '_t2.sass'
CSS result:
div {
margin: 0;
}
body {
background: black;
}
It is black as intended.
My suggestion is :-
1) If you want black background then you simply do like this
// main.sass
#import "_another_import.sass";
#import "_import.sass";
// _import.sass
$variable: black;
body{
background-color: $variable !important;
}
But my suggestion is that your file structure like this
#import "_variable"; /*Define Variable in separate file & in that file declare $variable*/
#import "_another_import.sass";
#import "_import.sass";
body{
background-color: $variable !important;
}
I think you are misunderstanding what !default does. It is saying if variable is not assigned, use this value.
You can assign to variables if they aren’t already assigned by adding the !default flag to the end of the value. This means that if the variable has already been assigned to, it won’t be re-assigned, but if it doesn’t have a value yet, it will be given one.
I am trying to inject some php variables into my less css using the method described in the lessphp docs. I can do:
$lc = new lessc;
$lc->setVariables(array("stylesheetURI" => "foo/bar"));
Which ultimately allows me to do:
background-image: url("#{stylesheetURI}/img/logo.jpg");
Which results in:
background-image: url("foo/bar/img/logo.jpg");
Thats all perfect & works like a charm ...
However I'd prefer to add a full URL to my image paths. So I am doing:
$lc = new lessc;
$lc->setVariables(array("stylesheetURI" => "http://mydomain.com/foo/bar"));
But that results in:
background-image: url("http/img/logo.jpg");
Which is clearly wrong. Has anyone else seen this issue? I've had a dig around in the lessc.inc.php class but it's a bit of a beast and I haven't managed to locate the problem. I presume its related to the colon - do anyone know how to escape this? I've tried a backslash but that doesn't work.
Thanks all
I try
$less = new lessc;
$less->setVariables(array(
'rdir'=> '"/resources/default"'
));
echo $less->compileFile($lessFileName);
im less file I have
img{
background-image: url(#{rdir}/img.jpg);
}
in output I have:
img {
background-image: url(/resources/default/img.jpg);
}
when I try
$less->setVariables(array(
'rdir'=> '"http://example.com/resources/default"'
));
I get
img {
background-image: url(http://example.com/resources/default/img.jpg);
}
lessphp v0.3.9
you can try add string variable with quotes '"http://example.com/"'