Clase 11 - Media Queries y Saas
Clase 11 - Media Queries y Saas
Clase 11 - Media Queries y Saas
En este caso, los estilos que estén dentro de esta media query se aplicarán solo
a partir del tamaño en píxeles indicado. Además del tamaño mínimo, también
podemos indicar el tamaño máximo o el rango de tamaño en el que se
aplicarán los estilos, de la forma:
// Small devices (landscape phones, 576px and up) // Extra small devices (sm) (portrait phones, less than
@media (min-width: 576px) { ... } 576px)
@media (max-width: 575.98px) { ... }
// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... } // Small devices (md) (landscape phones, less than 768px)
@media (max-width: 767.98px) { ... }
// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... } // // Medium devices (lg) (tablets, less than 992px)
@media (max-width: 991.98px) { ... }
// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... } // Large devices (xl) (desktops, less than 1200px)
@media (max-width: 1199.98px) { ... }
// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... } // XX-Large devices (xxl) (desktops, less than 1400px)
@media (max-width: 1399.98px) { ... }
Media queries
Si por ejemplo queremos que en las pantallas extra pequeñas (md) el color de
fondo que aplica la clase .miestilo sea rojo y para el resto de tamaños sea
verde, podríamos hacer:
.miestilo {
background-color: green;
}
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Ocultando elementos
Para ocultar elementos, simplemente se debe usar la clase .d-none o una de
las clases .d-{sm,md,lg,xl,xxl}-none para cualquier variación de pantalla.
Sintaxis SCSS: Es una sintaxis bastante similar a la sintaxis del propio CSS.
Podríamos decir que SCSS es código CSS con algunas cosas extras.
Introducción a SASS
En la práctica, aunque podría ser más rápido escribir con sintaxis Sass, es
menos recomendable, porque te aleja más del propio lenguaje CSS.
Los archivos SASS se identifican con la extensión .sass mientras que los
SCSS con la extensión .scss
SCSS CSS
$brand: #F98355; body {
body { color: #F98355;
color:$brand; }
}
Nesting (Anidación)
SASS nos ayuda a simplificar haciendo uso del nesting o anidación.
Conseguimos escribir menos, con la indentación del código CSS podemos
reflejar mejor la jerarquía.
SCSS CSS
nav { nav ul {
ul { margin: 0;
margin: 0; padding: 0;
padding: 0; list-style: none;
list-style: none; }
} nav li {
li { display: inline-block; } display: inline-block;
} }
Nesting (Anidación)
Además, podemos referenciar fácilmente los padres de la etiqueta
haciendo uso del selector “&”.
SCSS CSS
nav { nav li {
li { display: inline-block;
display: inline-block; }
&:hover {
background-color: red; nav li:hover {
} background-color: red;
} }
}
#main {
#main { color: black;
color: black; }
&-sidebar { border: 1px solid; } #main-sidebar {
} border: 1px solid;
}
Referencias
- https://www.ionos.es/digitalguide/paginas-web/desarrollo-web/tutorial-de
-sass/
- https://uniwebsidad.com/libros/sass
- http://koala-app.com/
- https://startbootstrap.com/template/scrolling-nav
- https://getbootstrap.com/
Gracias!