I would like to pass a variable to my sass from coldfusion or php.
Above I declare a var that I need to pass to sass to set a container-size in my _base.sass.
Is there a way to do it?
Use the !default flag in your variable to do this. here's what i mean
// SCSS file
#import "php-variables"; // have php write this file first before compiling
#import "variables"; // custom colors, font-sizes, etc.
// contents of php-variables
$myvar: #f00; // the value you're setting with php
// contents of variables
$myvar: #0f0 !default; // the value to use if php DOESN't override it.
This way you can still have a fallback for if your php code doesn't need to override a var. anything you write in the php file will be declared first. then as long as your variables file uses the !default flag on ALL variables then it won't override the php set ones.
more info here:
http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#variable_defaults_
I have tested this with the php compiler at http://www.phpsass.com/ and it works.
I think you should be writing directly to the sass file through php/coldfusion. I doubt there is another way to do it.
An easy way to do this would just be to put your variable on your first line in the sass file or something and just overwrite the value using PHP.
The cleanest solution i found was to do the following. In your html file (mine is a Blade template) you can inject your variable ($bodyBgColour):
<style>
:root {
--main-bg-color: {{ $bodyBgColour }}
</style>
Then in your scss file you can use it:
$background-colour: var(--main-bg-color);
And you can subsequently use that sass variable in your classes:
body {
background-color: $background-colour;
}
Related
I have a .jade source files and want to insert it into Vue app.
In sources I have the following code:
_mixins.jade:
- var domain = "example.com"
index.jade:
include _mixins
title #{domain}
And it, obviously, works.
What I want - is:
App.vue:
- var domain = "example.com"
div#app
HelloWorld
HelloWorld.vue:
h1 #{domain}
Is it possible at all? Or I'd have to have separate file with mixins and include it to every component, that'd use mixins and global variables?
Yes. The specific method is dependent on your project building system.
If you are using the Vite, define the globals in dedicated property of first parameter of pugPlugin(options, locals) of vite-plugin-pug.
If you are using the pug-loader for Webpack, specify your global variables in globals option.
If you are using the pug-plugin for Wepback, it has own loader with globals option.
Based on #takeshi-tokugawa-yd's answer.
To add a global variable, you need to add a property to the global object. As soon as you have this field in global, pug will automatically resolve it without the need to touch its configuration.
Here is an example:
vite.config.ts
(global as any).domain = 'example.com';
(global as any).protocol = 'https';
index.pug
h1 #{protocol}://#{domain}
Hovewer, it is far from implicitly included mixin with variables as in the question. It's more an ugly hack, because you need to modify the global object. Thus, I think that it's not possible to achieve what I wanted in the question.
Less has this handy option whereby the referenced importing file will be only used to resolve variables but it will not be inlined. Is there any way to do the same with postcss-import or any other similar PostCSS plugin?
The below block of code is how this behaviour works in Less. I'd like to achieve similar behaviour with PostCSS.
#import (reference) "foo.less";
/* Content of "foo.less" won't be inlined but variables on this different file will be resolved */
.rules {
width: #big; /* Declared in "foo.less". It will be resolved to 1200px (for example) */
}
I've been using one global variable called system which is defined in index.ts.
When I was using internal modules that went fine, probably because I started compiling in index.ts with --out.
Now I'm switching to external modules the compiler throws errors for the global variable 'system'.
I kept a single in each file with some .d.ts files for external libs, and I tried adding
declare var system:System
in that shared reference file, but that didnt work.
What does work is adding the declare statement to each file that uses the global variable.
So my question is if this is the way I should do it (declaring in every file), or if there's something I'm missing.
Tnx!
In Visual Studio 2013 (Update 3) the mere presence of system.d.ts is enough in the test I set up...
system.d.ts (I made this up)
interface System {
someStuff(): void;
}
declare var system: System;
afile.ts
class Lower {
constructor(private word: string) {
system.someStuff();
}
}
export = Lower
And I could access system.someStuff(); from anywhere.
If you are using a different IDE, you may need to add:
///<reference path="system.d.ts" />
This hints to the compiler that the definition exists, but doesn't actually import system as an external module (you can use import system = require('system'); if you want to load it like a module, but I don't think that's what you want in this case as you've stated that this is a global variable.
I have an array:
#styles: amelia, cerulean, cosmo, cyborg, darkly, flatly, fonts, journal, lumen, readable, simplex, slate, spacelab, superhero, united, yeti;
And I have my loop:
.loopStyles (#index) when (#index > 0) {
#name: extract(#styles, #index);
.nb-#{name} {
#import (inline) 'bower_components/bootswatch/#{name}/bootstrap.css';
}
.loopStyles(#index - 1);
}
.loopStyles(length(#styles));
However this throws an error: SyntaxError: Recursive variable definition for #index.
If I remove the #import or if I change the import option reference to something other than less or inline, it works just fine.
What I'm trying to achieve is a way to prefix these extra styles with a class, so I'd prefer if the stylesheet was imported inline rather than referenced.
Less docs state "...only variables which have been declared in the root or current scope will be considered and that only the current file and calling files will be considered when looking for a variable. This means that this usage is typically limited to when you inject a variable into the compile process or define a variable at the beginning of your root file."
I've gotten a lot of irrelevant errors while trying to get this to work.
I learning how to use less.css for creating dynamic css files.
I'd like to create a dynamic property in my css file and load it, for example:
#marginProperty : margin-left;
.top
{
#marginProperty: 10px;
}
Is this possible? Doesn't seem to compile for me. Any ideas?
It doesn't work quite that way; you can't set a property from a variable, variables are only values of those properties. Instead of setting a variable for the property, you should use a mixin. It's tricky, not knowing exactly how you are structuring your LESS/CSS or what your goals are, but it seems like you need to think in reverse. CSS, like SQL, is declarative, so you have to describe the result from the code, instead of describing the process of getting to that result. Something like this might do it:
.margin(#size:10px) {
margin-left: #size;
}
.top {
.margin(10px);
}
That .margin mixin can be defined in one mixin file and you can #import it, and when you need to redefine it, substitute that mixin file for another similar one.