CSS link nested styles

Question

I need to create a lot of link styles:

  a:link {color: one;}
  a:visited {color: two;}
  a:hover {color: three;}
  a:active {color: four;}

but for a.1 - a.10

Is there any way to cut the code to more compact variant?

Thanks.

Answer 1

You can't do that with simple CSS, you may use SASS to do what you want.

Here's the SASS documentation about nesting !

You'll be able to create something like that:

.my-class-1 a, .my-class-2 a {
  :link {
    color: one;        
  }
  :visited {
    color: two;
  } 
  [...]     
}

And if you need multiple style for your class you can still nest your a like that, it's still easier to read and faster to write:

 .my-class-1 a {
  :link {
    color: one;        
  }
  :visited {
    color: two;
  } 
  [...]     
}
.my-class-2 a {
  :link {
    color: three;        
  }
  :visited {
    color: four;
  } 
  [...]     
}