3

Quiero pasar este CSS a LESS, ¿Cómo quedaría en LESS?

.Item {
  box-sizing: content-box;
  display: inline-block;
  width: 259px;
  margin-right: 2em;
  margin-bottom: 40px;
}
.Item-name {
  margin-bottom: 0;
  margin-top: 0;
  height: 45px;  
  display: -o-inline-box;
}
.Item-price {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.12em;      
}
1
  • Ya es .less válido :) Commented el 21 ene. 2016 a las 22:51

2 respuestas 2

6

En less seria así:

.Item {
    box-sizing: content-box;
    display: inline-block;
    width: 259px;
    margin-right: 2em;
    margin-bottom: 40px;
    &-name {
        margin-bottom: 0;
        margin-top: 0;
        height: 45px;  
        display: -o-inline-box;
    }
    &-price {
        font-family: 'Ubuntu', sans-serif;
        font-size: 1.12em; 
    }
}
2
  • 2
    Por curiosidad, ¿hay alguna ventaja por tener anidados así los estilos? Supongo que da sensación de estructura pero, personalmente, a mí me resultan más difíciles de leer
    – Alvaro Montoro
    Commented el 22 ene. 2016 a las 0:25
  • @AlvaroMontoro igual esto le ayude -> michelletorres.mx/ventajas-del-uso-de-less en el apartado Anidado: .Saludos Commented el 22 ene. 2016 a las 19:50
2

Ya que LESS es un superconjunto de CSS es decir la sintaxis de CSS es válida en LESS

Tu código

.Item {
  box-sizing: content-box;
  display: inline-block;
  width: 259px;
  margin-right: 2em;
  margin-bottom: 40px;
}
.Item-name {
  margin-bottom: 0;
  margin-top: 0;
  height: 45px;  
  display: -o-inline-box;
}
.Item-price {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.12em;      
}

Quedaría así en LESS

.Item {
  box-sizing: content-box;
  display: inline-block;
  width: 259px;
  margin-right: 2em;
  margin-bottom: 40px;
}
.Item-name {
  margin-bottom: 0;
  margin-top: 0;
  height: 45px;  
  display: -o-inline-box;
}
.Item-price {
  font-family: 'Ubuntu', sans-serif;
  font-size: 1.12em;      
}

Es decir no requiere modificación alguna. =)

Ahora bien si lo que quieres es aprovechar las ventajes de LESS frente a CSS puedes hacerlo como la respuesta de Daniel Hernández

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.