Is there a way to use property names as variables in LESS?
For example:
h1 {
font-size: 16px;
line-height: font-size * 2;
}
The above snippet doesn't work, and I wonder how to get this effect?
I don't think it's possible.
A workaround is creating a variable and assign the font-size to it. Then you can use this to multiply the value:
#fontsize: 16px;
h1 {
font-size: #fontsize;
line-height: #fontsize * 2;
}
Related
I want to do a text mixin, but idk how to pass optional properties to the font-family.
In this example, it takes two values (if the first one is not supported by the browser it will use the second one)
This wont work: $fontFamily: "Montserrat SemiBold" | sans-serif
#mixin text($fontSize: 20px, $fontFamily: "Montserrat SemiBold" | sans-serif, ...) {
font-size: 16px;
font-family: "Montserrat SemiBold", sans-serif;
...
}
You can use parentheses:
#mixin text(
$fontSize: 20px,
$fontFamily: ('Montserrat SemiBold', sans-serif)
) {
font-size: $fontSize;
font-family: $fontFamily;
}
As you can see at http://semantic-ui.com/usage/theming.html, there are predefined variables for each element, collection, module etc (for example button.variables: https://github.com/Semantic-Org/Semantic-UI/blob/master/src/themes/amazon/elements/button.variables).
Unfortunally, I cannot find all the possible variables for each element, module, collection etc. Is there something like a cheatsheet with all possible theme variables for Semantic-UI?
what you are actually looking for is Labeled as Definitions under the folder src.
https://github.com/Semantic-Org/Semantic-UI-Meteor-Data/tree/master/lib/semantic-ui/src/definitions
Here is an example: https://github.com/Semantic-Org/Semantic-UI-Meteor-Data/blob/master/lib/semantic-ui/src/definitions/globals/site.import.less
You can only change a few variable for each tag, for example for body:
body {
margin: 0px;
padding: 0px;
overflow-x: #pageOverflowX;
min-width: #pageMinWidth;
background: #pageBackground;
font-family: #pageFont;
font-size: #fontSize;
line-height: #lineHeight;
color: #textColor;
font-smoothing: #fontSmoothing;
}
Hope this helps you out!
Bests!
Jules
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);
Can I add a mixin to a variable in LESS?
Something like this
#input-border-radius: .rounded();
or
#h1: .font-size(46) // This pulls from the rem calculator mixin.
Looked at the LESS Docs but can't see a way to do it.
There is a way.
You can define properties of a (possibly immaginary) class and recall the properties of that class in the style of a different class. For example:
.fontstyling {
font-weight: bold;
color: black;
}
h1 {
font-size: 46px;
.fontstyling;
}
h2 {
font-size: 38px;
.fontstyling;
}
(thats not the best way to format the headings - but for other exemples it is really useful!)