Не слышал про css guards, но они есть в препроцессере less. По сути это условия, выполнение или невыполнение которых ведет к разным результатам. Простой пример из документации less:
.mixin(@a) when (@media = mobile) { ... }
.mixin(@a) when (@media = desktop) { ... }
Условия внутри when и есть guards. Другой пример - цикл (на самом деле в less нет циклов, но есть рекурсия, выходить из которой и помогает guard).
.
loop(@counter) when (@counter > 0) {
.loop((@counter - 1)); // next iteration
width: (10px * @counter); // code for each iteration
}