1

Estoy intentando crear un mixin, el cual le paso el parámetro de la posición del pseudo-elemento. El por qué viene de que estoy intentando traducir un mixin de scss en el que en función de la posición, a la clase donde le apliques dicho mixin le pones un ::after o un ::before:

La clase en scss:

@mixin selectPosition($position: before){
    &::#{$position}{ //por defecto coge el before
        //css properties
    }
}

Y mi intento de traducción a less:

.selectPosition(@position: before){
    &::@{position}{
        //css properties
    }
}

¿Cómo sería la traducción correcta?

2
  • es correcta tu solución. Cual es el problema?
    – hawks
    Commented el 5 ago. 2020 a las 9:21
  • @hawks si lo compilo en un compilador online, me salta error...
    – Mr Robot
    Commented el 5 ago. 2020 a las 10:03

1 respuesta 1

0

Si te vas a esta herramienta online para compilar LESS a CSS verás que se compila bien.

Tienes que poner alguna propiedad para que te funcione bien.

En el apartado de LESS pones esto y le das a compilar y veras que lo hace bien.

.selectPosition(@position: before){
    &::@{position}{
        //css properties
        content: '';
    }
}

.container {
    .selectPosition();
}

EDIT

Creo que la página que has puesto no contempla bien el selector de los pseudo-elementos. Si pones : en vez de :: compila correctamente.

.selectPosition(@position: before){
  &:@{position}{  
    content: "";
  }
}

.container {
  .selectPosition();
}
4
  • Pero si lo pruebas en esta otra no: lesscss.org/less-preview
    – Mr Robot
    Commented el 5 ago. 2020 a las 10:36
  • quizá falla su implementación de less a css. Para salir de dudas mejor hazlo en tu local y así sabrás si va o no.
    – hawks
    Commented el 5 ago. 2020 a las 10:48
  • @MrRobot he actualizado mi respuesta.
    – hawks
    Commented el 5 ago. 2020 a las 10:53
  • Aún no he compilado en vscode, pero me marca error cuando concateno : con el parámetro
    – Mr Robot
    Commented el 5 ago. 2020 a las 11:34

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.