Sass - Selectores de marcador de posición

Descripción

SASS admite el selector de marcador de posición mediante el selector de clase o id . En CSS normal, estos se especifican con "#"o".", pero en SASS se reemplazan por"%". Para trabajar con el selector de marcador de posición, se pueden usar con la directiva @extend . Sin usar la directiva @extend , no puede mostrar el resultado en CSS.

Ejemplo

El siguiente ejemplo demuestra el uso de selectores de marcador de posición en el archivo SCSS:

<html>
   <head>
      <title>Placeholder Selectors</title>
      <link rel = "stylesheet" type = "text/css" href = "style.css" />
      <link rel = "stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
      <script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
      <script src = "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
   </head>

   <body>
      <h1>First Heading</h1>
      <p class = "frst_para">It is a CSS pre-processor which helps to reduce repetition with CSS and save the time. </p>
      <h1>Second Heading</h1>
      <p class = "sec_para">It was initially designed by Hampton Catlin and developed by Natalie Weizenbaum in 2006.</p>
   </body>
</html>

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

style.scss

.frst_para {
   color: green;
}
.sec_para {
   @extend .frst_para;
   font-size:20px;
}

Aquí, hemos utilizado el @extenddirectiva, que permite que un selector herede estilos de otro selector. Puede decirle a SASS que observe el archivo y actualice el CSS cada vez que cambie el archivo de Sass, usando el siguiente comando:

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

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

style.css

.frst_para, .sec_para {
   color: green;
}
.sec_para {
   font-size: 20px;
}

Salida

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

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

↰ Previous page