sass-site/source/documentation/modules/string.html.md.erb

---
title: sass:string
---

<%= partial '../snippets/built-in-module-status' %>

<% function 'string.quote($string)', 'quote($string)', returns: 'string' do %>
  Returns `$string` as a quoted string.

  <% example(autogen_css: false) do %>
    @debug string.quote(Helvetica); // "Helvetica"
    @debug string.quote("Helvetica"); // "Helvetica"
    ===
    @debug string.quote(Helvetica)  // "Helvetica"
    @debug string.quote("Helvetica")  // "Helvetica"
  <% end %>
<% end %>


<% function 'string.index($string, $substring)',
            'str-index($string, $substring)',
            returns: 'number' do %>
  Returns the first [index][] of `$substring` in `$string`, or `null` if
  `$string` doesn't contain `$substring`.

  [index]: ../values/strings#string-indexes

  <% example(autogen_css: false) do %>
    @debug string.index("Helvetica Neue", "Helvetica"); // 1
    @debug string.index("Helvetica Neue", "Neue"); // 11
    ===
    @debug string.index("Helvetica Neue", "Helvetica")  // 1
    @debug string.index("Helvetica Neue", "Neue")  // 11
  <% end %>
<% end %>


<% function 'string.insert($string, $insert, $index)',
            'str-insert($string, $insert, $index)',
            returns: 'string' do %>
  Returns a copy of `$string` with `$insert` inserted at [`$index`][].

  [`$index`]: ../values/strings#string-indexes

  <% example(autogen_css: false) do %>
    @debug string.insert("Roboto Bold", " Mono", 7); // "Roboto Mono Bold"
    @debug string.insert("Roboto Bold", " Mono", -6); // "Roboto Mono Bold"
    ===
    @debug string.insert("Roboto Bold", " Mono", 7)  // "Roboto Mono Bold"
    @debug string.insert("Roboto Bold", " Mono", -6)  // "Roboto Mono Bold"
  <% end %>

  If of `$index` is higher than the length of `$string`, `$insert` is added to
  the end. If `$index` is smaller than the negative length of the string,
  `$insert` is added to the beginning.

  <% example(autogen_css: false) do %>
    @debug string.insert("Roboto", " Bold", 100); // "Roboto Bold"
    @debug string.insert("Bold", "Roboto ", -100); // "Roboto Bold"
    ===
    @debug string.insert("Roboto", " Bold", 100)  // "Roboto Bold"
    @debug string.insert("Bold", "Roboto ", -100)  // "Roboto Bold"
  <% end %>
<% end %>


<% function 'string.length($string)',
            'str-length($string)',
            returns: 'number' do %>
  Returns the number of characters in `$string`.

  <% example(autogen_css: false) do %>
    @debug string.length("Helvetica Neue"); // 14
    @debug string.length(bold); // 4
    @debug string.index(""); // 0
    ===
    @debug string.length("Helvetica Neue")  // 14
    @debug string.length(bold)  // 4
    @debug string.index("")  // 0
  <% end %>
<% end %>


<% function 'string.slice($string, $start-at, $end-at: -1)',
            'str-slice($string, $start-at, $end-at: -1)',
            returns: 'string' do %>
  Returns the slice of `$string` starting at [index][] `$start-at` and ending at
  index `$end-at` (both inclusive).

  [index]: ../values/strings#string-indexes

  <% example(autogen_css: false) do %>
    @debug string.slice("Helvetica Neue", 11); // "Neue"
    @debug string.slice("Helvetica Neue", 1, 3); // "Hel"
    @debug string.slice("Helvetica Neue", 1, -6); // "Helvetica"
    ===
    @debug string.slice("Helvetica Neue", 11)  // "Neue"
    @debug string.slice("Helvetica Neue", 1, 3)  // "Hel"
    @debug string.slice("Helvetica Neue", 1, -6)  // "Helvetica"
  <% end %>
<% end %>


<% function 'string.to-upper-case($string)',
            'to-upper-case($string)',
            returns: 'string' do %>
  Returns a copy of `$string` with the [ASCII][] letters converted to upper case.

  [ASCII]: https://en.wikipedia.org/wiki/ASCII

  <% example(autogen_css: false) do %>
    @debug string.to-upper-case("Bold"); // "BOLD"
    @debug string.to-upper-case(sans-serif); // SANS-SERIF
    ===
    @debug string.to-upper-case("Bold")  // "BOLD"
    @debug string.to-upper-case(sans-serif)  // SANS-SERIF
  <% end %>
<% end %>


<% function 'string.to-lower-case($string)',
            'to-lower-case($string)',
            returns: 'string' do %>
  Returns a copy of `$string` with the [ASCII][] letters converted to lower case.

  [ASCII]: https://en.wikipedia.org/wiki/ASCII

  <% example(autogen_css: false) do %>
    @debug string.to-lower-case("Bold"); // "bold"
    @debug string.to-lower-case(SANS-SERIF); // sans-serif
    ===
    @debug string.to-lower-case("Bold")  // "bold"
    @debug string.to-lower-case(SANS-SERIF)  // sans-serif
  <% end %>
<% end %>


<% function 'string.unique-id()', 'unique-id()', returns: 'string' do %>
  Returns a randomly-generated unquoted string that's guaranteed to be a valid
  CSS identifier and to be unique within the current Sass compilation.

  <% example(autogen_css: false) do %>
    @debug string.unique-id(); // uabtrnzug
    @debug string.unique-id(); // u6w1b1def
    ===
    @debug string.unique-id(); // uabtrnzug
    @debug string.unique-id(); // u6w1b1def
  <% end %>
<% end %>


<% function 'string.unquote($string)',
            'unquote($string)',
            returns: 'string' do %>
  Returns `$string` as an unquoted string. This can produce strings that aren't
  valid CSS, so use with caution.

  <% example(autogen_css: false) do %>
    @debug string.unquote("Helvetica"); // Helvetica
    @debug string.unquote(".widget:hover"); // .widget:hover
    ===
    @debug string.unquote("Helvetica")  // Helvetica
    @debug string.unquote(".widget:hover")  // .widget:hover
  <% end %>
<% end %>