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