The main question is:
Should I define unit in sass variables?
I am a Sass beginner, I've already searched about best practices (and I am trying to apply them) but I could found nothing about this question.
Let me explain with examples. I am working on a website which some sections will be overridden by the customer. So, I have some sass variables that I expect my custumer override them. Some of these variables are width, for example. I've started defining all with unit included, like:
$my-app-main-container-width: 150px !default;
However, in some cases, I need to use variables to do math operations:
$density: 5;
#for $i from 1 through 10 {
.app-item-#{$i} {
padding: #{$density}px #{$density}px #{$density}px #{$i * $density + $density}px;
}
}
So I realized that in some cases I've declared the variable with px and in other cases, just the number. In my research, all samples are including the unit in variable value, but sounds weird and inconsistent when you need to calc. But, like I've said, I am a sass beginner so I will enjoy other opinions.
For now, I am omitting the unit in all my variables and defining the unit when I use the variable.
Related
Can somebody describe Use of Calc() in css?
And what is ~ sign meaning with Calc()?
How below code calculate?
calc(~'(100% - 4 * 23.233%) / 3')
That is not a valid value in plain CSS.
It looks like that is from LESS source code, which is compiled down to the following:
calc((100% - 4 * 23.233%) / 3);
As stated by the relevant LESS documentation, ~'' is used for escaping:
Escaping allows you to use any arbitrary string as property or variable value. Anything inside ~"anything" or ~'anything' is used as is with no changes except interpolation.
This is done to prevent LESS from automatically evaluating the expression as math. Without the escaping, the value would be evaluated and compiled to:
calc(2.3559999999999994%);
For further reference, see this related question: "Less Aggressive Compilation with CSS3 calc".
So I've now read enough about various funky nth-child and nth-of-type patterns to have the seventh son of the seventh son fly a space-ship backwards to Pluto and back. But I still haven't come across a way to simply provide a list of specific children in a concise way. It'd work like so:
td:nth-child(1,3,7,10) { text-align: center; ... }
The above syntax would obviously be mighty convenient for example when styling table cells. That something like this would exist, seems like a no-brainer to me. Of course I can always use:
td:nth-child(1), td:nth-child(3), td:nth-child(7), td:nth-child(10) { ... }
But that's just so much redundant repetition and clutter in my CSS. Particularly when I need to also have a class name specified before the td. Then it becomes as bloated as this, for example:
.study_references td:nth-child(1), .study_references td:nth-child(3), .study_references td:nth-child(7), .study_references td:nth-child(10) { ... }
I'd really like to have my CSS look a bit more elegant, concise, and readable. Is there really no way to provide a specific list of nth-s to the selector in one shot? (Not looking for a preprocessor fix.)
Unfortunately there isn't. Neither Selectors 4 nor CSS Syntax 3 have extended the An+B notation to allow a list of such expressions as in your 1,3,7,10 example either, though I wonder if it may be worth suggesting as it seems pretty doable. In fact, I just went ahead and suggested this (I couldn't find any earlier proposals using either the mailing list search, or Google).
The closest to a solution that Selectors 4 offers is via the :matches() pseudo, which makes it so that the only bit you have to repeat is :nth-child(...):
.study_references td:matches(
:nth-child(1), :nth-child(3), :nth-child(7), :nth-child(10)
) { ... }
But this is still far from ideal, and is not yet implemented anyway.
If you can suss out at least part of a pattern from most of the numeric indices you're looking for, you could modify this pattern as necessary using :not() and/or additional :nth-child()/:nth-last-child() and still pick up the right elements. See this answer of mine where I refactor [9, 11, n+12] into [n+9 except 10]. However this is likely more trouble than it's worth, and the resulting selector will almost always be far from elegant unless you get really lucky as I did above.
When CSS lacks a feature, Sass can help. You can try a formula like this one in Sass. It's not the most elegant solution, but perhaps you can improve on it.
$children: 1,3,7,10;
#each $child in $children {
td:nth-child(#{$child}) {
...
}
}
I was wondering the differences of variable and constants as I see different declaration of variable/constant in the codes written by ex-colleagues.
I know that variable is something that can be change throughout the code and the value of constant is fixed and can't be changed. By far I've written everything in variable (even if the variable will not be change). Is it my practice is incorrect? Perhaps my code is not complicated therefore I use variable all the time.
Anyhow, if my understanding proven wrong, please enlighten me with the correct guidelines on this matter will do.
It is a good code practice to use constants whenever possible.
At runtime / compile time it will be known that only Read operations can be done on those values, thus some accessing / IO optimizations will be done to the code automatically , which will significantly increase performance.
Another difference is that constants are stored in a different preallocated section of your code (compiler dependent, but on most compilers this is what happens), which makes them easier to access , and they don't get allocated / deallocated all the time (so another performance optimization).
And finnaly, constants can be evaluated at compile time .
For example, if you have an ecuation of constants, something like the following :
float a = const1 * const2 / const3 + const4;
Then the whole expression will be evaluated at compile time, saving cycles at runtime (since the value will always be the same).
Some popular constants that refer to this sort of optimization are PI , PI/2 , PI/4, 1/PI.
const int const_a = 10;
int static_a = 70;
public void sample()
{
static_a = const_a+10; //This is correct
// const_a=88; //It is wrong
}
In the above example, if we declare the variable as const we can't able to assign the value from anywhere but we can use that variable.
Tried searching for this but it's difficult given the syntax. Is there any way to generate a random number in LESS? I checked the documentation and don't see anything, but wondered if anyone knew of a trick or undocumented solution.
By a LESS Mixin for Variation
By making a LESS mixin to generate the random number, you can call it each place as needed with easier control of the output. This code was built in part from the help of this SO answer, which allows you to control the output range of the random number, and whether it outputs decimals or integers.
LESS Define Mixin
/* Mixin to generate random number;
int should be 0 or 1, 1 being to make it an integer
*/
.makeRandom(#min: 0, #max: #min+1, #int: 0) {
.checkInt() {
#getNum: `Math.random() * (#{max} - #{min} + #{int})`;
#base: unit(`#{int} == 1 ? Math.floor(#{getNum}) : #{getNum}`);
}
.checkInt();
#randNum: #base + #min;
}
The above will output a variable labeled #randNum for each time the mixin is called. So then this can be done:
LESS Use Mixin
.rand1 {
.makeRandom(); /* straight random decimal between 0 - 1 */
random-number: #randNum;
}
.rand2 {
.makeRandom(#max: 2); /* random decimal 0 - 2 */
random-number: #randNum;
}
.rand3 {
.makeRandom(10, 20, 1); /* random integer 10 - 20 */
random-number: #randNum;
}
Which yields an output something along these lines (of course, the numbers will change with each compilation from LESS):
CSS Output
.rand1 {
/* straight random decimal between 0 - 1 */
random-number: 0.1597523226169918;
}
.rand2 {
/* random decimal 0 - 2 */
random-number: 0.08123856632111548;
}
.rand3 {
/* random intger 10 - 20 */
random-number: 15;
}
Of course, I realize you would probably in most cases not be directly outputting these random numbers, but rather using them in some other calculation. But this illustrates how the mixin can be used.
I also realize this does not resolve any randomness with respect to the same class usage. In other words, any element with .rand3 class above will have 15 as its number. I believe this is the issue you ran into based on your comment:
Unfortunately, I didn't think about this making all matching elements
the SAME random number, which of course it does. So I ended up using
JQuery each() with standard javascript to accomplish what I wanted.
That is just the fact of life for LESS being a preprocessor of CSS. To get randomness across similar elements via LESS you would need to generate the random numbers from this mixin by a series of classes via some sort of a loop structure and apply each class of the series to the various elements to get the randomness.
According to the documentation:
JavaScript evaluation
JavaScript expressions can be evaluated as values inside .less files. We recommend using caution with this feature as the LESS will not be compilable by ports and it makes the LESS harder to maintain. If possible, try to think of a function that can be added to achieve the same purpose and ask for it on github. We have plans to allow expanding the default functions available. However, if you still want to use JavaScript in .less, this is done by wrapping the expression with back-ticks:
So this should work:
#var: `Math.random()`;
Tried searching for this but it's difficult given the syntax. Is there any way to generate a random number in LESS? I checked the documentation and don't see anything, but wondered if anyone knew of a trick or undocumented solution.
By a LESS Mixin for Variation
By making a LESS mixin to generate the random number, you can call it each place as needed with easier control of the output. This code was built in part from the help of this SO answer, which allows you to control the output range of the random number, and whether it outputs decimals or integers.
LESS Define Mixin
/* Mixin to generate random number;
int should be 0 or 1, 1 being to make it an integer
*/
.makeRandom(#min: 0, #max: #min+1, #int: 0) {
.checkInt() {
#getNum: `Math.random() * (#{max} - #{min} + #{int})`;
#base: unit(`#{int} == 1 ? Math.floor(#{getNum}) : #{getNum}`);
}
.checkInt();
#randNum: #base + #min;
}
The above will output a variable labeled #randNum for each time the mixin is called. So then this can be done:
LESS Use Mixin
.rand1 {
.makeRandom(); /* straight random decimal between 0 - 1 */
random-number: #randNum;
}
.rand2 {
.makeRandom(#max: 2); /* random decimal 0 - 2 */
random-number: #randNum;
}
.rand3 {
.makeRandom(10, 20, 1); /* random integer 10 - 20 */
random-number: #randNum;
}
Which yields an output something along these lines (of course, the numbers will change with each compilation from LESS):
CSS Output
.rand1 {
/* straight random decimal between 0 - 1 */
random-number: 0.1597523226169918;
}
.rand2 {
/* random decimal 0 - 2 */
random-number: 0.08123856632111548;
}
.rand3 {
/* random intger 10 - 20 */
random-number: 15;
}
Of course, I realize you would probably in most cases not be directly outputting these random numbers, but rather using them in some other calculation. But this illustrates how the mixin can be used.
I also realize this does not resolve any randomness with respect to the same class usage. In other words, any element with .rand3 class above will have 15 as its number. I believe this is the issue you ran into based on your comment:
Unfortunately, I didn't think about this making all matching elements
the SAME random number, which of course it does. So I ended up using
JQuery each() with standard javascript to accomplish what I wanted.
That is just the fact of life for LESS being a preprocessor of CSS. To get randomness across similar elements via LESS you would need to generate the random numbers from this mixin by a series of classes via some sort of a loop structure and apply each class of the series to the various elements to get the randomness.
According to the documentation:
JavaScript evaluation
JavaScript expressions can be evaluated as values inside .less files. We recommend using caution with this feature as the LESS will not be compilable by ports and it makes the LESS harder to maintain. If possible, try to think of a function that can be added to achieve the same purpose and ask for it on github. We have plans to allow expanding the default functions available. However, if you still want to use JavaScript in .less, this is done by wrapping the expression with back-ticks:
So this should work:
#var: `Math.random()`;