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 18:03:06 +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

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;
}