KittyGiraudel/ama

How can I remove margin-bottom from last row of my Mixin?

Closed this issue · 1 comments

https://codepen.io/touhid_rahman/pen/YYpxqx

I have developed a fluid column grid using SASS. For example, +columns(6) divides all elements in 6 equal width columns.

The problem is, I don't want margin-bottom for last row of elements. How can I remove this margin-bottom?

Hello.

You can use this technique to target the last row of a grid layout. It outputs quite a verbose selector but it does what you want.

+.column:nth-child(#{$column_number}n + 1):nth-last-child(-n + #{$column_number}),
+.column:nth-child(#{$column_number}n + 1):nth-last-child(-n + #{$column_number}) ~ .column 
+  margin-bottom: 0