search

KittyGiraudel / ama

Ask me anything!
43 stars 4 forks source link

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

Closed touhid-rahman closed 6 years ago

touhid-rahman commented 6 years ago

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?

KittyGiraudel commented 6 years ago

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