sass 6

Curso de SASS🌈 de 0 a 100 [06.- mixin]

En este tutorial vamos a aprender a implementar mixin en sass pero ami me gusta definir a mixin como funciones.
Codigo: https://github.com/programadornovato/sass/commit/e45d0a4e65c5f7ba4ef48f1fc1299a1c3915a011

//index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="rutaCss/estilo.css">
    <title>Document</title>
</head>
<body>
    <div id="rec1"></div>
    <div id="rec2"></div>
    <div id="rec3"></div>
</body>
</html>




//rutaSass/_mixin.scss
@mixin forma($color:#111,$ancho:100px,$alto:100px) {
    background-color:$color;
    width: $ancho;
    height: $alto;
}
#rec1{
    @include forma(red,300px,50px);
}
#rec2{
    @include forma(#aaa,400px,20px);
}
#rec3{
    @include forma(green,100px,50px);
}





//rutaSass/estilo.scss
// Importamos las variables de los colores
//@import "colores";
// Importamos lala estructura
//@import "estructura";
@import "mixin";
/*
este comentario si pasa
*/

? Visual Studio Code Review: https://www.youtube.com/watch?v=VEySgnoG2k4
? Live Server: https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer
? Pagina oficial: https://sass-lang.com/
? Visual Studio Code Review: https://www.youtube.com/watch?v=VEySgnoG2k4

? Facebook: https://facebook.com/ProgramadorNovatoOficial
? Twitter: https://twitter.com/programadornova
? Linkedin: https://www.linkedin.com/in/programadornovato/
? Instagram: https://www.instagram.com/programadornovato/

Codigos en gdrive: https://drive.google.com/file/d/15i6j231DHduFTUHQKillgATNWKGDUiGw/view?usp=sharing
? Esta lista de reproducción: https://www.youtube.com/playlist?list=PLCTD_CpMeEKQXywJB8KMN_-GccZuVf9ag
Gracias por apoyar este canal: https://www.patreon.com/programadornovato?fan_landing=true

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Información básica sobre protección de datos Ver más

  • Responsable: Eugenio Chaparro.
  • Finalidad:  Moderar los comentarios.
  • Legitimación:  Por consentimiento del interesado.
  • Destinatarios y encargados de tratamiento:  No se ceden o comunican datos a terceros para prestar este servicio. El Titular ha contratado los servicios de alojamiento web a digitalocean.com que actúa como encargado de tratamiento.
  • Derechos: Acceder, rectificar y suprimir los datos.
  • Información Adicional: Puede consultar la información detallada en la Política de Privacidad.

Esta web utiliza cookies propias y de terceros para su correcto funcionamiento y para fines analíticos y para mostrarte publicidad relacionada con sus preferencias en base a un perfil elaborado a partir de tus hábitos de navegación. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad