Comentarios y responsive de SASS

Autor: | Última modificación: 24 de mayo de 2023 | Tiempo de Lectura: 3 minutos
Temas en este post:

Algunos de nuestros reconocimientos:

Premios KeepCoding

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.

¿Quieres seguir aprendiendo?

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!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

La IA no te quitará el trabajo, lo hará quien sepa usarla

Conviértete en Desarrollador Web con el único Bootcamp que además te formará en Inteligencia Artificial Generativa para potenciar tu perfil.