I am trying to create 50 background images for a set of windows using less.
These image paths are exactly the same format, but the number just increments by 1 for each window.
Currently I have the following code:
window-1{
background-image: url('/content/images/background-1-window.png')
}
window-2{
background-image: url('/content/images/background-2-window.png')
}
..
window-50{
background-image: url('/content/images/background-50-window.png')
}
What I want to achieve is to effectively have variables replacing the numbers using less, is it possible to do this using variables and or mixins?
Something like:
window-#window-number{
Background-image: url('/content/images/background-#window-number-window.png')
}
Is it at all possible to do something like this?
Yes, it is possible, see this answer https://stackoverflow.com/a/15982103/1596547 and https://github.com/twbs/bootstrap/issues/10990 for some example code:
In your case:
.setbackgroundimage(#index) when (#index > 0)
{
window-#{index}
{
background-image: url('/content/images/background-#{index}-window.png');
}
.setbackgroundimage(#index - 1);
}
.setbackgroundimage(50);
Related
I'm using this method to hide the decimal numbers in a page.
CSS code:
span {
clip-path: inset(0 2.1ch 0 0);
}
HTML code:
<span>$91,118.91</span>
The result should look like this: $91,118
The problem: Not all numbers have the same size for width (e.g. number 1 and 9)
Is there anyway to go around this? or I'm doing it the wrong way?
You can use JS, there are a lot of ways to do it...
const n = document.getElementsByTagName('span');
Array.from(n).forEach(v => v.innerText = v.innerText.split('.')[0]);
<span>$71,558.84</span>
I'm trying the following statement in LESS, but its giving me an error:
(~".table-column[width='#{size}']") {
// do something
}
----------
ERROR :
----------
*ParseError: Missing closing ')'*
I'm using lessc 2.5.3, with nodejs on windows.
LESS is new to me and any pointers would be helpful.
Thanks
No need for the parens, nor the string quotes, nor the ~ (unless you are trying to use a ~ sibling selector). Observe the following...
#size: 40px;
.table-column[width='#{size}'] {
background-color: tomato;
}
// -- conversion
.table-column[width='40px'] {
background-color: tomato;
}
Codepen link - working demo
Also check out the LESS variables docs - specifically, variable interpolation, for more information.
I have a sass function which returns a random url from a given set of urls as follows:
#function randomUrl(){
$images: (
"/images/watermarks/area-watermark.png",
"/images/watermarks/bar-watermark.png",
"/images/watermarks/line-watermark.png",
$img: nth($images, random(length($images)));
#return $img;
}
and i am assigning it to a class as follows:
.myClass{
background-image: url(randomUrl());
}
What i want now is to get a random image FOR EACH class instance, i.e, if i have 10 divs with class "myClass" in my HTML, i want the background images of each div to be different. My approach till now just gives me one random image which appears in all the divs everytime i compile.
The random() function does exactly what it sounds like: it generates a random number between 2 specified numbers. There is no guarantee that the numbers will be different each time the function is called because that's not how random works.
What you need is a way to shuffle your list, but there is no such function to do that in the Sass standard library. There are a couple of 3rd party libraries that do:
https://github.com/at-import/SassyLists (sl-shuffle)
https://github.com/mknadler/randomize.scss (shuffle)
The implementation in both libraries is nearly identical (this one was lifted from randomize.scss):
#function shuffle($list) {
$list-length: length($list);
#while($list-length > 0) {
$rand: random($list-length);
$temp: nth($list, $rand);
$list: set-nth($list, $rand, nth($list, $list-length));
$list: set-nth($list, $list-length, $temp);
$list-length: $list-length - 1;
}
#return $list;
}
If you're intentionally avoiding iterating over a list, you could use it like this:
#import "SassyLists";
$last-pos: 0;
$images: sl-shuffle(
"/images/watermarks/area-watermark.png"
"/images/watermarks/bar-watermark.png"
"/images/watermarks/line-watermark.png");
#function randomUrl(){
$last-pos: if($last-pos == length($images), 1, $last-pos + 1) !global;
#return nth($images, $last-pos);
}
.myClass {
background-image: url(randomUrl());
}
.myClass {
background-image: url(randomUrl());
}
.myClass {
background-image: url(randomUrl());
}
Output:
.myClass {
background-image: url("/images/watermarks/line-watermark.png");
}
.myClass {
background-image: url("/images/watermarks/area-watermark.png");
}
.myClass {
background-image: url("/images/watermarks/bar-watermark.png");
}
Though I recommend just using iteration instead and cut out the use of the function all together:
#import "SassyLists";
$images: sl-shuffle(
"/images/watermarks/area-watermark.png"
"/images/watermarks/bar-watermark.png"
"/images/watermarks/line-watermark.png");
#for $i from 1 through length($images) {
.myClass-#{$i} {
background-image: url(nth($images, $i));
}
}
http://sassmeister.com/gist/d0c65d02be52aa31f836
I'm trying to create a mixin that'll take two parameters and output sizing in px and rem. This is the code:
.sizing (#cssProperty; #sizeValue) {
#cssProperty: ((#sizeValue * #basefont) * 1px);
#cssProperty: (#sizeValue * 1rem);
}
Usage would be like:
h2 {
.sizing(font-size; 1)
}
Which should output (depending on what basefont size is defined):
h2 {
font-size: 12px;
font-size: 1rem;
}
But simpLESS won't compile it, and says there's an error in these two lines:
.sizing (#cssProperty; #sizeValue) {
.sizing(font-size; 1);
What am I doing wrong? Is it because of the variable property names?
Just noticed that you are trying to use variables as property names instead values which is not supported by less.
There is a hack highlighted in this answer as workaround:
How to pass a property name as an argument to a mixin in less
.mixin(#prop, #value) {
Ignore: ~"a;#{prop}:#{value}";
}
LESS does not allow to use a variable as a CSS property name.
In your code above #cssProperty: ((#sizeValue * #basefont) * 1px); is actually a definition of the new #cssProperty variable and not a CSS property: value statement, hence it produces no CSS output.
There's a workaround for what you want to achieve though, see 14868042, 18558368 etc...
I have a webpage with 6 small images and 1 big images in the center (which is really 6 layers, each contains 1 images), just like this: http://jsbin.com/onujiq/1/; I've set the z-index property of all center images to (-1). What I'm trying to do is when I hover over 1 of the 6 small images, the respectively image will appear as the big images in the center (by change the respectively center image's z-index to 5 - for example) ; but no matter how I try, It's doesn't work as what I want. Please help me with this (I only use CSS); thank you in advance !
PS: another confusing problem when i test about hover is when I use this code:
#img3:hover + #img4{
opacity: 0.2;
}
it does work, but when i use this:
#img3:hover + #img5{
opacity: 0.2;
}
it doesn't ! I still dont' know what is the big different between #img4 & #img5 ??
http://jsfiddle.net/yy9Rr/
Your solution was close, but you need to change it from
#img3:hover + #img4{
opacity: 0.2;
}
to use the ~, to give something like
#img3:hover ~ #imgCenter3 {
z-index: 10;
}
a + b says any b element immediately following element a
a ~ b says any b element that is a following sibling of a, not necessarily immediately adjacent.
Try using JavaScript:
document.getElementById("img3").onmouseover = function() {
document.getElementById("img4").style.opacity = ".2";
document.getElementById("img5").style.opacity = ".2";
}