SASS | Operadores de strings

Sass admite algunos operadores que se pueden usar para generar strings.

  • <expresión> + <expresión> devuelve una string que contiene los valores de ambas expresiones. Si cualquiera de los valores es una string entrecomillada, el resultado será entrecomillado; de lo contrario, no se citará.
  • <expresión> / <expresión> devuelve una string sin comillas que contiene los valores de ambas expresiones, separados por /.
  • <expresión> <expresión> devuelve una string sin comillas que contiene los valores de ambas expresiones, separados por -. Este es un operador heredado y , en general, se debe usar la interpolación en su lugar.

Ejemplo:

css

@debug "Geeks" + "forGeeks"

Producción:

"GeeksforGeeks"

css

@debug Geeks + forGeeks

Producción:

GeeksforGeeks

css

@debug #{20px + 10px} / 50px

Producción:

30px/50px

css

@debug Geeks - for - Geeks

Producción:

Geeks-for-Geeks

Los operadores anteriores no solo se usan para strings, sino también para cualquier valor que pueda codificar en CSS. Pero, debe conocer las siguientes excepciones a esto:

  • Los números no se pueden usar como el valor de la izquierda de una ecuación porque tienen sus propios operadores.
  • Los colores no se pueden usar como el valor de la izquierda en una ecuación, porque solían tener sus propios operadores.

css

@debug "Elapsed time: " + 40s

Producción:

"Elapsed time: 40s"

css

@debug true + " is a boolean value"

Producción:

"true is a boolean value"

Nota: Trate siempre de usar la interpolación para crear strings, ya que son más limpias y claras, en lugar de usar los operadores. Operadores unarios Por algunas razones históricas, Sass también admite / y – como operadores unarios que toman un solo valor:

  • / <expresión> devuelve una string sin comillas que comienza con / y sigue por el valor de la expresión.
  • <expresión> devuelve una string sin comillas que comienza con – y sigue por el valor de la expresión.

css

@debug / geeks

Producción:

/geeks

css

@debug - geeks

Producción:

-geeks

Publicación traducida automáticamente

Artículo escrito por Slash_IT y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *