I want to add the unit after a random($limit: 100) i want in the css : border-radius: <the random number>%
You can multiply the result from random() by 1% (or any other unit you may want) to append the unit. The outer parenthesis is a sass feature, so those type of calculations only work with alike-units or unitless + alike-units.
border-radius: (random($limit: 50) * 1%);
Related
I need to pass '%' unit sign as an argument for my mixin. While passing 'px'/'vh' etcetera has no problem, compiler refuses to work with percent sign.
With px there is no problem.
The same problem exists if I want to add percentage sign after function call.
This seems weird because it works perfectly with another units.
Is there a way to use percentage sign without modifying the output of a function?
In both cases you can use interpolation.
width: nth($params, $i)#{'%'};
and
#include scrollable-table-by-every-column-width(#{'%'}, auto, 15, 10, 20, 20, 15, 15, 5);
UPD
In a case where you need percents after function call you can use percentage function as well. But you need to keep in mind that this function literally does num * 100. So in this case with
width: nth($params, $i) +%;
You can do next:
percentage(nth($params, $i) / 100) //assuming you passed already calculated percents (not 0.2, 0.3.., but 20, 30...)
But this doesn't resolve problem when you want to pass percentage sign as an argument.
I have a problem with the following code:
#viewport-large: 1440px;
#viewport-medium: 1366px;
#viewport-small: 1280px;
#type: medium;
#setting: ~"#{viewport-#{type}}";
#value: (#setting + 1); // here can't add 1
It will show an error message in the LESS compiler saying: "Operation on an invalid type".
Can anyone tell me why this is the case? What should I do?
The output of Less' CSS escape function (e() or ~"") is a string and you can't add a number to it. This is why the compiler reports Operation on invalid type.
So, instead of doing it that way make use of the double resolution (##) like in the below code block:
#viewport-large: 1440px;
#viewport-medium: 1366px;
#viewport-small: 1280px;
#type: medium;
#setting: "viewport-#{type}"; /* this won't resolve into 1336px as yet */
#value: ##setting + 1px; /* resolution to 1336px + addition happens here */
In this method, we just form the variable name and set it to the #setting variable (instead of setting a actual px value) and so the real px value's type remains unpolluted. In the next line when we use the double #, Less compiler would try to fetch the value that is held by the variable whose name is same as the value of #setting variable and immediately sum 1px to it instead of converting it to a String.
Note: If you have the Strict Math option (--strict-math) enabled then the addition operation must be wrapped inside extra braces like below. Else, it would plainly output a concatenated value like 1366px + 1px instead of performing the addition and outputting 1367px.
#value: (##setting + 1px);
The --strict-math setting is disabled by default but some of your projects could have enabled it.
10 elements with the class xxx have different widths and heights. Putting transform: scale(1.1) enlarges the big ones clearly but the small ones barely show difference. This is bad UX. The mathematical question is how to make the bigger elements scale less then the smaller ones:
width 10 should get scale 1.1
width 5 should get scale 1.2
How can i mathematically solve this?
The question lacks context and details, so it is hard to give a generally meaningful answer. However, the given examples indicate the following solution:
x_new = 1 + 1/x_old
Where x_old is the input value, i.e. 10 or 5.
Using logarithmic scaling instead of just 1/x_old might be another option, depending on the context.
To illustrate the scenarios i made these pens:
non logarithmic scale: http://codepen.io/anon/pen/bwRVpj
logarhitmic scale: http://codepen.io/anon/pen/VKWLJK
var inlineStyle = ''
var divs = document.getElementsByTagName('div')
var len = divs.length
while(len--) {
var elWidth = divs[len].offsetWidth
var scale = 1+9/elWidth
inlineStyle += `#${divs[len].id}:hover {
transform: scale(${scale})
}`
}
document.getElementById('lolStyle').innerHTML = inlineStyle
I am trying to create dynamic values, but have failed so far. The created pixel value seems to lose the ability to be used in calculations.
$numericValue: 30;
$pixelValue: $numericValue+px;
// also tried $pixelValue: #{$numericValue}px;
$calc: $pixelValue * 2;
// also tried $calc: unquote($pixelValue) * 2;
This throws an error
Syntax error: Undefined operation: "30px times 2"
The trick is to use * 1px when you want to add a unit. Using +px or interpolation (#{$numericValue}px) turns it into a string.
$numericValue: 30;
$pixelValue: $numericValue * 1px;
$calc: $pixelValue * 2;
You need to define the unit you will use. If you are working with pixels you can create dynamic values adding px to the $numericValue.
$numericValue: 30px;
$pixelValue: $numericValue;
$calc: $pixelValue * 2;
I'm looking to generate placeholders and variables that can change depending on configured proportions such as the following:
$small-margin-top
$large-margin-top
$small-padding-bottom
Where each placeholder applies the corresponding, generated variable to the rule:
$small-margin-top
margin-top $marginsmall
$large-margin-top
margin-top $marginLarge
$small-padding-bottom
margin-bottom $marginSmall
I have statically defined the variables for now:
/* Margin */
$margin = 1rem
$marginsmall = $margin / $multiplier
$marginlarge = $margin * $multiplierLarge
$marginmini = $marginSmall / $multiplierLarge
But I get an error:
TypeError: expected "name" to be a string, but got ident:marginmini
properties = margin padding
proportions = mini small medium large
directions = top left bottom right
for property in properties
for proportion in proportions
for direction in directions
${property}-{direction}-{proportion}
{property}-{direction} lookup(property + proportion)
How can I generate placeholders for my proportions variable, such that the generated placeholders may be extended later (#extend $margin-large)?
EDIT: here is the working solution
The lookup bif accepts a string, and you are passing an ident (margin, padding, etc. without quotes). You can convert them to string by using concatenation. Also, you miss a $ sign:
properties = margin padding
proportions = mini small medium large
directions = top left bottom right
for property in properties
for proportion in proportions
for direction in directions
${proportion}-{property}-{direction}
{property}-{direction} lookup('$' + property + proportion)