I would like to generate CSS using less compiler..
Originally I have a less file and I need to prepend every rule with some class (not a nested selector)
.E{ .F{ color:blue; } }
is going to generate
.E .F{color:blue;}
In my case I don't want it to be nested but should get generated in the following way
.E.F{color:blue;}
.E {
&.F { color:blue; }
}
Related
I'm creating own inspections based on Structural Replace.
For example I want to make inspection of transforming code like:
if (!$Map$.containsKey($key$)){
$Map$.put($key$, $value$);
}
and
if ($Map$.get($key$) == null){
$Map$.put($key$, $value$);
}
into
$Map$.putIfAbsent($key$, $value$);
But I don't want it to react on code like:
if (!$Map$.containsKey($key$)){
$Map$.put($key$, $value$);
}
else {
// any logic
}
I tried to use
if (!$Map$.containsKey($key$)){
$Map$.put($key$, $value$);
}
$else$
with option text "else" but it didn't work.
Is it possible? Also I have to make two different inspections with same replace result. Can we use multiple searh pattern?
UPDATE:
I tried replace next pattern
$Iterable$.forEach($value$ -> {
if ($condition$) {
$statement$;
}
});
into
$Iterable$.stream()
.filter($value$ -> $condition$)
.forEach($value$ -> $statement$);
But after replace I'm getting:
$Iterable$.stream()
.filter($value$ -> $condition$)
.forEach($value$ -> $statement$;);
Is it possible to remove ";" from replace result?
Use a search template like this:
if (!$Map$.containsKey($key$)){
$Map$.put($key$, $value$);
} else {
$statement$;
}
Edit variables and set the minimum and maximum count of statement to 0.
Using multiple search patterns for a single Structural Search Inspection is not possible at this time.
What I'm trying to achieve is something like this, but I'm not sure how to go about it:
define([
// Load basic modules that are always used
], function (one, two, ...) {
if (a) {
// Load this extra module as "extraModule"
}
else {
// Load that extra module as "extraModule"
}
// Be able to use functions from extraModule without worrying
// exactly what they do
extraModule.doTheThing();
Then the two options for extraModule would behave as though they were objects inheriting from the same abstract class.
Does anyone know if this is possible with Dojo?
I think the closest way to achieve this is by doing the following:
define([ "one", "two", "extraModule1", "extraModule2" ], function(one, two, extra1, extra2) {
var extra = null;
if (a) {
extra = extra1;
} else {
extra = extra2;
}
});
So you just load both modules and pick the one you need afterwards.
How do i set a parametric mixin output to a variable?
Say i have this custom mixin with these parameters:
.gradient(#555, #333, #777);
I want this to be put into a variable so i can refer to this specific gradient throughout my code.
Wrapping it like this:
#mixin elGradient() {
#include .gradient(#555, #333, #777);
}
for inclusion like this:
.element {
#include elGradient;
}
Yields a parse error.
.elGradient() {
.gradient(#555, #333, #777);
}
.element {
.elGradient();
}
This is the simplest way. Alternatively it would make sense to get use of the extend feature if you really need to include same properties again and again:
.elGradientBase {.gradient(#555, #333, #777)}
.elGradient() {
&:extend(.elGradientBase all);
}
.element-1 {
.elGradient();
}
.element-2 {
.elGradient();
}
// etc.
I would like to use a variable within a Less mixin that when passed to :extend has the same result as if I had instead used :extend with a class name string.
In the example below I have commented out a line that produces the CSS output I want by using :extend with a string.
But how can I do this with the #class-name variable instead?
.class-to-be-extended {display: block;}
.my-mixin (#class-name) {
#class-string: ~".#{class-name}";
.my-extra-class {
// &:extend(.class-to-be-extended); // works
&:extend(#{class-string}); // doesn't work, but no errors
}
}
.my-mixin(class-to-be-extended);
The CSS output I would like is:
.class-to-be-extended,
.my-extra-class {
display: block;
}
At the time of writing this I'm using the latest version I can find which is Less 1.4.2
This is not possible with Less version 1.4.2. (Thanks to Jon Schlinkert for letting me know via Twitter).
A feature request has been submitted to https://github.com/less/less.js/issues
I have just recently gotten into LessCSS and I am running into what I feel is major limitation and I was wondering if there was a way to do this?? I want to say I read somewhere that Sass allows for user defined functions but will LessCSS do the same?
What I'm wanting to do:
#fs: 16;
// either return the value
.s(#t,#s,#u) {
// return #t/#s*#u;
}
#elem {
margin-top: .s(30,#fs,1em);
width: .s(900,#fs,1em);
.child {
width: .s(100,900,100%);
}
}
// or have a property argument
.s(#t,#s,#u,#p) {
#{p}: #t/#s*#u;
}
#elem {
.s(30,#fs,1em,margin-top);
.s(900,#fs,1em,width);
.child {
.s(100,900,100%,width);
}
}
The only way I can figure it out, but it is very limited because I have to have multiple mixins:
.s(#t,#s,#u,#p) when (#p = margin-top) { margin-top: #t/#s*#u; }
// margin[-top|-right|-bottom|-left]
// padding[-top|-right|-bottom|-left]
.s(#t,#s,#u,#p) when (#p = width) { width: #t/#s*#u; }
.s(#t,#s,#u,#p) when (#p = height) { height: #t/#s*#u; }
I know I can always modify the less.js file to add a spacing function like the built-in round() or ceil() function. But, that kills the option of compiling the .less files for production using LessPHP, Crunch, SimpLess.
As far as I know, there's no property argument: you must write it down.
That is, a function will return a calculated value or instruction(s) (property/ies and calculated values).
There aren't thousands of properties in CSS, it's not a CMS with hundreds of classes and functions, so your list won't be as long as you can imagine. You should use other CSS preprocessors or a backend language to generate your CSS if you want to do such complicated things. Or better keep it simple.
That said, lessphp allows for user functions:
lessphp has a simple extension interface where you can implement user functions that will be exposed in LESS code during the compile. They can be a little tricky though because you need to work with the lessphp type system.
Notice that you also can easily add custom functions to the default Less compiler, which enable you to use the client side less.js compiler for testing and the command line lessc compiler for production.
For Less 1.x
Download and unzip the source from github at: https://github.com/less/less.js/releases/latest
Run npm install
Open the lib/functions.js file
Add your custom function (returncenter() in this example) inside the tree.functions object, for instance as follows:
tree.functions = {
returncenter: function() {
return new(tree.Anonymous)('center');
},
//original function below
}
Run grunt dist
After the preceding step you can include dist/less-1.x.x/js in your HTML or compile your Less code with the dist/lessc compiler.
For Less 2.x
Download and unzip the source from github at: https://github.com/less/less.js/archive/master.zip
Run npm install
Create a file caleld lib/less/functions/custom.js and write down the following content into it:
var Anonymous = require("../tree/anonymous"),
functionRegistry = require("./function-registry");
functionRegistry.addMultiple({
returncenter: function() {
return new(Anonymous)('center');
}
});
Open the lib/less/function/index.js file and append require("./custom"); to the list of register functions, just before return functions;
Run grunt dist
Now you can use the following Less code:
selector {
property: returncenter();
}
The preceding Less code will compile into the following CSS code:
selector {
property: center;
}