Hi I'm thinking if is possible to automate the process of creation variable names in less?
eg. At the moment I have to write:
#list-description-font-color: #000;
#list-description-border-color: #aaa;
#list-description-background-color: #bbb;
#list-description-border-width: #ccc;
Will be better if I could define in one place #list-description and than re-use. eg.
.list-description(#pre: 'list-description') {
#pre-font-color: #000;
#pre-border-color: #aaa;
#pre-background-color: #bbb;
#pre-border-width: #ccc;
}
Even better if I could have an array off extensions eg.
#ext: fc font-color, bc border-color, bgc background-color, bw border-width;
.list-desc(#pre: 'list-description') {
#pre-#ext{fc}: #000;
#pre-#ext{bc}: #aaa;
#pre-#ext{bgc}: #bbb;
#pre-#ext{bw}: #ccc;
}
And this will generate the original output.
Thanks
Related
I am making a theme editor for WordPress, and would like to use less to build the CSS file.
I have put a string in a variable like this:
#banner-separation-style: 'thick_border';
Then I'm trying to use when() like this:
when (#banner-separation-style = 'thick_border') {
header {
... some style
}
... and some css selectors
}
I've also tried combinations without quoting the variable.
How do I properly create something similar to if-blocks with less?
Guards (when statement) can only be used along with a mixin or a CSS selector. We can't write a when statement without using one of those. So, either write it with a mixin like below:
#banner-separation-style: 'thick_border';
.border-styles() when (#banner-separation-style = 'thick_border') {
header { border: 2px solid red; }
nav { border: 2px solid green; }
}
.border-styles;
or directly with the CSS selector like below:
#banner-separation-style: 'thick_border';
header when (#banner-separation-style = 'thick_border') {
border: 2px solid red;
}
nav when (#banner-separation-style = 'thick_border') {
border: 2px solid green;
}
or atleast using an unnamed selector (&) like below:
#banner-separation-style: 'thick_border';
& when (#banner-separation-style = 'thick_border') {
header { border: 2px solid red; }
nav { border: 2px solid green; }
}
The first version (with mixin) is the one that I prefer because (a) you don't have to repeat the condition multiple times like in the CSS selector version and (b) giving the mixin a name makes it more readable than using an unnamed selector. It is just my choice and some other user could actually prefer the last because it doesn't need that extra mixin call statement.
With preprocessor variables it's easy to set up one variable and manipulate it so that I can use it to set multiple properties. (demo)
While experimenting with native css variables, I noticed that I could combine them with preprocessor variables, so in the following example: (use firefox)
h1 {
--length: 40px;
#length: var(--length);
line-height: #length;
border: 5px solid tomato;
}
line-height was correctly rendered at 40px
But, when I tried to manipulate the preprocessor variable - like this:
h1 {
--length: 40px;
#length: var(--length);
#length2: #length*2;
line-height: #length;
padding: #length2;
border: 5px solid tomato;
}
... the code failed.
Is this possible somehow?
As mentioned in my comment, my understanding of CSS variables is that the variable is resolved into its actual value by the UA. This happens after the Less compiler compiles the file and thus it wouldn't be aware of what is the actual value contained by the CSS variable.
To the compiler, the value of #length is only var(--length). Since this is not a number, an error is thrown during compilation indicating that the math operation is being done on an invalid type.
OperationError: Operation on an invalid type on line 4, column 3:
One way to fix this would be to make the Less compiler output the variable name as it is and have the multiplier appended to it (like string concatenation). This would then leave the control to the UA.
But since all CSS math operations have to be given within calc() function, the entire thing has to be wrapped within it. So, the below code would work fine.
h1 {
--length: 40px;
#length: var(--length);
#length2: ~"calc(#{length} * 2)";
line-height: #length;
padding: #length2;
border: 5px solid tomato;
}
Or, even the below would be enough if --strict-math is enabled during compilation:
h1 {
--length: 40px;
#length: var(--length);
#length2: calc(#length * 2);
line-height: #length;
padding: #length2;
border: 5px solid tomato;
}
Above code when compiled produces an output similar to the one in Example 11 of the specs and so it should be a reasonably good way of doing this :)
... Note, though, that calc() can be used to validly achieve the same thing, like so:
.foo {
--gap: 20;
margin-top: calc(var(--gap) * 1px);
}
var() functions are substituted at computed-value time...
Is it possible in Less to setup mixin informations that can read phpStorm?
I write a Mixin like this:
.action-btn(#size: 32px, #color: #fff, #bgColor: #overlayStyleBlack, #bgColorHover: #red) {
a {
width: #size;
display: block;
color: #color;
text-align: center;
line-height: #size;
background-color: #bgColor;
&:hover {
cursor: pointer;
background-color: #bgColorHover;
}
}
}
What i want now is, that when i use this mixin in another less file: ".action-btn();" then i want to see that i have in this Mixin 4 Settings that i can Setup. In php Classes i can do this with:
/**
* #param string $xxx
* function to check and change user is_online flag in sphinx and in mysql
*/
But this dont work in the Less Mixin File.
And how can i Skip some settings? Here a example to explain what i mean. (This ry dont worked)
.action-btn(64px, , , #fff);
I am new to bootstrap, and I added bootstrap 3 into my project and it shrunk all the font sizes, I never had any font size specified in these classes. I thought bootstrap 3 had the default size to 14.. is there something else I need to do?
Thanks
It appears to be happening, at least as of version 3.3.6, due to this block on line 1097:
html {
font-size: 10px;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
You can restore your font-size by adding this to your stylesheet:
html
{
font-size: 100%;
}
You can customize/override anything - if, for example, you load YOUR css file AFTER the bootstrap file, then your settings will override it. Whatever you can dream:
p {
font-size 18px;
}
and so on...
I strongly recommend digging into the source code: https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css
html {
font-size: 62.5%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
UPDATE: TO clarify, "No" you shouldn't have to do anything else. It sounds like there is another problem. The linked source code has changed since the original answer date... as of Feb 2015, it looks like this:
html {
font-size: 10px;
}
body {
font-size: 14px;
}
Assuming we've set our project up correctly, (bower install bootstrap is pretty easy)... attempting to echo text outside of the body should result in 10px text, inside body should be 14px.
If you don't see 14 point text inside the body, then something else might be stepping on it. I'd next inspect in in Chrome (for example) to confirm where the font-size was coming from.
I'd like to add that I think it's helpful to understand how these values we see in this /dist/css file are derived from less variables... the defaults should work out of the box, but you have easy control over everything, including the body text size: see http://getbootstrap.com/css/#less-variables.
Defining vendors' mixins is common task under LESS, ie:
.box-shadow() {
-moz-box-shadow:#arguments;
-webkit-box-shadow:#arguments;
-o-box-shadow:#arguments;
-ms-box-shadow:#arguments;
box-shadow:#arguments;
}
.border-radius() {
-moz-border-radius:#arguments;
-webkit-border-radius:#arguments;
-o-border-radius:#arguments;
-ms-border-radius:#arguments;
border-radius:#arguments;
}
...
But it seems a bit repeating...
What I would like is a generic vendor mixin which do this for me, ie:
.vendors(#prop, #val) {
-moz-#prop:#val;
-webkit-#prop:#val;
-o-#prop:#val;
-ms-#prop:#val;
#prop:#val;
}
Then defining box-shadow mixin would as simple as:
.box-shadow() {
.vendors(box-shadow, #arguments);
}
The problem is my .vendors mixin does not compile...
I tried:
.vendors(#prop, #val) {
-moz-#prop: #val; /* Error */
~"-moz-#{prop}": #val; /* Error */
~`"-moz-#{prop}": #val; /* Error */
}
Do you have an idea on how to do this?
Cheers
Stylus has this, which is called Interpolation, eg:
vendor(prop, args)
-webkit-{prop} args
-moz-{prop} args
{prop} args
border-radius()
vendor('border-radius', arguments)
box-shadow()
vendor('box-shadow', arguments)
— Then,
button
border-radius 1px 2px / 3px 4px
yields to:
button {
-webkit-border-radius: 1px 2px / 3px 4px;
-moz-border-radius: 1px 2px / 3px 4px;
border-radius: 1px 2px / 3px 4px;
}
\o/
Another option, that I think is a little cleaner, would be do create a list of vendors and then iterate over that list to create the particular styles you want. Here's an example:
ALLVENDORS = webkit moz o ms w3c
vendors(prop, args)
for vendor in ALLVENDORS
if vendor == w3c
{prop}: args
else
-{vendor}-{prop}: args
This creates a list of vendors that you want to support and then allows you to reuse them. if later, you decide you want to support another prefix or want to remove one, all you have to do is remove it from the list.
And then you would use the list just as shown above:
border-radius()
vendors(border-radius, arguments)
box-shadow()
vendor(box-shadow, arguments)
I'm pretty sure less now has it. I've used this code in a Meteor.js project:
.vendor(#property, #value) {
-webkit-#{property}: #value;
-khtml-#{property}: #value;
-moz-#{property}: #value;
-ms-#{property}: #value;
-o-#{property}: #value;
#{property}: #value;
}
.vertical-align {
position: relative;
top: 50%;
.vendor(transformY, -25%);
}