This bit of Less does not compile.
h1 small {
font-size: 100/300 %;
}
...but I would like to be able to write something like it and get...
h1 small {
font-size: 0.33333333%;
}
Is that possible?
Try the following:
(100/300)*1%
Less only accepts values and not strings so you cant just add a string after a number but you can multiply with a percentage to archieve the same.
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);
}
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
Currently, one of my developers have developed this less file:
.countryFlag( #countryName :"DK"){
content: url("/images/flags/#{countryName}.gif") no-repeat center;
}
a.flag-DK {
.countryFlag ();
}
a.flag-DE {
.countryFlag (DE);
}
a.flag-EE {
.countryFlag (EE);
}
...
with some 20 countries. I was wondering if this can be done smarter with less, either using loops or dynamic names created at runtime. Consider the following pseudo-code that describes what I want:
a.flag-#{country} {
content: url("/images/flags/#{country}.gif") no-repeat center;
}
that simply matches any definitions. I am aware that this could create lots of conflicts, but perhaps it could be further narrowed down via regex? Makes sense, but haven't been able to find this.
An alternative could be to create the "static" css classes using a loop of some sort. Consider this pseudo-alternative:
#countries: 'dk', 'de', 'uk', 'us', ...;
for(country : countries) {
a.flag-#{country} {
content: url("/images/flags/#{country}.gif") no-repeat center;
}
}
and thus create the classes for a pre-determined list of countries.
Is either of these alternatives available in some sort of way? Or can you perhaps advice on a third option that I might have overlooked? I feel kinda stupid when I see 20-something almost identical classes defined, having only a small string in difference, and think that a CSS pre-processor MUST be able to do this smarter.
Thanks!
Less.js "for" snippet has a few lines of documentation, too. I found this page very useful a few days ago when I was facing a problem like yours.
You can simply declare a list of values to be used as strings in your foreach loop. (eg #list: banana, apple, pear, potato, carrot, peach;)
Make you sure you're using a recent version of Less!
I have a variable that sets a percentage:
#var-a: 50%;
And another that is a fixed width:
#var-b: 100px;
I want to calculate #var-c as below:
#var-c: (#var-a * #var-b);
I expected 50px, but actually get 5000px. What am I doing wrong?
Less calculations use the numbers regardless of the units. If you know that #var-a will be in percentages, you could just do something like this:
#var-c: unit(#var-a / 100 * #var-b, px);
using unit() allows you to control the output unit.
You can also use guards in addition to do something else if #var-a isn't a percentage.
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.