Stworzyłem gradient, który ma 11 twardych przystanków, tworząc iluzję 11 oddzielnych pól.Jak utworzyć twarde tło w SASS/SCSS?
Jak to stoi teraz, istnieje% szerokości zakodowane w gradientu liniowego. Nie mogę pomóc, ale myślę, że jest o wiele bardziej wydajny sposób niż kodowanie to jako takie (poprzez SCSS):
.color-bar {
background: linear-gradient(to left,
rgba(0, 0, 0, 0) 0%,
rgba(0, 0, 0, 0) 9.09%,
rgba(0, 0, 0, .1) 9.09%,
rgba(0, 0, 0, .1) 18.18%,
rgba(0, 0, 0, .2) 18.18%,
rgba(0, 0, 0, .2) 27.27%,
rgba(0, 0, 0, .3) 27.27%,
rgba(0, 0, 0, .3) 36.36%,
rgba(0, 0, 0, .4) 36.36%,
rgba(0, 0, 0, .4) 45.45%,
rgba(0, 0, 0, .5) 45.45%,
rgba(0, 0, 0, .5) 54.54%,
rgba(0, 0, 0, .6) 54.54%,
rgba(0, 0, 0, .6) 63.63%,
rgba(0, 0, 0, .7) 63.63%,
rgba(0, 0, 0, .7) 72.72%,
rgba(0, 0, 0, .8) 72.72%,
rgba(0, 0, 0, .8) 81.81%,
rgba(0, 0, 0, .9) 81.81%,
rgba(0, 0, 0, 1) 90.09%,
rgba(0, 0, 0, 1) 100%);
height: 50px;
width: 550px;
}
<div class="color-bar"></div>
Here's a rough Codepen in action.
Dzięki za wejście możesz zapewniać.
To znaczy, jeśli uzyskałeś pożądany rezultat, nie widzę, o co chodzi. To nie jest piękne - jasne, ale kogo to obchodzi? To jest całkowicie poprawny kod. – Chris
@Chris Przypuszczam, że jeśli OP poprosi o metodę SCSS, należy utworzyć funkcję, którą można ponownie wykorzystać, być może tam, gdzie można po prostu zmienić liczbę, aby ustawić liczbę kroków na gradiencie zamiast wykonywać własne obliczenia za każdym razem, – DaniP
@ DaniP, tak, miałoby to sens z punktu widzenia przydatności do ponownego użycia, jeśli to jest pytanie. Jeśli jednak nie, osobiście nie widzę sensu zmiany niczego, ponieważ i tak otrzymujesz css w końcu. – Chris