Sass - Directivas de medios

Descripción

La directiva @media establece la regla de estilo para diferentes tipos de medios. La directiva @media se puede anidar dentro del selector SASS pero se expande hasta el nivel superior de la hoja de estilo.

Ejemplo

El siguiente ejemplo demuestra el uso de @media en el archivo SCSS:

media.htm

<!doctype html>
   <head>
      <title>Media directive Example</title>
      <link rel = "stylesheet" href = "media.css" type = "text/css" />
   </head>

   <body class = "container">
      <h2>Example using media directive</h2>
      <img src = "/sass/images/birds.jpg" class = "style">
   </body>
</html>

A continuación, cree el archivo media.scss .

media.scss

h2 {
   color: #77C1EF;
}

.style {
   width: 900px;

   @media screen and (orientation: portrait) {
      width:500px;
      margin-left: 120px;
   }
}

Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo SASS, utilizando el siguiente comando:

sass --watch C:\ruby\lib\sass\media.scss:media.css

A continuación, ejecute el comando anterior; creará el archivo media.css automáticamente con el siguiente código:

media.css

h2 {
   color: #77C1EF;
 }

.style {
   width: 900px;
}
@media screen and (orientation: portrait) {
   .style {
      width: 500px;
      margin-left: 120px;
   }
}

Salida

Realicemos los siguientes pasos para ver cómo funciona el código dado anteriormente:

Guarde el código html dado anteriormente en media.html archivo.
Abra este archivo HTML en un navegador, se muestra una salida como se muestra a continuación.

↰ Previous page