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
![Curso de SASS🌈 de 0 a 100 [06.- mixin]](https://i.ytimg.com/vi/FhkP5CRdS8w/hqdefault.jpg "Curso de SASS🌈 de 0 a 100 [06.- mixin] 2")
? 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
Ave que vuela, a la cazuela.