less

Define variable name with variable in LESS operation

由 别说谁变了你拦得住时间么 提交于 2019-11-28 06:42:24
问题 Can someone please explain why this code doesn't work: @red-1:#ff0000; @red-2:#990000; @blue-1:#000ff; @blue-2:#00099; .setTheme(@theme){ @color-1:~"@{@{theme}-1}"; @color-2:fade(~"@{@{theme}-2}", 10%); //doesn't work body.@{theme} .button{ background:@color-1; color:@color-2; } } .setTheme(~"red"); Thanks; 回答1: It is a Bug Color functions have an issue with respect to this that has been submitted. Workaround Don't try to do both calls in one string. Set the variable value to your inner

How to update variables in .less file dynamically using AngularJS

由 China☆狼群 提交于 2019-11-28 06:34:09
问题 I am very much new to AngularJS. I want to update the .less files variable dynamically. But didn't get how to access this .less file using AngularJS. My code: style.less @bg-color: #484848; .header{ background: @bg-color; } I want to update @bg-color: #484848; present in the style.less file to some value input by user. How can I get this using AngularJS. 回答1: You should run Less in browser to do this. If you load less.js in your HTML, the global less object come available, so you can use less

LESS combine ruleset into two with different variables

由 社会主义新天地 提交于 2019-11-28 06:26:38
问题 I'm trying to combine one ruleset into two different rulesets with variable values swapped. Main purpose is LTR/RTL internationalization. Usage: h1 { margin-top: 10px; .directions({ margin-@{left}: 5px; }); } Expected output: h1 { margin-top: 10px; } .ltr h1 { margin-left: 5px; } .rtl h1 { margin-right: 5px; } I was able to get some results with the Passing Rulesets to Mixins function available in Less 1.7 .directions(@rules) { @left: left; .ltr & { @rules(); } @left: right; .rtl & { @rules()

How do you create multiple box-shadow values in LESS CSS

由 北城余情 提交于 2019-11-28 06:12:23
Read This There are several "correct" answers . Since this question gets a lot of traffic, I figured I should keep up with what (I think) the best answer is (based on the LESS documentation) as the LESS project matures, and change my accepted answer accordingly. I'm using LESS and I haven't been able to find a fix for allowing multiple CSS3 box-shadows. I have the following mixin: .box-shadow(@arguments) { -webkit-box-shadow: @arguments; -moz-box-shadow: @arguments; box-shadow: @arguments; } and I'm attempting this: .box-shadow( inset 0 0 50px rgba(0,0,0,0.3), 0 0 10px rgba(0,0,0,0.5); ); This

apply color function on evaluated string color

由 こ雲淡風輕ζ 提交于 2019-11-28 06:11:28
问题 I have loop in less which is iterating throw numbered variables with colors. It's working fine when I need just evaluate color but not when I want also change color with function. @cat-1:#c40009; .... .gen-cats-filter (@index,@prefix) when (@index > 0) { .@{prefix}@{index}{ background-color: ~"@{cat-@{index}}"; &:hover{ background-color: darken(~"@{cat-@{index}}", 20%); } } .gen-cats-filter(@index - 1,@prefix); } .gen-cats(14,cat); but this throws error. is there way how to make it work and

Returning generated CSS from an MVC5 or Web API 2 controller action

由 穿精又带淫゛_ 提交于 2019-11-28 06:02:56
问题 In our multi-tenant application we have a need to customize the styles used per-tenant. We currently plan to do so using LESS and variables in the following way on the client : Download dependent LESS files from server Call web service to get configuration object Form string of valid LESS with variables defined Use less.js compiler to compile LESS based on these variables and the fixed LESS files from step 1 This approach has a number of downsides: Clients can behave badly Some browsers have

Less multiple files import

由 こ雲淡風輕ζ 提交于 2019-11-28 06:02:00
问题 I'm working on WordPress theme that needs to have color schemes functionality. I am forced to use less on this project. I have file called schemes.less, that contains code for styling different colored sections on a webpage. Then I have set of less files called: dark.less, light.less, blue.less etc. I am importing them using default values technique (http://lesscss.org/features/#variables-feature-default-variables), but because of lazy loading if I import the scheme.less multiple times every

LESS CSS Pass mixin as a parameter to another mixin

由 青春壹個敷衍的年華 提交于 2019-11-28 05:59:23
Is there any way to pass one mixin or style's declaration to another mixin as an input parameter? Let's take a look at an example with animation keyframes. Following is how we define keyframes in pure CSS: @-moz-keyframes some-name { from { color: red; } to { color: blue; } } @-webkit-keyframes some-name { from { color: red; } to { color: blue; } } @keyframes some-name { from { color: red; } to { color: blue; } } Idea is to simplify these declarations using mixins, so we can have something like following: .keyframes(name, from, to) { // here we need somehow to reproduce structure // that we

Open a file in Visual Studio's CSS Source Editor

由 家住魔仙堡 提交于 2019-11-28 05:24:50
I am using Phil Haack's T4CSS T4 template based on .less One bad thing about Phil's solution is that visual studio opens the .less files as plain text files rather than as css files. (Thus no intellisense.) How can I get VS to open a .less file in the CSS Source Editor? I've tried: Right Click > Open With, but the CSS Source Editor isn't listed. Tools > Options > Text Editor > File Extensions, but once again, CSS Source Editor isn't listed. Can this be done? I just posted an extension that does this; you can download it from the Visual Studio Gallery . The key to the extension is the .pkgdef

Bootstrap variable overriding with LESS

由 為{幸葍}努か 提交于 2019-11-28 05:10:23
I have been investigating for the whole day as I considered it would be worthwhile spending some time to learn best practice for customizing Bootstrap . I can see that there is a friendly page available for customizing elements selectively from http://twitter.github.io/bootstrap/customize.html but I want to have more control than this without touching original bootstrap source files. To start with, I basically wanted to test out changing the grid from 12 to 16 columns and to do this, I created my own variable less file and added @gridColumns:16; only to this file and imported this custom less
订阅 less