I have the following =>
#header-height: 40;
#footer-height: 20;
I would like to be able to do
min-height: calc(~'100% - '#header-height+#footer-height'px') !important;
which return me
100%-60px
but my test fail as I get
min-height: calc(100% - 40+20 'px') !important;
You can use ${var} syntax to insert variable into less string expression:
min-height: ~'calc(100% - #{header-height}px - #{footer-height}px)' !important;
Moreover, it is better to execute the whole calc(...) command due ~'calc(...)' syntax
Related
I try to do any less function which will be called to create some classes.
Here is the way I tried :
.makeCssColor{#couleur) {
.coul_#{couleur} {
background-color: fade(~"#{couleur}, 'Fonce'", 15%);
&.open, &:hover {
background-color: ~"#{couleur}, 'Fonce'";
}
.btMod {
background : url('/img/btModEvt_#{couleur}.png') left top no-repeat transparent;
}
}
}
And I try to call it to create the classes :
.makeCssColor("bleu");
.makeCssColor("rouge");
But it generate an error. I don't find the good way to do it... And it bothers me to repeat all these code for each color (there is more than these line code and more thant two colors !).
Can anyone give me a little help ? :)
[edit]
ok, thanks to your help, this code does not generate an error, but there is a mistake in the CSS file :
#marronFonce = #9d5a1e;
.makeCssColor(#couleur) {
.coul_#{couleur} {
.top {
background-color: #couleur, 'Fonce';
}
.mod {
background : url('/img/btModEvt_#{couleur}.png') left top no-repeat transparent;
}
}
}
.makeCssColor(marron);
Generate this into the css file :
.coul_marron .top{background-color:marron,'Fonce'}
.coul_marron background : url('/img/btModEvt_marron.png') left top no-repeat transparent;
So the background color isn't good :
.coul_marron .top{background-color:#9d5a1e}
.coul_marron background : url('/img/btModEvt_marron.png') left top no-repeat transparent;
I need to evaluate #couleur, 'Fonce' : #marronFonce => #9d5a1e.
I tried #{#couleur, 'Fonce'} but it doesn't works...
Fade function takes a colour and a fade percentage, in your case you are passing 2 colours. Pass them one at a time. I also made some adjustments on #couleur since i some cases they don't need to be escaped
.makeCssColor{#couleur) {
.coul_#{couleur} {
background-color: fade(#couleur, 15%), fade(Fonce, 15%);
&.open, &:hover {
background-color: #couleur, 'Fonce';
}
.btMod {
background : url('/img/btModEvt_#couleur.png') left top no-repeat transparent;
}
}
}
when you call the mixin use the below, no need to use quotes
.makeCssColor(bleu);
UPDATE - just pass it in
.makeCssColor(#couleur, #name) {
.coul_#{name} {
.top {
background-color: #couleur;
}
.mod {
background : url('/img/btModEvt_#{name}.png') left top no-repeat transparent;
}
}
}
then when you call it
.makeCssColor(#marronFonce, marron);
OR
other option is you can make a loop, it's more complicated but you can try it. I am using an example I already have on my computer
first define a variable with the colour and names
#sample:
~"0070" '#ebebe7',
~"08x2" '#00247a',
~"01k0" '#92918e';
then loops thru it
.sample-loop ( #l ) when ( #l > 0 ) {
#item: extract( #sample #l );
#code: extract( #item, 1 );
#colour: color(extract( #item, 2 ));
.ext-#{code} {
background-color: #colour;
}
.sample-loop( #l - 1 );
}
and finally call the loop to generate your classes
.sample-loop( 3 );
depending on which version of less you have, the 3 can coded so it is dynamic. If you have older version of less then you have to hard code the length of the variable, or assign the length to a variable so you can use it anywhere
I'm starting with SASS but I can't figure how to do proper math with a variable.
Here is my code:
$page-width: 1200;
margin-left: 50% - ( ( $page-width / 2 ) + px);
I tried so many versions but they're all wrong
To do this math you have to mix %and pxand it gets done using calc operations with CSS.
$page-width: 1200;
.element-class{
margin-left: calc(50% - (#{$page-width}px / 2));
/* outputs: margin-left: calc(50% - (1200px / 2)); */
}
I have the following LESS:
padding-left: unit(#padding-min*#per + 25)px;
#padding-min*#per = 14vw
It's compiling to padding-left: 39 px.
How can I remove the space between 39 and px?
The unit() function takes the unit as the second parameter.
padding-left: unit(#padding-min*#per + 25)px
// ^^^
should be
padding-left: unit(#padding-min*#per + 25, px);
// ^^^^^
I currently have a mixins.less file, where almost all mixins are basically the same:
.border-radius(#radius) {
-webkit-border-radius: #radius;
-khtml-border-radius: #radius;
-moz-border-radius: #radius;
border-radius: #radius;
}
.box-shadow(#value) {
-webkit-box-shadow: #value;
-khtml-box-shadow: #value;
-moz-box-shadow: #value;
box-shadow: #value;
}
Is there a way to create some kind of generic mixin, that I could call like this:
.vendor('border-radius', '3px');
.vendor('box-shadox', '10px 10px');
and which would produce the same result as above?
Notice:
The recommendation is to stop rely on this technique and consider using a dedicated prefixing tool (e.g. Autoprefixer, -prefix-free etc.). Hardcoding vendor prefixes via CSS pre-processor mixins (Less, SCSS or whatever) is a pure anti-pattern these days and considered harmful. Auto-prefixing tools will make your code clean, readable, future-proof and easily maintainable/customizable.
See for example: less-plugin-autoprefix
Original answer:
Well, currently LESS does not support "property name interpolation" so you cannot use a variable in property names. There's a hack however: How to pass a property name as an argument to a mixin in less
So if you don't mind "dummy" properties in the output CSS, here we go:
.property_(#property, #value) {
_: ~"; #{property}:" #value;
}
.vendor(#property, #value) {
.property_('-webkit-#{property}', #value);
.property_( '-khtml-#{property}', #value);
.property_( '-moz-#{property}', #value);
.property_( #property, #value);
}
#usage {
.vendor(border-radius, 3px);
.vendor(box-shadow, 10px 10px);
}
Output:
#usage {
_: ; -webkit-border-radius: 3px;
_: ; -khtml-border-radius: 3px;
_: ; -moz-border-radius: 3px;
_: ; border-radius: 3px;
_: ; -webkit-box-shadow: 10px 10px;
_: ; -khtml-box-shadow: 10px 10px;
_: ; -moz-box-shadow: 10px 10px;
_: ; box-shadow: 10px 10px;
}
Update:
Less v1.6.0 introduced Property Interpolation feature so now you don't need any hacks anymore:
.vendor(#property, #value) {
-webkit-#{property}: #value;
-khtml-#{property}: #value;
-moz-#{property}: #value;
#{property}: #value;
}
#usage {
.vendor(border-radius, 3px);
.vendor(box-shadow, 10px 10px);
}
I'm trying to use CSS3 border-image for a simple button design: the left slice of the image should be the left border of the text, the right slice the right border, and the middle slice should be repeated (or stretched - it does not matter) as background. I need a fallback for browsers not supporting border-image - just using the middle slice as a background, without edges would be acceptable. The problem is, if I do this:
.button {
border: solid 1px white;
border-size: 0 5px;
background: ('button-slice.png') repeat;
border-image: url('button.png') 0 5 0 5 fill;
-moz-border-image: url('button.png') 0 5 0 5;
/* repeat for other vendor prefixes */
}
the image from the background property will overlap the borders and mess up the button for browsers which support border-image.
Is there a lightweight way of solving this problem (whithout introducing modernizr or similar javascript checks)?
change the border-image 0 5 0 5 to 1 1 5 1 :
border-image: url('button.png') 1 1 5 1 fill;
-moz-border-image: url('button.png') 1 1 5 1;
border-image generator online
border-image is tricky for fallbacks. Doing...
.button {
border: solid 1px white;
border-size: 0 5px;
background: ('button-slice.png') repeat;
background: rgba(0,0,0,0);
border-image: url('button.png') 0 5 0 5 fill;
-moz-border-image: url('button.png') 0 5 0 5;
/* repeat for other vendor prefixes */
}
Should work for all browsers except IE9.
Since you only have a left and right border, I would suggest using pseudo-elements...
.button {
border: solid 1px white;
background: ('button-slice.png') repeat;
position: relative;
}
.button:before, .button:after {
content: '';
width: 5px;
position: absolute;
height: 100%;
background: transparent url('button.png') 0 0 no-repeat;
top: 0;
}
.button:before {left: -5px;}
.button:after {right: -5px;}
This technique should show nice buttons in all modern browsers plus IE8. Older browsers fallback without the edges.
It seems that new versions of FF support both border-image parameters and one override another.
Try reversing the order of those lines as so:
-moz-border-image: url('button.png') 0 5 0 5;
border-image: url('button.png') 0 5 0 5 fill;
In this way, browsers that support both parameters and override one with the later will take the version with the fill.