CODEWITHSUNDEEP
csssass
Johnathan Au
Johnathan Au

Reputation: 5362

How can I shorten this css with SASS?

How can I shorten this CSS snippet with SASS?

ul a{
  padding-left: 20px;
}
ul ul a{
  padding-left: 30px;
}
ul ul ul a{
  padding-left: 40px;
}
ul ul ul ul a{
  padding-left: 50px;
}

Upvotes: 2

Views: 109

Answers (3)

MMachinegun
MMachinegun

Reputation: 3074

Just for the fun of it, here an alternative way to nest: (based on @mash' answer)

=depth($level)
  padding-left: 20px + (10px * $level)

a
  ul &
    +depth(0)
    ul &
      +depth(1)
      ul &
        +depth(2)
        ul &
          +depth(3)

Upvotes: 2

Julius Delfino
Julius Delfino

Reputation: 1031

Just change the value of $count:

$count: 4;
$pad: 10px;
$ul: ul;

@for $i from 1 through $count {
  #{$ul} a {
    padding-left: $pad + (10 * $i);
  } 
  $ul: append($ul, ul)
}

Upvotes: 6

mash
mash

Reputation: 2526

It's not about making it shorter but about making it easier to maintain.

=depth($level)
  padding-left: 20px + (10px * $level)

ul
  a
    +depth(0)
  ul
    a
      +depth(1)
    ul
      a
        +depth(2)
      ul a
        +depth(3)

Upvotes: 3

Related Questions