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);
// ^^^^^
Related
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
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 am trying to realize a modular approach to text sizing using the following starting variables:
#font-size: 1.7rem;
#line-height: 1.414;
I would like to write a mixin that would create this result but have not quite fully grasped LESS yet:
h4 {
font-size: #font-size * #line-height;
}
h3 {
font-size: (#font-size * #line-height) * #line-height;
}
h2 {
font-size: ((#font-size * #line-height) * #line-height) * #line-height;
}
h1 {
font-size: (((#font-size * #line-height) * #line-height) * #line-height) * #line-height;
}
You have an array with your selectors - #elements.
Then you get the length of #elements - it will be used as iterator through an array.
Then the loop starts. It has the name set-font-size. In Less loops are recursive mixins. This mixin takes some parameters and calls itself until some condition is correct. In this example, it works while #_i > 0. Every time it calls itself, the value of #_i decreases.
Inside mixin (or loop) you get current element from array by calling extract(#array, #index) command. Then you set the font size to your selector. Evry time mixin call itself, the value of font-size is increased #_font-size * #_line-height.
That's all :)
Codepen DEMO.
Less:
#elements: h1, h2, h3, h4;
#iterations: length(#elements); // lehgth of #elements
#font-size: 1.7rem;
#line-height: 1.414;
.set-font-size(#_i, #_elements, #_font-size, #_line-height) when (#_i > 0) {
#selector: extract(#_elements, #_i);
#{selector} {
font-size: #_font-size;
}
.set-font-size(#_i - 1, #_elements, #_font-size * #_line-height, #_line-height);
}
.set-font-size(#iterations, #elements, #font-size, #line-height);
Css output:
h4 {
font-size: 1.7rem;
}
h3 {
font-size: 2.4038rem;
}
h2 {
font-size: 3.3989732rem;
}
h1 {
font-size: 4.8061481rem;
}
We need to display currency amounts in a browser table and since those are numbers, they should be right aligned.
Problem is with currencies like Japan which do not have floating point currencies.
So for them, we cannot show 5.10 Yen
Now, the requirement is to show something like this:
(Note the alignment and the mixing of decimal currencies with non-decimal)
5.23
12.00
3.24
5
9
11.00
In the above, 5 and 9 are Japanese Yens while others are USD
So the requirement is to replace floating points with spaces for currencies like JPY. Spaces are required to have proper alignment of the currencies.
Offcourse, for other currencies, the 2 decimal places should be there.
Does anyone know how the above can be done?
Thanks a lot in advance!!
Based on the below replies:
1) The values are sent from a Java server and fed into a JavaScript library SlickGrid
2) We want to control values at the server level because the SlickGrid code is not very amenable for this kind of work.
3) Currencies are being stored as floats because customer wants to see them that way :( and that's kind of correct because mostly people are bothered about dollars not cents, but then, some people are concerned about cents too.
I was really hoping of some option with DecimalFormat only as that would have been the best solution.
Else I would have to resort to the ugly solution of parsing and string massaging.
Currency should never be stored as a floating point number. It should always be integer amounts of the lowest denomination you are working with (Yen, Cents, Paise).
If you need to work with amounts smaller than the lowest natural denomination, store currency as integer amounts representing multiples of a specified fraction. For example 6 tenths of a Yen.
As for the formatting, there is a discussion of simple options here.
following CSS is basically taken from the link in jsj's answer (extracting the most relevant portion)
HTML only version:
td { font-family: monospace; }
span.int {
text-align: right;
float: left;
width: 3em;
}
span.fractional {
text-align: left;
float: right;
width: 2em;
}
<table>
<tr><td><span class="int">5</span><span class="fractional">.23</span></td></tr>
<tr><td><span class="int">12</span><span class="fractional">.00</span></td></tr>
<tr><td><span class="int">3</span><span class="fractional">.24</span></td></tr>
<tr><td><span class="int">5</span><span class="fractional"></span></td></tr>
<tr><td><span class="int">9</span><span class="fractional"></span></td></tr>
<tr><td><span class="int">11</span><span class="fractional">.00</span></td></tr>
</table>
JavaScript version:
function spanInt(content){ var span = document.createElement('span');span.className = 'int'; span.textContent = content; return span; }
function spanFractional(content){ var span = document.createElement('span'); span.className = 'fractional'; span.textContent = content; return span;}
function tableCell_int(value){
var td = document.createElement('td');
td.appendChild(spanInt(value));
td.appendChild(spanFractional(''));
return td;
}
function tableCell_float(value){
var intPart = Math.floor(value);
var fracPart = value - intPart;
var td = document.createElement('td');
td.appendChild(spanInt(intPart));
td.appendChild(spanFractional('.' + Math.round(100*fracPart)));
return td;
}
function tr(cell){
var elt = document.createElement('tr');
elt.appendChild(cell);
return elt;
}
var theTable = document.getElementById('theTable');
function add_int(value){ theTable.appendChild(tr(tableCell_int(value))); }
function add_float(value){ theTable.appendChild(tr(tableCell_float(value))); }
add_float(5.23); add_float(12); add_float(3.24);
add_int(5); add_int(9); add_float(11);
td { font-family: monospace; }
span.int {
text-align: right;
float: left;
width: 3em;
}
span.fractional {
text-align: left;
float: right;
width: 2em;
}
<table id='theTable'></table>
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.