I've made the following two Mixins:
.responsive_color(#color, #response_color, #speed: 0.1s){
color: #color;
.transition(color, #speed);
&:hover, &:active, &:focus{
color: #response_color;
}
}
.responsive_background(#color, #response_color, #speed: 0.1s){
background-color: #color;
.transition(background-color, #speed);
&:hover, &:active, &:focus{
background-color: #response_color;
}
}
Since these two are nearly identical I want to combine them into something like this:
.responsive(#property, #color, #response_color, #speed: 0.1s){
#property: #color;
.transition(#property, #speed);
&:hover, &:active, &:focus{
#property: #response_color;
}
}
While this doesn't cause errors in the LESS parser (PHP class) it is simply ignored.
I've also tried #{property} and '#{property}' but both of these cause errors.
Does anyone know how I can output #property to be properly parsed?
Or am I trying to do something that isn't possible?
Just a quick update. Now the feature is there:
Properties can be interpolated, e.g. #{prefix}-property: value;
— Less.js 1.6.0 changelog
So if you're using Less 1.6 or later, now you can actually do it like this:
#{property}: #response_color;
More info in this great SO answer.
A similar question has been answered here that may help you. That particular feature isn't in the LESS.js framework (yet), but you can possibly get around it with a little hack, outlined here:
How to pass a property name as an argument to a mixin in less
Related
Is it possible to do something like this?
Or maybe is there a simpler and adequate «sugar» solution?
.bd (#border:0, #style:[solid,double,dotted]){
border: #border * 1px #style;
}
.dummy-style{
.bd(1, #[3]); //border: 1px dotted;
}
You don't need to imitate arrays because arrays do already exist in Less (they just do not have [] operator since it's already has another semantics in CSS).
.bd(#border, #style) {
border: #border * 1px extract(solid double dotted, #style);
}
.dummy-style {
.bd(1, 3);
}
(I'm not counting that:)
It's not a "sugar" in any way. Many people would consider this as antihuman cryptographic obfuscation: when anyone but you sees .bd(1, 3) how can she know what the heck this is supposed to mean at all? But of course it's completely up to you to decide if you're fine with "write-only" code.
I'm a semantic-ui newbie, usually I use bootstrap 3.0 and i really like the "visible-xs" feature, someone have a workaround for this on semantic-ui ?
Basically, it's just
.visible-xs { display: none !important; }
#media (max-width: 767px) {
.visible-xs { display: block !important; }
}
Just add it somewhere to the CSS.
You can use container's visibility for that:
http://semantic-ui.com/elements/container.html#/introduction
But be carefully, they only works for containers not individual elements.
If you want to use it like Bootstrap on particular elements, you can use some of this snippets:
https://github.com/Semantic-Org/Semantic-UI/issues/1114
And this is actually the discussion to allow that support on semantic ;)
In some cases is common to use same values in different properties, for example (is just an example to show purpose) the following nested rule:
.button-link
{
height:40px;
a
{
line-height:40px;
}
}
The idea is that to vertically center button text line-height and height should be equal.
Is there a way in LESS to "assign a value taken from a diffent property"?
I know that I should use a LESS #variable but in this case is not the same thing and need extra code. Instead should very interesting and useful if I should edit only button's height and then LESS will replaced the same value to line-height
UPDATE:
Another example could be the following:
.button-link
{
color:white;
background:black;
&:hover
{
color:black;
background:white;
}
}
In which "hover" status should invert color and background-color comparing to default state.
This is possible starting with v3 of LESS! Here is the documentation on it.
The example use case they provide ends up with the background-color getting the same value as the color property when compiled:
.widget {
color: #efefef;
background-color: $color;
}
You can´t :(. What i usually do is:
#buttom-height = 100px;
#a-link-height: #buttom-height;
and use that variables in your less declarations. Its a dummy example, i know, but imagine calculated data values from other variables or complex dependencies, proportional paddings/margins... that´s the way i learnt from Bootstrap LESS code.
I have a common.less file, that implements the basic CSS for different skins:
#textColor: black;
#iconSize: 16px;
.container: {
color: #textColor;
background-color: white;
}
.icon: {
width: #iconSize;
height: #iconSize;
}
// note that #iconSize is also used in this file inside mixins
The plan is to use it like so skin_1.less:
#iconSize: 32px; // override the icon size
// but leave #textColor as default
#import "common.less";
.container: {
color: red;
}
// I would now have big icons and red text
So I would like to have a common style, that I can reuse and selectively override variables.
This does not ssem to work however. I think it's because imports are always moved to the top, so variables cannot be pre-defined.
(I also read that variables are rather constants, so that may be another problem.)
Anyway: is there a better pattern to solve my use case?
You don't need to split the files up, just override the variable after the import. Variables are always resolved as the last definition, even if it is after where it is used.
For example, I would like to be able to do this:
.bigfirstletter(#mag) {
&:first-letter {
font-size: [get_original_font_size] + #mag;
}
}
But as far as I can see I have to do this, which is not as neat
.bigfirstletter(#fontsize, #mag) {
&:first-letter {
font-size: #fontsize + #mag;
}
}
Do I have an alternative? Thank you for your help.
damn it was simpler than I thought :)
.bigfirstletter(#mag) {
&:first-letter {
font-size: 1em * #mag;
}
}
1em will simply inherit whatever it is defined for element, and you just set your magnification. I changed the plus sign to multiply on purpose as with this you're going to have better control over font size - #mag=1.0 for same font size, #mag=1.5 for 50% bigger, and so on..
sorry about the answer below, for some reason I didn't see that you're using first-letter in the example provided (doh!)
take a look at :first-letter CSS pseudo class - here