Sass String Operators
You are Here:
What is String Operators?
Sass supports a few operators that generate strings.
Example
SASS TO CSS CONVERTER
//Check your console
@debug "sans-" + "serif"; // sans-serif
@debug sans - serif; // sans-serif
@debug sans- + serif; // sans-serif
@debug #{15px + 5px} / 10px; // 20px / 10px
@debug "Elapsed time: " + 10s; // "Elapsed time: 10s"
Sass String Operators
The following table provides a list of string operators available in Sass.
| Operator | Explanation | Operation | Result |
|---|---|---|---|
| + | Returns a string that contains both expressions’ values. If the value is a quoted string, the result will be quoted. Else, it will be unquoted. | "sans-" + "serif" | sans-serif |
| - | Returns an unquoted string that contains both expressions’ values, separated by -. | sans - serif; | sans-serif |
| / | Returns an unquoted string that contains both expressions’ values, separated by /. | #{15px + 5px} / 10px | 20px / 10px |
Reminder
Hi Developers, we almost covered 99.1% of Sass Tutorials with examples for quick and easy learning.
We are working to cover every Single Concept in Sass.
Please do google search for:
Join Our Channel
Join our telegram channel to get an instant update on depreciation and new features on HTML, CSS, JavaScript, jQuery, Node.js, PHP and Python.
This channel is primarily useful for Full Stack Web Developer.
