Call
608.845.2900
Visit
330 Locust Dr.
Verona, WI 53593
Message
info@powderkegwebdesign.com
Powderkeg Web Design
Menu
Message Us
Nick
Nick

Sass Function for Dynamic Equal Sized Elements

June 16, 2017

If you’ve ever wanted some Sass (SCSS) to show equal width elements regardless of how many there are, then look no further!

Imagine you want to make a menu of equal width items. The client might have 3 things, or the client might have 9 things. The end result is they still want each item to take up the same width. Obviously it won’t work very well on smaller screen with a insanely large amount of items, but this does the trick:

What you’re seeing here is a Sass function that find how many <li> elements there are and output a sibling selector (~) based off the last element to target them and give them all equal widths based on 100 / how many elements there are total. The end number in the “from 1 through 20” is just how high you want it to iterate. It basically adds for unnecessary css if you make the number a lot higher than what you feasibly would want them to actually display on the front end.

Obviously, you’ll want to take consideration for different screen sizes since a mobile device show 12 things wide won’t be the best of sights. All in all, it’s a pretty nifty end result for essentially 5 lines of css! This should work in all modern browsers.

Nick
Nick
Lead Developer

Nick is an ambitious and versatile developer with a wide range of talents. He is an efficient coder that utilizes his resources in order to achieve both his and the clients’ goals. His Alma Mater is the University of Wisconsin – Stevens Point where he graduated with honors in Web and Digital Media Development.