I am trying to use clamp for a font-size in my Less file. I set it to be font-size: clamp(3.429rem, -1.870rem + 6.493vw, 9.143rem);.
When I build my styles however, I end up with CSS looking like font-size: clamp(3.429rem, 4.623rem, 9.143rem);. Less is evaluating the addition instead of passing over the whole clamp expression into CSS. I find this odd since there is no view width at build time.
How do I get Less to simply pass the clamp expression into the CSS file without evaluating?
Related
The Less percentage function returns value in (%) - wow!
element {
width: percentage(700 / 1400);
}
will compile to:
element {
width: 50%;
}
What would be the best way or syntax to get the value in (vw) so the style will compile to:
(bare in mind that the division function needs to be used. (700 / 1400))
element {
width: 50vw;
}
The best way to achieve the expected output would be to multiply the value by 100vw. This would be the most meaningful and easily understandable method.
a{
width: 700/1400 * 100vw;
}
The below method of using unit() function works too but I wouldn't really recommend it.
One of the primary reasons why I wouldn't recommend it is because I am not sure if that is supposed to work as it does. The unit() function is supposed to take a number as its first parameter and add the units to it but a percentage value is not exactly a number and this may not work in future versions depending on how the Less core team view it.
I read the docs and it seems like the first parameter can be a number with or without a dimension but I still wouldn't recommend it because the earlier method is far more easier to understand than the usage of functions.
b{
width: unit(percentage(700/1400), vw);
}
I've used bootstrap for awhile now, and for the life of me I cannot remember the xs coming into play at 767px. I'm using Boostrap v3, LESS, and cannot find where to change the threshold for the hidden-xs class. I did a project-wide search, and only the variables are popping up in the Find Results.
file: responsive-utilities.less
line: 134
.hidden-xs {
#media (max-width: #screen-xs-max) {
.responsive-invisibility();
}
}
When I inspect element in chrome the variable, #screen-xs-max is being set at 767px
#media (max-width: 767px)
.hidden-xs {
display: none !important;
}
I have disable cache on in chrome as well. I attempted to change the #screen-xs-max variable by removing the variable all together and putting a hard number, but that didn't change it either.
I've also looked at this website, Customize and download Bootstrap, and that confused me even more b/c I use col-XXX-## and hidden-XX, not the #screen-xs, which is in the Media queries breakpoints section. And not only that, but the xs is set to 480px.
Appreciate it.
Addition:
I am compiling LESS using less.js as well.
Maybe my main question would be - how do I increase the sm threshold, and reduce the xs threshold - as in have the xs at a lower pixel setting, like 520px?
If you are compiling the LESS yourself, and want to modify the breakpoint between xs and sm sizes, try changing the #screen-sm variable in the variables.less file.
e.g. for v3.3.0:
https://github.com/twbs/bootstrap/blob/v3.3.0/less/variables.less#L285
Line 285
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
What is advantage of using LESS variables for changing properties like;
#Margin-10: 10px;
#Margin-12: 12px;
#Margin-19: 19px;
#Margin-110: 110px;
#Margin-189: 189px;
#Margin-115: 115px;
#Margin-150: 150px;
.................and so on.
And creating those variables which will not be alter in future.
#PullLeft: left;
#PullRight: right;
I am re-factoring the LESS in my application which has too many CSS properties which are using variables for above scenarios. Is there any advantage of using variables in this case?
I think we may have a hammer in the house with those variables. Having them named so specifically is problematic both because it doesn't really work with semantic concepts of layouts AND because if you were to change some of them, total chaos would soon ensue. Just imagine:
#margin-189: 27px;
#margin-115: 46px;
I had trouble typing that even as an example. I feel something like the shower scene from The Crying Game.
No, these variables are an example of when your only tool is a hammer, all you see are nails.
More correct might be something more semantically flavored, like:
#container-margin-left: 36px;
#panel-margin-left: 20px;
Those at least speak to how your site will be styled AND if the values were to change, it would not result in an immediate maintenance trainwreck.
Its highly discouraged to use the name of variable same as value. The purpose of using variables is that if there is a change required then modification is minimal. e.g you have declared a variable #Container-width: 100px and you are using it in 10 files. So if you want to change its value to 200px then you would simple have to change value nothing more.
There are two disadvantages of using variables names as you suggest:
If you want to change the variable #Margin-10 value to say 15 e.g #Margin-10: 15 it would look odd.
If you are declaring variables for each value then there is no benefit of declaring it as variable because you have to modify it on several places (which is not fulfilling the purpose of variables)
Now coming to the variable name #PullRight or #PullLeft. Again there is no benefit of using such names, as the values (left, right, top , bottom) are limited not variable. So I would suggest that you don't create variables but use values as it is.
Create variable names on the basis of their functionality. Use noun and verbs.
It's the same as using variables in any language. You can simply change them whenever you want.
Now you can think - they will never change, but in future you may want to make some changes. You may even move some CSS to another project where you decide to make some changes. Using variables you will do it it a minute.
Another example. Let's assume you have the following code in CSS:
#page {
width: 800px;
}
#content {
width: 600px;
}
#sidebar {
width: 200px;
}
now you decide to change #page width to 780px
SO you change it:
#page {
width: 780px;
}
#content {
width: 600px;
}
#sidebar {
width: 200px;
}
and now you have a problem - you need to look in the whole file what's wrong (in real file it won't be so easy as in example above).
Using variables you could have:
#page-width: 800px
#content-width: 600px;
#sidebar-width: #page-width - #content-width;
so without a problem you can change the value or make small modification in those 3 lines.
However in the example from question I think it hasn't been done as it should. If you define:
#Margin-10: 10px;
#Margin-12: 12px;
#Margin-19: 19px;
you expect that Margin-10 is 10 unit margin but you can decide to change the value for let's say 11 and you can have:
#Margin-10: 11px;
#Margin-12: 15px;
#Margin-19: 24px;
It will make you completely mess, because in fact even if you look at this file, you now don't know what is Margin-10 variable and what's its purpose. It has even other value than its name suggests so you don't really know what to expect and you again need to look at whole CSS source.
So variables are useful but they should have names that you can easily remember and know what's their purpose. You should never connect variable name with variable value because value can change and you will get useless name.
However it's also possible in above example that someone defined those margins even not to change their values but to change their units, for example for using em:
#Margin-10: 10em;
#Margin-12: 12em;
#Margin-19: 19em;
However I still think it's not the best solution because it's limiting re-usage this file
I'm using the new calc function in CSS to get the width for an object, as in:
width: calc(100% - 40px);
Unfortunately, since this is in a LESS file, LESS is "helpfully" pre-converting this to 60% during compile time.
I want less to ignore math when it's in a calc function since I need the browser to do this calculation, not less.
Is there anyway I can make LESS ignore this calculation so I can pass it straight to the browser?
Use it through an escaped string:
width: ~"calc(100% - 40px)";
Which outputs purely as CSS:
width: calc(100% - 40px);
Instead of precalculating width: calc(60%) (as you are experiencing).
NOTE: LESS 1.4+ does not need this escaped string if the strict-math mode is set, as all "math" then requires its own parenthesis to trigger. So LESS 1.4+ in that mode could be used as you originally had it, and if you wanted it to do the math, it would need extra parentheses and a unit() function like so: width: calc((100% - unit(40px)));.
In XAML, you can define a size property (such a length or width) in "*" units, in which * represents a part of the remaining space.
So, if I have a parent element that is 1000px wide, and it has 2 children, which are both defined as being 1* wide, they will be 500px each. If one is defined as 3*, and the other as 1*, then one will be 750px, the other 250px.
If there is a third element, and the widths of the 3 are defined as "100px", "" "2" respectively, then the widths of the 3 will be 100px, 300px, 600px.
Is there a CSS equivalent of this, or should I just simulate it using calc()?
Flexible box layout model does that with an OK support matrix (no IE)
It does exactly what you're after, e.g. for your scenario 3:
<div class="box">
<div>un</div><div>deux</div><div>trois</div>
</div>
.box {
width: 1000px;
display: box;
box-orient: horizontal;
}
.box > div:nth-child(1){ width:100px; }
.box > div:nth-child(2){ box-flex: 1; }
.box > div:nth-child(3){ box-flex: 2; }
Fiddle'd from html5rocks example
Although ratios aren't supported in CSS, percentages are. This means you can't really specify "the rest of the width", but you can normally get what you want.
For example, your first example of 1000px with 1* could be achieved by assigning `width: 50%'. Your second example would be 75% and 25%.
Your third example is a bit more complicated, mixing fixed px values and percentage values won't work. What you can do is use some clever margins to get the overall result.
I have created a JS Fiddle to illustrate the third example.