Hoje em dia tanto se fala em não reinventar a roda, mas pouco se aproveita deste conceito.

Como fazer para reaproveitar códigos e agilizar seus trabalhos?

Não é uma tarefa simples, porém pode ser feito com um pouco de estratégia e organização. Você não deve pegar, por exemplo, uma página inteira e querer reaproveitá-la, não é isto, você deve sempre criar pedaços de códigos que serão reutilizados.

Mas como e fiz isso no CSS?

Simplismente crie um molde css com class pre-definidas e apenas substituo os codigos das cores.

Esse é o molde que faz todo a magica, são gerados 20 temas e 200 variações.

.bg {
background-color: {base} !important; }

.bg-text {
color: {base} !important; }

.bg.lighten-5 {
background-color: {lighten-5} !important; }

.bg-text.text-lighten-5 {
color: {lighten-5} !important; }

.bg.lighten-4 {
background-color: {lighten-4} !important; }

.bg-text.text-lighten-4 {
color: {lighten-4} !important; }

.bg.lighten-3 {
background-color: {lighten-3} !important; }

.bg-text.text-lighten-3 {
color: {lighten-3} !important; }

.bg.lighten-2 {
background-color: {lighten-2} !important; }

.bg-text.text-lighten-2 {
color: {lighten-2} !important; }

.bg.lighten-1 {
background-color: {lighten-1} !important; }

.bg-text.text-lighten-1 {
color: {lighten-1} !important; }

.bg.darken-1 {
background-color: {darken-1} !important; }

.bg-text.text-darken-1 {
color: {darken-1} !important; }

.bg.darken-2 {
background-color: {darken-2} !important; }

.bg-text.text-darken-2 {
color: {darken-2} !important; }

.bg.darken-3 {
background-color: {darken-3} !important; }

.bg-text.text-darken-3 {
color: {darken-3} !important; }

.bg.darken-4 {
background-color: {darken-4} !important; }

.bg-text.text-darken-4 {
color: {darken-4} !important; }

.main_header nav li:hover,
.main_header nav li a:hover {
color: {darken-2} !important;
background-color: {lighten-4} !important;
}