SASS | Selectores de marcador de posición

El marcador de posición es otro tipo especial de selector. Se usa cuando está escribiendo su propia biblioteca SASS. Su funcionamiento es muy similar al de mixin sin argumentos.

El selector de marcador de posición comienza con un signo de %.

Sintaxis:

%( name_of_selector ) { property: value; ... }

Los selectores de marcador de posición están excluidos en la compilación del archivo SASS (Esto define la funcionalidad principal del mismo. Consulte el ‘Uso del selector de marcador de posición’ a continuación). Entonces la pregunta es: ¿Cómo usarlo?

Para usar el selector de marcador de posición, usamos la regla @extend at.

Sintaxis:

@extend %( name_of_selector );

Ejemplo:

Archivo SASS:

%button-format {
    padding: 10px 20px;
    border-radius: 15px;
    color: black;
}

.toolbar-button {
    @extend %button-format;
    background-color: lightpink;

    &:hover {
        background-color: rgb(155, 106, 114);
    }
}

.status-bar-button {
    @extend %button-format;
    background-color: lightblue;

    &:hover {
        background-color: blue;
    }
}

Archivo CSS compilado:

.status-bar-button, .toolbar-button {
    padding: 10px 20px;
    border-radius: 15px;
    color: black;
  }
  
  .toolbar-button {
    background-color: lightpink;
  }
  .toolbar-button:hover {
    background-color: #9b6a72;
  }
  
  .status-bar-button {
    background-color: lightblue;
  }
  .status-bar-button:hover {
    background-color: blue;
  }

Uso del selector de marcador de posición:
el selector de marcador de posición se excluye en la compilación del archivo SASS, por lo tanto, se usa para crear la biblioteca SASS. Podemos predefinir algunas plantillas usándolo y luego podemos usarlo mediante @extend at-rule cuando queramos, como se muestra en el ejemplo anterior.