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 *