h4ckx0r/LMSGI-2024-25
1
0
Fork 0
mirror of https://gitlab.com/tutorial-java-rafa-munoz/tutorial-java-2024-25/LMSGI-2024-25.git synced 2025-11-09 09:57:39 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(sass): added

Browse Source
This commit is contained in:
Rafa Muñoz
2025-01-27 13:50:39 +01:00
parent f189ff2f1c
commit 17d0563011
32 changed files with 842 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
Unidad_03_HTML/Flexbox/Ejercicio02_Flex_direction/index.css Normal file
View File

@@ -0,0 +1,33 @@
/* Diferentes navegadores utilizan diferentes márgenes por defecto */
body{
margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/
}
/* Contenedor principal. Tendrá Flexbox */
.container {
display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */
border: 10px solid red;
box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/
flex-direction: column-reverse;
}
/* Cada box tiene unas propiedades, son simplemente estéticas*/
.box {
color: #fff;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, .1);
padding: 10px;
}
/* Colores de cada box */
.box1 { background:#1abc9c;}
.box2 { background:#3498db;}
.box3 { background:#9b59b6;}
.box4 { background:#34495e;}
.box5 { background:#f1c40f;}
.box6 { background:#e67e22;}
.box7 { background:#e74c3c;}
.box8 { background:#bdc3c7;}
.box9 { background:#2ecc71;}
.box10 { background:#16a085;}

27
Unidad_03_HTML/Flexbox/Ejercicio02_Flex_direction/index.html Normal file
View File

@@ -0,0 +1,27 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>FlexBox Tutorial</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box9">9</div>
<div class="box box10">10</div>
</div>
</body>
</html>

35
Unidad_03_HTML/Flexbox/Ejercicio03_Flex-wrap/index.css Normal file
View File

@@ -0,0 +1,35 @@
/* Diferentes navegadores utilizan diferentes márgenes por defecto */
body{
margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/
}
/* Contenedor principal. Tendrá Flexbox */
.container {
display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */
border: 10px solid red;
box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/
flex-wrap: wrap;
min-height: 100vh;
}
/* Cada box tiene unas propiedades, son simplemente estéticas*/
.box {
color: #fff;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, .1);
padding: 0;
width: 33.33333%;
}
/* Colores de cada box */
.box1 { background:#1abc9c;}
.box2 { background:#3498db;}
.box3 { background:#9b59b6;}
.box4 { background:#34495e;}
.box5 { background:#f1c40f;}
.box6 { background:#e67e22;}
.box7 { background:#e74c3c;}
.box8 { background:#bdc3c7;}
.box9 { background:#2ecc71;}
.box10 { background:#16a085;}

27
Unidad_03_HTML/Flexbox/Ejercicio03_Flex-wrap/index.html Normal file
View File

@@ -0,0 +1,27 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>FlexBox Tutorial</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box9">9</div>
<div class="box box10">10</div>
</div>
</body>
</html>

33
Unidad_03_HTML/Flexbox/Ejercicio04_Flex-ordering/index.css Normal file
View File

@@ -0,0 +1,33 @@
/* Diferentes navegadores utilizan diferentes márgenes por defecto */
body{
margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/
}
/* Contenedor principal. Tendrá Flexbox */
.container {
display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */
border: 10px solid red;
box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/
}
/* Cada box tiene unas propiedades, son simplemente estéticas*/
.box {
color: #fff;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0, 0, 0, .1);
padding: 0;
flex: 1;
}
/* Colores de cada box */
.box1 { background:#1abc9c;}
.box2 { background:#3498db;}
.box3 { background:#9b59b6;}
.box4 { background:#34495e;}
.box5 { background:#f1c40f; order: -1;}
.box6 { background:#e67e22; order: 10;}
.box7 { background:#e74c3c;}
.box8 { background:#bdc3c7;}
.box9 { background:#2ecc71;}
.box10 { background:#16a085;}

27
Unidad_03_HTML/Flexbox/Ejercicio04_Flex-ordering/index.html Normal file
View File

@@ -0,0 +1,27 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>FlexBox Tutorial</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box9">9</div>
<div class="box box10">10</div>
</div>
</body>
</html>

35
Unidad_03_HTML/Flexbox/Ejercicio05_Alignment-and-center/index.css Normal file
View File

@@ -0,0 +1,35 @@
/* Diferentes navegadores utilizan diferentes márgenes por defecto */
body{
margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/
}
/* Contenedor principal. Tendrá Flexbox */
.container {
display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */
border: 10px solid red;
box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/
min-height: 100vh;
flex-direction: column;
justify-content: space-between;
}
/* Cada box tiene unas propiedades, son simplemente estéticas*/
.box {
color: #fff;
font-size: 10px;
text-align: center;
padding: 10px;
text-shadow:4px 4px 0 rgba(0,0,0,0.1);
}
/* Colores de cada box */
.box1 { background:#1abc9c;}
.box2 { background:#3498db;}
.box3 { background:#9b59b6;}
.box4 { background:#34495e;}
.box5 { background:#f1c40f;}
.box6 { background:#e67e22;}
.box7 { background:#e74c3c;}
.box8 { background:#bdc3c7;}
.box9 { background:#2ecc71;}
.box10 { background:#16a085;}

27
Unidad_03_HTML/Flexbox/Ejercicio05_Alignment-and-center/index.html Normal file
View File

@@ -0,0 +1,27 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>FlexBox Tutorial</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box9">9</div>
<div class="box box10">10</div>
</div>
</body>
</html>

40
Unidad_03_HTML/Flexbox/Ejercicio06_Align-items/index.css Normal file
View File

@@ -0,0 +1,40 @@
/* Diferentes navegadores utilizan diferentes márgenes por defecto */
body{
margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/
}
/* Contenedor principal. Tendrá Flexbox */
.container {
display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */
border: 10px solid red;
box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/
min-height: 100vh;
align-items: baseline;
}
/* Cada box tiene unas propiedades, son simplemente estéticas*/
.box {
color: #fff;
font-size: 100px;
text-align: center;
padding: 10px;
text-shadow:4px 4px 0 rgba(0,0,0,0.1);
}
/* Colores de cada box */
.box1 { background:#1abc9c;}
.box2 { background:#3498db;}
.box3 { background:#9b59b6;}
.box4 { background:#34495e;}
.box5 { background:#f1c40f;}
.box6 { background:#e67e22;}
.box7 { background:#e74c3c;}
.box8 { background:#bdc3c7;}
.box9 { background:#2ecc71;}
.box10 { background:#16a085;}
.box1 { font-size: 30px; }
.box3 { font-size: 130px; }
.box4 { font-size: 200px; }
.box5 { font-size: 10px; }
.box10 { font-size: 90px; }

27
Unidad_03_HTML/Flexbox/Ejercicio06_Align-items/index.html Normal file
View File

@@ -0,0 +1,27 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>FlexBox Tutorial</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box9">9</div>
<div class="box box10">10</div>
</div>
</body>
</html>

38
Unidad_03_HTML/Flexbox/Ejercicio07_Align-content/index.css Normal file
View File

@@ -0,0 +1,38 @@
/* Diferentes navegadores utilizan diferentes márgenes por defecto */
body{
margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/
}
/* Contenedor principal. Tendrá Flexbox */
.container {
display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */
border: 10px solid red;
box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/
min-height: 100vh;
align-content: center;
justify-content: center;
flex-wrap: wrap;
}
/* Cada box tiene unas propiedades, son simplemente estéticas*/
.box {
color: #fff;
font-size: 100px;
text-align: center;
padding: 0px;
text-shadow:4px 4px 0 rgba(0,0,0,0.1);
width: 33.33333%;
}
/* Colores de cada box */
.box1 { background:#1abc9c;}
.box2 { background:#3498db;}
.box3 { background:#9b59b6;}
.box4 { background:#34495e;}
.box5 { background:#f1c40f;}
.box6 { background:#e67e22;}
.box7 { background:#e74c3c;}
.box8 { background:#bdc3c7;}
.box9 { background:#2ecc71;}
.box10 { background:#16a085;}

27
Unidad_03_HTML/Flexbox/Ejercicio07_Align-content/index.html Normal file
View File

@@ -0,0 +1,27 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>FlexBox Tutorial</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box9">9</div>
<div class="box box10">10</div>
</div>
</body>
</html>

51
Unidad_03_HTML/Flexbox/Ejercicio08_Align-self/index.css Normal file
View File

@@ -0,0 +1,51 @@
/* Diferentes navegadores utilizan diferentes márgenes por defecto */
body{
margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/
}
/* Contenedor principal. Tendrá Flexbox */
.container {
display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */
border: 10px solid red;
box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/
min-height: 100vh;
align-items: flex-start;
}
/* Cada box tiene unas propiedades, son simplemente estéticas*/
.box {
color: #fff;
font-size: 100px;
text-align: center;
padding: 0px;
text-shadow:4px 4px 0 rgba(0,0,0,0.1);
flex: 1;
}
/* Colores de cada box */
.box1 { background:#1abc9c;}
.box2 { background:#3498db;}
.box3 { background:#9b59b6;}
.box4 { background:#34495e;}
.box5 { background:#f1c40f;}
.box6 { background:#e67e22;}
.box7 { background:#e74c3c;}
.box8 { background:#bdc3c7;}
.box9 { background:#2ecc71;}
.box10 { background:#16a085;}
.box2 {
padding-bottom: 200px;
align-self: stretch;
}
.box6 {
padding-bottom: 0;
align-self: center;
}
.box9 {
padding-bottom: 50px;
align-self: flex-end;
}

27
Unidad_03_HTML/Flexbox/Ejercicio08_Align-self/index.html Normal file
View File

@@ -0,0 +1,27 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>FlexBox Tutorial</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box box1">1</div>
<div class="box box2">2</div>
<div class="box box3">3</div>
<div class="box box4">4</div>
<div class="box box5">5</div>
<div class="box box6">6</div>
<div class="box box7">7</div>
<div class="box box8">8</div>
<div class="box box9">9</div>
<div class="box box10">10</div>
</div>
</body>
</html>

37
Unidad_03_HTML/Flexbox/Ejercicio09_Flex-property/index.css Normal file
View File

@@ -0,0 +1,37 @@
/* Diferentes navegadores utilizan diferentes márgenes por defecto */
body{
margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/
}
/* Contenedor principal. Tendrá Flexbox */
.container {
display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */
box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/
align-items: flex-start;
}
/* Cada box tiene unas propiedades, son simplemente estéticas*/
.box {
color: #fff;
font-size: 50px;
text-align: center;
padding: 0px;
text-shadow:4px 4px 0 rgba(0,0,0,0.1);
flex: 1;
line-height: 100px;
}
/* Colores de cada box */
.box1 { background:#1abc9c;}
.box2 { background:#3498db;}
.box3 { background:#9b59b6;}
.box4 { background:#34495e;}
.box5 { background:#f1c40f;}
.box6 { background:#e67e22;}
.box7 { background:#e74c3c;}
.box8 { background:#bdc3c7;}
.box9 { background:#2ecc71;}
.box10 { background:#16a085;}
.box2 { flex-grow: 2;}
.box5 { flex-grow: 3;}

23
Unidad_03_HTML/Flexbox/Ejercicio09_Flex-property/index.html Normal file
View File

@@ -0,0 +1,23 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>FlexBox Tutorial</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box box1">Uno &#129409;</div>
<div class="box box2">Dos &#128540;</div>
<div class="box box3">Tres &#128564;</div>
<div class="box box4">Cuatro &#9969;</div>
<div class="box box5">Cinco &#127829;</div>
<div class="box box6">Seis &#127808;</div>
</div>
</body>
</html>

40
Unidad_03_HTML/Flexbox/Ejercicio10_More-flex-property/index.css Normal file
View File

@@ -0,0 +1,40 @@
/* Diferentes navegadores utilizan diferentes márgenes por defecto */
body{
margin:0; /* Igualo los márgenes por defecto de cualquier navegador*/
}
/* Contenedor principal. Tendrá Flexbox */
.container {
display: flex; /* flex es igual a inline-flex. Los elementos dentro de un flex son flex-items */
box-sizing: border-box; /* Unifica en un único valor de cada div los siguientes: margin, padding y border*/
flex-direction: column;
flex-wrap: wrap;
border: 10px solid red;
height: 100vh;
}
/* Cada box tiene unas propiedades, son simplemente estéticas*/
.box {
color: #fff;
font-size: 50px;
text-align: center;
padding: 0px;
text-shadow:4px 4px 0 rgba(0,0,0,0.1);
flex-basis: 250px;
}
/* Colores de cada box */
.box1 { background:#1abc9c;}
.box2 { background:#3498db;}
.box3 { background:#9b59b6;}
.box4 { background:#34495e;}
.box5 { background:#f1c40f;}
.box6 { background:#e67e22;}
.box7 { background:#e74c3c;}
.box8 { background:#bdc3c7;}
.box9 { background:#2ecc71;}
.box10 { background:#16a085;}
.box3 {flex-grow: 5;}
.box4 {flex-basis: 100px;}
.box5, .box6 { flex-grow: 6;}

23
Unidad_03_HTML/Flexbox/Ejercicio10_More-flex-property/index.html Normal file
View File

@@ -0,0 +1,23 @@
<!doctype html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>FlexBox Tutorial</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<div class="box box1">Uno &#129409;</div>
<div class="box box2">Dos &#128540;</div>
<div class="box box3">Tres &#128564;</div>
<div class="box box4">Cuatro &#9969;</div>
<div class="box box5">Cinco &#127829;</div>
<div class="box box6">Seis &#127808;</div>
</div>
</body>
</html>

77
Unidad_03_HTML/Flexbox/Ejercicio11_Flexbox-nav/index.css Normal file
View File

@@ -0,0 +1,77 @@
/* Some CSS Setup - nothing to do with flexbox */
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: sans-serif;
margin: 0;
background: #3494E6;
background: linear-gradient(to right, #EC6EAD, #3494E6);
}
a {
color:white;
font-weight: 100;
letter-spacing: 2px;
text-decoration: none;
background:rgba(0,0,0,0.2);
padding:20px 5px;
display: inline-block;
width: 100%;
text-align: center;
transition:all 0.5s;
}
a:hover {
background:rgba(0,0,0,0.5);
}
.wrapper {
max-width: 1000px;
margin: 0 auto;
padding:50px;
}
/* Flex Container */
.flex-nav ul {
border: 1px solid black;
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.flex-nav li {
flex: 3;
}
.flex-nav .social {
flex: 1;
}
@media all and (max-width:1000px) {
.flex-nav ul {
flex-wrap: wrap;
}
.flex-nav li {
flex: 1 1 50%;
}
.flex-nav .social {
flex: 1 1 25%;
}
}
@media all and (max-width:500px) {
.flex-nav li {
flex-basis: 100%;
}
}

35
Unidad_03_HTML/Flexbox/Ejercicio11_Flexbox-nav/index.html Normal file
View File

@@ -0,0 +1,35 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>FlexBox Nav</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="wrapper">
<nav class="flex-nav">
<ul>
<li><a href="#">Item 01</a></li>
<li><a href="#">Item 02</a></li>
<li><a href="#">Item 03</a></li>
<li><a href="#">Item 04</a></li>
<li><a href="#">Item 05</a></li>
<li><a href="#">Item 06</a></li>
<li class="social">
<a href="https://twitter.com"><i class="fa fa-twitter"></i></a>
</li>
<li class="social">
<a href="https://facebook.com"><i class="fa fa-facebook"></i></a>
</li>
<li class="social">
<a href="https://github.com"><i class="fa fa-github"></i></a>
</li>
<li class="social">
<a href="https://www.instagram.com"><i class="fa fa-instagram"></i></a>
</li>
</ul>
</nav>
</div>
</body>
</html>

13
Unidad_03_HTML/SASS/01_variables/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="index.css">
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
<div id="container">This is some text inside a container.</div>
</body>
</html>

14
Unidad_03_HTML/SASS/01_variables/index.scss Normal file
View File

@@ -0,0 +1,14 @@
$myFont: Helvetica, sans-serif;
$myColor: yellow;
$myFontSize: 18px;
$myWidth: 680px;
body {
font-family: $myFont;
font-size: $myFontSize;
color: $myColor;
}
#container {
width: $myWidth;
}

15
Unidad_03_HTML/SASS/02_anidados/index.html Normal file
View File

@@ -0,0 +1,15 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="index.css">
<body>
<nav>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">SASS</a></li>
</ul>
</nav>
</body>
</html>

15
Unidad_03_HTML/SASS/02_anidados/index.scss Normal file
View File

@@ -0,0 +1,15 @@
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}
li {
display: inline-block;
}
a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

17
Unidad_03_HTML/SASS/03_import/index.html Normal file
View File

@@ -0,0 +1,17 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="index.css">
<body>
<h1>Hello World</h1>
<p>This is a paragraph.</p>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">SASS</a></li>
</ul>
</body>
</html>

7
Unidad_03_HTML/SASS/03_import/index.scss Normal file
View File

@@ -0,0 +1,7 @@
@import "reset";
body {
font-family: Helvetica, sans-serif;
font-size: 18px;
color: red;
}

7
Unidad_03_HTML/SASS/03_import/reset.scss Normal file
View File

@@ -0,0 +1,7 @@
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}

11
Unidad_03_HTML/SASS/04_mixin/index.html Normal file
View File

@@ -0,0 +1,11 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="index.css">
<body>
<h1>Hello World</h1>
<p class="danger">Warning! This is some text.</p>
</body>
</html>

11
Unidad_03_HTML/SASS/04_mixin/index.scss Normal file
View File

@@ -0,0 +1,11 @@
@mixin important-text {
color: red;
font-size: 25px;
font-weight: bold;
border: 1px solid blue;
}
.danger {
@include important-text;
background-color: green;
}

13
Unidad_03_HTML/SASS/05_mixin_with_params/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="index.css">
<body>
<h1>Hello World</h1>
<p class="myArticle">This is some text in my article.</p>
<p class="myNotes">This is some text in my notes.</p>
</body>
</html>

12
Unidad_03_HTML/SASS/05_mixin_with_params/index.scss Normal file
View File

@@ -0,0 +1,12 @@
/* Define mixin with two arguments */
@mixin bordered($color, $width) {
border: $width solid $color;
}
.myArticle {
@include bordered(blue, 1px); // Call mixin with two values
}
.myNotes {
@include bordered(red, 2px); // Call mixin with two values
}

18
Unidad_03_HTML/SASS/06_extends/index.scss Normal file
View File

@@ -0,0 +1,18 @@
.button-basic {
border: none;
padding: 15px 30px;
text-align: center;
font-size: 16px;
cursor: pointer;
}
.button-report {
@extend .button-basic;
background-color: red;
}
.button-submit {
@extend .button-basic;
background-color: green;
color: white;
}