Explicación de Reglas de Estilo CSS con @media

La regla @media en CSS es una regla de estilo diseñada para permitir la adaptación de diferentes estilos para diferentes tipos de medios de visualización. Esta es la respuesta correcta a la pregunta planteada, ya que las otras opciones propuestas (@import, @extend, @debug) no se utilizan para definir reglas de estilo para varios tipos de medios.

Un ejemplo básico de cómo se utiliza @media en CSS es el siguiente:

@media screen and (min-width: 800px) {
  body {
    background-color: lightgreen;
  }
}

En este ejemplo, la regla @media se utiliza para aplicar un color de fondo diferente a body cuando la pantalla tiene un ancho mínimo de 800px.

Este tipo de reglas son muy útiles para diseñar sitios web responsivos, que se adaptan automáticamente a los diferentes tamaños y resoluciones de pantalla. Por ejemplo, puede tener un diseño para pantallas grandes (como las de un ordenador de sobremesa), otro para pantallas medianas (como las de un tablet) y uno más para pantallas pequeñas (como las de un móvil).

Es mejor práctica adoptar un enfoque de diseño "mobile-first", lo que significa que primero diseñará para las pantallas más pequeñas y luego agregará o modificará los estilos para pantallas más grandes utilizando reglas @media. Este enfoque ayuda a asegurar que su sitio web se vea y funcione bien en una variedad de dispositivos y tamaños de pantalla.

En resumen, la regla @media es una herramienta esencial para el diseño web responsivo, permitiendo definir estilos diferentes para diferentes medios de visualización con facilidad y eficacia.