Dentro del desarrollo web, los comentarios y responsive de SASS pueden ser de los elementos más buscados y utilizados por los desarrolladores que emplean este preprocesador para construir sitios web. Los comentarios, por un lado, te permiten agregar textos a lo que has escrito para explicar lo que has desarrollado o la intención de los extractos de código, así como la utilidad de SASS para los elementos responsive de un sitio web.
Si quieres especializarte en el desarrollo web, esperemos que llegues hasta el final de este artículo para conocerlo todo sobre los comentarios y responsive de SASS.
Comentarios y responsive de SASS
Hay muchos elementos del preprocesador de SASS (Syntactically Awesome Style Sheets) que nos pueden ayudar a cumplir con procesos específicos del desarrollo web y para construir el componente visual de la web, es decir, el frontend. Algunos de estos elementos son los mixins, las funciones built-in, la especialización de un elemento, el anidamiento y las variables. Estos los exploramos en un artículo anterior sobre los elementos más importantes de SASS, pero aún nos falta profundizar en los elementos de los que te hablaremos ahora: los comentarios y el uso de mixin para la utilidad del responsive.
Comentarios con SASS
Con cualquier lenguaje de programación o librería que existe en el mercado hoy en día vamos a poder realizar comentarios en nuestro IDE, es decir, en la interfaz de desarrollo donde vamos a construir nuestros programas. Los comentarios son necesarios, ya que son la forma en la que podemos exponer nuestras ideas sobre las líneas de código, así como notas que pueden ayudar a nuestros compañeros o personas externas que vayan a acceder al repositorio.
De este modo, con SASS hay dos formas de añadir los comentarios. Cuando quieras añadir comentarios clásicos o multilínea, puedes utilizar el comando /* /*, mientras que para comentarios de una sola línea puedes utilizar la doble barra o slash: //. Tan solo tendrás que añadir el símbolo antes de la línea de texto que quieras comentar, como podemos ver a continuación:
/* comentarios clásicos o multilínea/*
$font-size-base: 12px;
// comentarios de una sola línea
$white: #fffff;Útil para responsive: uso de mixin
Este es otro elemento que se encuentra en la documentación de SASS y resulta muy útil. De hecho, las funcionalidades responsive pueden considerarse de los aspectos más importantes, ya que tienen un enfoque directo en la creación del entorno de usuario del desarrollo web.
¿Cómo logra un sitio web tener la etiqueta de responsive? Cuando tiene elementos de configuración que se lo permiten. En este caso, con SASS podrías emplear el elemento de los mixins.
En el extracto de texto SASS que te traemos a continuación puedes ver dos casos en los que vas a encontrar el actuar de los mixins (con variables como @mixin, @content e @include) y que te permitirán trabajar sobre los elementos y las configuraciones que declares en cada uno de ellos.
$desktop-width: 1024px;
$tablet-width: 768px;
@mixin tablet {
@media (min-width: $tablet-width) and (max-width: $desktop-width - 1px) {
@content;
}
}
/* ejemplo /*
p {
font-size: 16px;
@include tablet {
font - size: 18px;
}
}
p {
font-size: 16px;
}
@media (min-width: 768px) and (max-width: 1023px) {
p {
font-size: 18px;
}
}
Si quieres saber más acerca de los mixins, como actúan para el responsive y cómo se encuentran con otro tipo de elementos que pertenecen al catálogo del preprocesador SASS (Syntactically Awesome Style Sheets) de CSS, te invitamos a leer el resto de nuestros artículos sobre desarrollo web y SASS.
Ahora conoces en qué consisten los comentarios y responsive de SASS (Syntactically Awesome Style Sheets), un dispositivo que te puede ayudar a potenciar las herramientas que te ofrece la hoja de estilos CSS, que es la materia prima para el desarrollo web. Por tanto, si tu idea es convertirte en un experto, te invitamos a inscribirte en nuestro Desarrollo Web Full Stack Bootcamp, la formación de alta intensidad con la que lograrás especializarte gracias al acompañamiento de profesionales en el mundillo. ¡No dudes en solicitar información para cambiar tu vida!
