Mixin es una de las mejores características de SASS, que funciona como una función. Puede crear mixins para propiedades CSS repetidas y luego incluir esos mixins usando @include en su clase CSS.
Acercarse:
- Creamos un mixin, estamos usando @content que nos permite inyectar todo el bloque de código CSS dentro del mixin, ese bloque reemplaza @content dentro del mixin.
- Usamos &(SASS Ampersand) , siempre lo reemplaza por el selector de CSS principal y reduce el nivel de anidamiento en 1.
- El mixin está listo para usar en este momento, usándolo dentro de «input» para configurar marcadores de posición de «input». Usamos @include para incluir mixin seguido del contenido que queremos pasar en nuestro mixin. Entonces, pasamos el bloque de código CSS que tiene las propiedades «font-family», «font-size» y «color» definidas para el marcador de posición.
- Durante el procesamiento de nuestro archivo «.scss» , @include se reemplaza por el código mixin, @content se reemplaza por el bloque de código CSS que se pasa, y se reemplaza por el selector principal cada vez que se ingresa obteniendo el archivo CSS deseado con reemplazo de código .
Archivo SASS: el siguiente fragmento de código demuestra el archivo SASS con la extensión «.scss».
@mixin placeholder
{
&::-webkit-input-placeholder {@content}
&:-moz-placeholder {@content}
&::-moz-placeholder {@content}
&:-ms-input-placeholder {@content}
}
input {
@include placeholder {
font-family: robota;
font-size: 20px;
color: red;
font-style: italic;
}
}
Coloque el código SASS anterior en el archivo «style.scss» y use el siguiente comando para crear el archivo «style.css» a partir del archivo SASS. El comando solo funcionará si tiene SASS instalado en su sistema. Puede descargarlo desde el sitio web oficial de SASS.
sass style.scss style.css
Esto creará el archivo «style.css» en su directorio de trabajo. El directorio de trabajo contendrá archivos que son «index.html», «style.scss» y «style.css».
Código CSS: el siguiente código es el resultado del archivo SASS anterior que, cuando se ejecuta, se convierte en el archivo «style.css».
input::-webkit-input-placeholder {
font-family: robota;
font-size: 20px;
color: red;
font-style: italic;
}
input:-moz-placeholder {
font-family: robota;
font-size: 20px;
color: red;
font-style: italic;
}
input::-moz-placeholder {
font-family: robota;
font-size: 20px;
color: red;
font-style: italic;
}
input:-ms-input-placeholder {
font-family: robota;
font-size: 20px;
color: red;
font-style: italic;
}
Código HTML: El siguiente código muestra el archivo “index.html”.
<!DOCTYPE html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <style></style> <label for="1">Name</label> <input type="text" placeholder="Name" id="1"/> <label for="2">Email</label> <input type="text" placeholder="Email" id="2"/> <label for="3">Password</label> <input type="text" placeholder="Password" /> </body> </html>
Producción:
Publicación traducida automáticamente
Artículo escrito por priyankrastogi y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA