Sass

https://sass-lang.com/documentation
Admin
Sass is a CSS preprocessor and stylesheet language that adds power and elegance to CSS with features...
Tokens:356,547
Snippets:3,106
Trust Score:9.9
Update:1 month ago
Show doc for...
Tokens:
Raw
### SCSS String Indexing Examples

Source: https://sass-lang.com/documentation/values/strings

Demonstrates using string.index and string.slice with SCSS syntax, noting that indexes start at 1.

```scss
@use "sass:string";

@debug string.index("Helvetica Neue", "Helvetica"); // 1
@debug string.index("Helvetica Neue", "Neue"); // 11
@debug string.slice("Roboto Mono", -4); // "Mono"
```

--------------------------------

### Many-to-Many Mode Examples

Source: https://sass-lang.com/documentation/cli/ruby-sass

Example invocations showing file-to-file, multiple file, and directory compilation. Output shows status messages and generated .css and .map files. Directory compilation ignores partial files starting with underscore.

```bash
$ sass style.scss:style.css
      write style.css
      write style.css.map
$ sass light.scss:light.css dark.scss:dark.css
      write light.css
      write light.css.map
      write dark.css
      write dark.css.map
$ sass themes:public/css
      write public/css/light.css
      write public/css/light.css.map
      write public/css/dark.css
      write public/css/dark.css.map

```

--------------------------------

### math.unit() SCSS example

Source: https://sass-lang.com/documentation/modules/math

SCSS example using @use 'sass:math' to get unit strings for various numbers. Outputs "", "px", "px*px", and "px/s".

```scss
@use 'sass:math';

@debug math.unit(100); // ""
@debug math.unit(100px); // "px"
@debug math.unit(5px * 10px); // "px*px"
@debug math.unit(math.div(5px, 1s)); // "px/s"
```

--------------------------------

### SCSS opacify and fade-in examples

Source: https://sass-lang.com/documentation/modules/color

Examples of using opacify() and fade-in() in SCSS.

```scss
@debug opacify(rgba(#6b717f, 0.5), 0.2); // rgba(107, 113, 127, 0.7)
@debug fade-in(rgba(#e1d7d2, 0.5), 0.4); // rgba(225, 215, 210, 0.9)
@debug opacify(rgba(#036, 0.7), 0.3); // #036
```

--------------------------------

### CSS output for keyword arguments example

Source: https://sass-lang.com/documentation/at-rules/function

The resulting CSS after compiling the keyword arguments example.

```css
.banner {
  background-color: #036;
  color: rgb(4%, 52%, 100%);
}
```

--------------------------------

### color.saturation examples in SCSS

Source: https://sass-lang.com/documentation/modules/color

SCSS examples showing color.saturation() with different colors and their resulting saturation percentages.

```SCSS
@use 'sass:color';

@debug color.saturation(#e1d7d2); // 20%
@debug color.saturation(#f2ece4); // 30%
@debug color.saturation(#dadbdf); // 7.2463768116%

```

--------------------------------

### math.percentage usage examples (SCSS)

Source: https://sass-lang.com/documentation/modules/math

SCSS examples demonstrating math.percentage with a decimal and with a division result.

```scss
@use 'sass:math';

@debug math.percentage(0.2); // 20%
@debug math.percentage(math.div(100px, 50px)); // 200%

```

--------------------------------

### color.whiteness examples in SCSS

Source: https://sass-lang.com/documentation/modules/color

SCSS examples showing color.whiteness() with different colors and their resulting whiteness percentages.

```SCSS
@use 'sass:color';

@debug color.whiteness(#e1d7d2); // 82.3529411765%
@debug color.whiteness(white); // 100%
@debug color.whiteness(black); // 0%

```

--------------------------------

### Hue function examples

Source: https://sass-lang.com/documentation/modules/color

Examples of retrieving the hue of a color.

```scss
@use 'sass:color';

@debug color.hue(#e1d7d2); // 20deg
@debug color.hue(#f2ece4); // 34.2857142857deg
@debug color.hue(#dadbdf); // 228deg
```

--------------------------------

### alpha/opacity SCSS examples

Source: https://sass-lang.com/documentation/modules/color

Examples of using alpha and opacity in SCSS syntax.

```scss
@use 'sass:color';

@debug color.alpha(#e1d7d2); // 1
@debug color.opacity(rgb(210, 225, 221, 0.4)); // 0.4
@debug alpha(opacity=20); // alpha(opacity=20)
```

--------------------------------

### CSS output for load-css example

Source: https://sass-lang.com/documentation/modules/meta

The resulting CSS generated by the meta.load-css example.

```css
body.dark code {
  background-color: #6b717f;
  color: #d2e1dd;
  border-color: #dadbdf;
}
```

--------------------------------

### CSS output for arbitrary arguments example

Source: https://sass-lang.com/documentation/at-rules/function

The resulting CSS after compiling the arbitrary arguments example.

```css
.micro {
  width: 180px;
}
```

--------------------------------

### blue SCSS examples

Source: https://sass-lang.com/documentation/modules/color

Examples of using blue in SCSS syntax.

```scss
@use 'sass:color';

@debug color.blue(#e1d7d2); // 210
@debug color.blue(white); // 255
@debug color.blue(black); // 0
```

--------------------------------

### list.length SCSS examples

Source: https://sass-lang.com/documentation/modules/list

SCSS examples of list.length showing lengths of lists and a map.

```SCSS
@use 'sass:list';

@debug list.length(10px); // 1
@debug list.length(10px 20px 30px); // 3
@debug list.length((width: 10px, height: 20px)); // 2

```

--------------------------------

### CSS output for optional argument example

Source: https://sass-lang.com/documentation/at-rules/function

The resulting CSS after compiling the optional argument function example.

```css
.header {
  background-color: rgb(32%, 20%, 8%);
}
```

--------------------------------

### CSS Output: @extend example

Source: https://sass-lang.com/documentation/at-rules/extend

CSS output generated from the SCSS/Sass example, showing the extended selectors.

```CSS
p.info {
  background-color: #dee9fc;
}

.guide .info, .guide .content nav.sidebar, .content .guide nav.sidebar {
  border: 1px solid rgba(0, 0, 0, 0.8);
  border-radius: 2px;
}

main.content .info, main.content nav.sidebar {
  font-size: 0.8em;
}
```

--------------------------------

### FileImporter example: redirecting ~ URLs to node_modules

Source: https://sass-lang.com/documentation/js-api/interfaces/FileImporter

Example of a FileImporter that redirects relative URLs starting with "~" to node_modules. It uses pathToFileURL from the 'url' module and returns a URL for the resolved file. This importer can be passed to sass.compile.

```javascript
const {pathToFileURL} = require('url');  

sass.compile('style.scss', {  
  importers: [{  
    // An importer that redirects relative URLs starting with "~" to  
    // `node_modules`.  
    findFileUrl(url) {  
      if (!url.startsWith('~')) return null;  
      return new URL(url.substring(1), pathToFileURL('node_modules'));  
    }  
  }]  
});
```

--------------------------------

### SCSS Syntax for @use

Source: https://sass-lang.com/documentation/at-rules/use

Example showing how to load foundation modules using the SCSS syntax.

```scss
// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}
```

```scss
// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}
```

```scss
// style.scss
@use 'foundation/code';
@use 'foundation/lists';
```

--------------------------------

### Use --help to view documentation

Source: https://sass-lang.com/documentation/cli/ruby-sass

Prints a summary of the CLI documentation.

```bash
$ sass --help
Usage: sass [options] [INPUT] [OUTPUT]

Description:
  Converts SCSS or Sass files to CSS.

...
```

--------------------------------

### Initialize and use a synchronous Compiler

Source: https://sass-lang.com/documentation/js-api/functions/initCompiler

Demonstrates creating a compiler instance, performing multiple compilations, and disposing of the compiler. Note that attempting to use the compiler after disposal will throw an error.

```javascript
const sass = require('sass');  
function setup() {  
  const compiler = sass.initCompiler();  
  const result1 = compiler.compileString('a {b: c}').css;  
  const result2 = compiler.compileString('a {b: c}').css;  
  compiler.dispose();  
  
  // throws error  
  const result3 = sass.compileString('a {b: c}').css;  
}
```

--------------------------------

### SCSS Syntax Imports

Source: https://sass-lang.com/documentation/at-rules/import

Example of using partials and index files in SCSS syntax.

```scss
// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}
```

```scss
// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}
```

```scss
// foundation/_index.scss
@import 'code', 'lists';
```

```scss
// style.scss
@import 'foundation';
```

--------------------------------

### Sass Syntax for @use

Source: https://sass-lang.com/documentation/at-rules/use

Example showing how to load foundation modules using the indented Sass syntax.

```sass
// foundation/_code.sass
code
  padding: .25em
  line-height: 0


```

```sass
// foundation/_lists.sass
ul, ol
  text-align: left

  & &
    padding:
      bottom: 0
      left: 0





```

```sass
// style.sass
@use 'foundation/code'
@use 'foundation/lists'
```

--------------------------------

### math.unit() Sass syntax example

Source: https://sass-lang.com/documentation/modules/math

Sass syntax (indented) example using @use 'sass:math' to get unit strings for various numbers. Outputs "", "px", "px*px", and "px/s".

```sass
@use 'sass:math'

@debug math.unit(100)  // ""
@debug math.unit(100px)  // "px"
@debug math.unit(5px * 10px)  // "px*px"
@debug math.unit(math.div(5px, 1s))  // "px/s"
```

--------------------------------

### Get red channel with color.getR()

Source: https://sass-lang.com/documentation/js-api/classes/types.Color

Returns the red channel as an integer from 0 to 255. Examples include #6b717f returning 107 and #b37399 returning 179.

```javascript
// color is `#6b717f`.  
color.getR(); // 107  
  
// color is `#b37399`.  
color.getR(); // 179
```

--------------------------------

### Get green channel with color.getG()

Source: https://sass-lang.com/documentation/js-api/classes/types.Color

Returns the green channel as an integer from 0 to 255. Examples include #6b717f returning 113 and #b37399 returning 115.

```javascript
// color is `#6b717f`.  
color.getG(); // 113  
  
// color is `#b37399`.  
color.getG(); // 115
```

--------------------------------

### Get blue channel with color.getB()

Source: https://sass-lang.com/documentation/js-api/classes/types.Color

Returns the blue channel as an integer from 0 to 255. Examples include #6b717f returning 127 and #b37399 returning 153.

```javascript
// color is `#6b717f`.  
color.getB(); // 127  
  
// color is `#b37399`.  
color.getB(); // 153
```

--------------------------------

### Example migration with --migrate-deps

Source: https://sass-lang.com/documentation/cli/migrator

Example session showing a style.scss using @import and a custom variable, then running sass-migrator with --migrate-deps, and the resulting file that uses @use with configuration and prefixed references. This example also uses the --migrate-deps option.

```shell
cat style.scss
$body-bg: #000;
$body-color: #111;

@import "bootstrap";

@include media-breakpoint-up(sm) {
  .navbar {
    display: block;
  }
}

```

```shell
sass-migrator --migrate-deps module style.scss

```

```shell
cat style.scss
@use "bootstrap" with (
  $body-bg: #000,
  $body-color: #111
);

@include bootstrap.media-breakpoint-up(sm) {
  .navbar {
    display: block;
  }
}

```

--------------------------------

### OutputStyle configuration example

Source: https://sass-lang.com/documentation/js-api/interfaces/Options

Demonstrates the effect of the style option on compiled CSS output using expanded and compressed styles.

```javascript
const source = `  
h1 {  
  font-size: 40px;  
  code {  
    font-face: Roboto Mono;  
  }  
}`;  
  
let result = sass.compileString(source, {style: "expanded"});  
console.log(result.css.toString());  
// h1 {  
//   font-size: 40px;  
// }  
// h1 code {  
//   font-face: Roboto Mono;  
// }  
  
result = sass.compileString(source, {style: "compressed"})  
console.log(result.css.toString());  
// h1{font-size:40px}h1 code{font-face:Roboto Mono}
```

--------------------------------

### Get alpha channel with color.getA()

Source: https://sass-lang.com/documentation/js-api/classes/types.Color

Returns the alpha channel as a number from 0 to 1. Examples contrast an opaque color (#6b717f) returning 1 and transparent returning 0.

```javascript
// color is `#6b717f`.  
color.getA(); // 1  
  
// color is `transparent`.  
color.getA(); // 0
```

--------------------------------

### math.div usage examples (SCSS)

Source: https://sass-lang.com/documentation/modules/math

SCSS examples demonstrating math.div with various unit combinations: unitless division, canceling units, and mixed units resulting in compound units.

```scss
@use 'sass:math';

@debug math.div(1, 2); // 0.5
@debug math.div(100px, 5px); // 20
@debug math.div(100px, 5); // 20px
@debug math.div(100px, 5s); // 20px/s

```

--------------------------------

### Run Sass in interactive mode with --interactive

Source: https://sass-lang.com/documentation/cli/ruby-sass

Starts an interactive Sass session where SassScript expressions can be entered and evaluated. The example shows arithmetic and map operations with their results.

```bash
$ sass --interactive
>> 1px + 1in
97px
>> $map: ("width": 100px, "height": 70px)
("width": 100px, "height": 70px)
>> map-get($map, "width")
100px

```

--------------------------------

### color.ie-hex-str SCSS example

Source: https://sass-lang.com/documentation/modules/color

Shows how to use color.ie-hex-str in SCSS to get an unquoted string in #AARRGGBB format for Internet Explorer's -ms-filter property. Colors are converted to rgb and gamut-mapped if necessary.

```SCSS
@use 'sass:color';

@debug color.ie-hex-str(#b37399); // #FFB37399
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6)); // #99F2ECE4
@debug color.ie-hex-str(oklch(70% 10% 120deg)); // #FF9BA287
```

--------------------------------

### SCSS: @extend example

Source: https://sass-lang.com/documentation/at-rules/extend

SCSS syntax showing @extend usage with comments explaining behavior.

```SCSS
.content nav.sidebar {
  @extend .info;
}

// This won't be extended, because `p` is incompatible with `nav`.
p.info {
  background-color: #dee9fc;
}

// There's no way to know whether `<div class="guide">` will be inside or
// outside `<div class="content">`, so Sass generates both to be safe.
.guide .info {
  border: 1px solid rgba(#000, 0.8);
  border-radius: 2px;
}

// Sass knows that every element matching "main.content" also matches ".content"
// and avoids generating unnecessary interleaved selectors.
main.content .info {
  font-size: 0.8em;
}
```

--------------------------------

### Migrate dependencies with --migrate-deps

Source: https://sass-lang.com/documentation/cli/migrator

Demonstrates the difference between migrating a single file and migrating a file along with its dependencies using the --migrate-deps flag.

```bash
$ sass-migrator module --verbose style.scss
Migrating style.scss
$ sass-migrator module --verbose --migrate-deps style.scss
Migrating style.scss
Migrating _theme.scss
Migrating _fonts.scss
Migrating _grid.scss
```

--------------------------------

### color.invert SCSS example

Source: https://sass-lang.com/documentation/modules/color

Shows how to use color.invert in SCSS to get the inverse or negative of a color in a specified color space. The $weight parameter controls the mix between the original and the negative; $space is required for non-legacy colors.

```SCSS
@use 'sass:color';

@debug color.invert(#b37399, $space: rgb); // #4c8c66
@debug color.invert(#550e0c, 20%, $space: display-p3); // rgb(103.4937692017, 61.3720912206, 59.430641338)
```

--------------------------------

### color.ie-hex-str Sass syntax example

Source: https://sass-lang.com/documentation/modules/color

Shows how to use color.ie-hex-str in the indented Sass syntax to get an unquoted string in #AARRGGBB format for Internet Explorer's -ms-filter property. Colors are converted to rgb and gamut-mapped if necessary.

```Sass
@use 'sass:color'

@debug color.ie-hex-str(#b37399)  // #FFB37399
@debug color.ie-hex-str(rgba(242, 236, 228, 0.6))  // #99F2ECE4
@debug color.ie-hex-str(oklch(70% 10% 120deg))  // #FF9BA287
```

--------------------------------

### color.invert Sass syntax example

Source: https://sass-lang.com/documentation/modules/color

Shows how to use color.invert in the indented Sass syntax to get the inverse or negative of a color in a specified color space. The $weight parameter controls the mix between the original and the negative; $space is required for non-legacy colors.

```Sass
@use 'sass:color';

@debug color.invert(#b37399, $space: rgb)  // #4c8c66
@debug color.invert(#550e0c, 20%, $space: display-p3)  // rgb(103.4937692017, 61.3720912206, 59.430641338)
```

--------------------------------

### Custom importer for bgcolor: URLs

Source: https://sass-lang.com/documentation/js-api/interfaces/Importer

Example of a custom importer passed to sass.compile. The importer handles URLs starting with 'bgcolor:' by generating a stylesheet that sets the body background color to the URL's pathname. The load method returns an ImporterResult with SCSS syntax.

```javascript
sass.compile('style.scss', {  
  // An importer for URLs like `bgcolor:orange` that generates a  
  // stylesheet with the given background color.  
  importers: [{  
    canonicalize(url) {  
      if (!url.startsWith('bgcolor:')) return null;  
      return new URL(url);  
    },  
    load(canonicalUrl) {  
      return {  
        contents: `body {background-color: ${canonicalUrl.pathname}}`,  
        syntax: 'scss'  
      };  
    }  
  }]  
});
```

--------------------------------

### SCSS: Using mixin values with meta.get-mixin() and meta.apply()

Source: https://sass-lang.com/documentation/values/mixins

Shows how to pass a mixin name to meta.get-mixin() to get a mixin value, then pass it to meta.apply() to call it. The example defines a custom mixin apply-to-all that applies a given mixin to each element of a list. Requires Dart Sass 1.69.0 or later.

```SCSS
@use "sass:meta";
@use "sass:string";

/// Passes each element of $list to a separate invocation of $mixin.
@mixin apply-to-all($mixin, $list) {
  @each $element in $list {
    @include meta.apply($mixin, $element);
  }
}

@mixin font-class($size) {
  .font-#{$size} {
    font-size: $size;
  }
}

$sizes: [8px, 12px, 2rem];

@include apply-to-all(meta.get-mixin("font-class"), $sizes);

```

--------------------------------

### math.compatible() SCSS example

Source: https://sass-lang.com/documentation/modules/math

SCSS example using @use 'sass:math' to test compatibility of various unit pairs. Outputs true for compatible units and false for incompatible ones.

```scss
@use 'sass:math';

@debug math.compatible(2px, 1px); // true
@debug math.compatible(100px, 3em); // false
@debug math.compatible(10cm, 3mm); // true
```

--------------------------------

### get

Source: https://sass-lang.com/documentation/js-api/classes/Value

Method to get a value by index from this list.

```APIDOC
## get(index: number): Value | undefined

### Description
Returns the value at the given index in this list. Returns undefined if the index is out of bounds.

### Method
`get(index: number): Value | undefined`

### Parameters
- **index** (number) - Required - The index to retrieve.

### Returns
- **Value | undefined** - The value at the index, or undefined if out of bounds.
```

--------------------------------

### Sass Syntax Imports

Source: https://sass-lang.com/documentation/at-rules/import

Example of using partials and index files in Sass syntax.

```sass
// foundation/_code.sass
code
  padding: .25em
  line-height: 0
```

```sass
// foundation/_lists.sass
ul, ol
  text-align: left

  & &
    padding:
      bottom: 0
      left: 0
```

```sass
// foundation/_index.sass
@import code, lists
```

```sass
// style.sass
@import foundation
```

--------------------------------

### Desaturate function examples

Source: https://sass-lang.com/documentation/modules/color

Additional examples of the desaturate function.

```scss
// Saturation 100% becomes 80%.
@debug desaturate(#036, 20%); // #0a335c

// Saturation 35% becomes 15%.
@debug desaturate(#f2ece4, 20%); // #eeebe8

// Saturation 20% becomes 0%.
@debug desaturate(#d2e1dd, 30%); // #dadada
```

--------------------------------

### SCSS Module Configuration with @forward

Source: https://sass-lang.com/documentation/at-rules/forward

Demonstrates configuring a library module via an opinionated intermediate module using SCSS syntax.

```scss
// _library.scss
$black: #000 !default;
$border-radius: 0.25rem !default;
$box-shadow: 0 0.5rem 1rem rgba($black, 0.15) !default;

code {
  border-radius: $border-radius;
  box-shadow: $box-shadow;
}
```

```scss
// _opinionated.scss
@forward 'library' with (
  $black: #222 !default,
  $border-radius: 0.1rem !default
);
```

```scss
// style.scss
@use 'opinionated' with ($black: #333);
```

--------------------------------

### Oklab Color Space Syntax

Source: https://sass-lang.com/documentation/values/colors

Syntax example for the oklab color space.

```css
oklab(44% 0.088 -0.134)
```

--------------------------------

### Green function examples

Source: https://sass-lang.com/documentation/modules/color

Examples of retrieving the green channel of a color.

```scss
@use 'sass:color';

@debug color.green(#e1d7d2); // 215
@debug color.green(white); // 255
@debug color.green(black); // 0
```

--------------------------------

### blue Sass examples

Source: https://sass-lang.com/documentation/modules/color

Examples of using blue in Sass syntax.

```sass
@use 'sass:color'

@debug color.blue(#e1d7d2)  // 210
@debug color.blue(white)  // 255
@debug color.blue(black)  // 0
```

--------------------------------

### SCSS Syntax for @import

Source: https://sass-lang.com/documentation/at-rules/import

Example showing how to import multiple files using the SCSS syntax with comma-separated paths.

```scss
// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

```

```scss
// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

```

```scss
// style.scss
@import 'foundation/code', 'foundation/lists';

```

--------------------------------

### CSS output for keyword arguments example

Source: https://sass-lang.com/documentation/at-rules/mixin

Rendered CSS for the keyword arguments example. Since `$radius` is not 0, the border-radius rule is included.

```CSS
.avatar {
  width: 100px;
  height: 100px;
  border-radius: 4px;
}
```

--------------------------------

### math.percentage usage examples (Sass)

Source: https://sass-lang.com/documentation/modules/math

Sass (indented) syntax examples demonstrating math.percentage with the same operations as the SCSS version.

```sass
@use 'sass:math'

@debug math.percentage(0.2)  // 20%
@debug math.percentage(math.div(100px, 50px))  // 200%

```

--------------------------------

### blackness Sass examples

Source: https://sass-lang.com/documentation/modules/color

Examples of using blackness in Sass syntax.

```sass
@use 'sass:color'

@debug color.blackness(#e1d7d2)  // 11.7647058824%
@debug color.blackness(white)  // 0%
@debug color.blackness(black)  // 100%
```

--------------------------------

### blackness SCSS examples

Source: https://sass-lang.com/documentation/modules/color

Examples of using blackness in SCSS syntax.

```scss
@use 'sass:color';

@debug color.blackness(#e1d7d2); // 11.7647058824%
@debug color.blackness(white); // 0%
@debug color.blackness(black); // 100%
```

--------------------------------

### Saturate and desaturate examples in SCSS

Source: https://sass-lang.com/documentation/modules/color

SCSS examples showing saturate() and desaturate() with various colors and amounts, including the resulting hex values.

```SCSS
// Saturation 50% becomes 70%.
@debug saturate(#c69, 20%); // #e05299

// Saturation 35% becomes 85%.
@debug desaturate(#f2ece4, 50%); // #ebebeb

// Saturation 80% becomes 100%.
@debug saturate(#0e4982, 30%)  // #004990

```

--------------------------------

### adjust-hue Sass examples

Source: https://sass-lang.com/documentation/modules/color

Examples of using adjust-hue in Sass syntax.

```sass
// Hue 222deg becomes 282deg.
@debug adjust-hue(#6b717f, 60deg)  // #796b7f

// Hue 164deg becomes 104deg.
@debug adjust-hue(#d2e1dd, -60deg)  // #d6e1d2

// Hue 210deg becomes 255deg.
@debug adjust-hue(#036, 45)  // #1a0066
```

--------------------------------

### adjust-hue SCSS examples

Source: https://sass-lang.com/documentation/modules/color

Examples of using adjust-hue in SCSS syntax.

```scss
// Hue 222deg becomes 282deg.
@debug adjust-hue(#6b717f, 60deg); // #796b7f

// Hue 164deg becomes 104deg.
@debug adjust-hue(#d2e1dd, -60deg); // #d6e1d2

// Hue 210deg becomes 255deg.
@debug adjust-hue(#036, 45); // #1a0066
```

--------------------------------

### SCSS: Index file and partials for folder module

Source: https://sass-lang.com/documentation/at-rules/use

Shows SCSS files for a foundation folder: _code.scss and _lists.scss define styles, _index.scss uses @use 'code' and @use 'lists', and style.scss uses @use 'foundation' to load the index file automatically.

```SCSS
// foundation/_code.scss
code {
  padding: .25em;
  line-height: 0;
}

```

```SCSS
// foundation/_lists.scss
ul, ol {
  text-align: left;

  & & {
    padding: {
      bottom: 0;
      left: 0;
    }
  }
}

```

```SCSS
// foundation/_index.scss
@use 'code';
@use 'lists';

```

```SCSS
// style.scss
@use 'foundation';

```

--------------------------------

### color.channel() SCSS syntax example

Source: https://sass-lang.com/documentation/modules/color

Uses SCSS syntax to demonstrate color.channel() with different channels and spaces. The output comments show the returned values.

```SCSS
@use 'sass:color';

@debug color.channel(hsl(80deg 30% 50%), "hue"); // 80deg
@debug color.channel(hsl(80deg 30% 50%), "hue", $space: oklch); // 124.279238779deg
@debug color.channel(hsl(80deg 30% 50%), "red", $space: rgb); // 140.25

```

--------------------------------

### Sass opacify and fade-in examples

Source: https://sass-lang.com/documentation/modules/color

Examples of using opacify() and fade-in() in Sass.

```sass
@debug opacify(rgba(#6b717f, 0.5), 0.2)  // rgba(107, 113, 127, 0.7)
@debug fade-in(rgba(#e1d7d2, 0.5), 0.4)  // rgba(225, 215, 210, 0.9)
@debug opacify(rgba(#036, 0.7), 0.3)  // #036
```

--------------------------------

### Sass String Indexing Examples

Source: https://sass-lang.com/documentation/values/strings

Demonstrates using string.index and string.slice with indented Sass syntax.

```sass
@use "sass:string"

@debug string.index("Helvetica Neue", "Helvetica")  // 1
@debug string.index("Helvetica Neue", "Neue")  // 11
@debug string.slice("Roboto Mono", -4)  // "Mono"
```

--------------------------------

### Configuring sourceMap

Source: https://sass-lang.com/documentation/js-api/interfaces/LegacySharedOptions

Examples of using the sourceMap option with a string path or a boolean to enable source map generation.

```javascript
let result = sass.renderSync({  
  file: "style.scss",  
  sourceMap: "out.map"  
})  
console.log(result.css.toString());  
// h1 {  
//   font-size: 40px;  
// }  
// /*# sourceMappingURL=out.map * /  
  
result = sass.renderSync({  
  file: "style.scss",  
  sourceMap: true,  
  outFile: "out.css"  
})  
console.log(result.css.toString());  
// h1 {  
//   font-size: 40px;  
// }  
// /*# sourceMappingURL=out.css.map * /
```

--------------------------------

### Sass lighten examples

Source: https://sass-lang.com/documentation/modules/color

Examples of using the lighten() function in Sass syntax.

```sass
// Lightness 46% becomes 66%.
@debug lighten(#6b717f, 20%)  // #a1a5af

// Lightness 20% becomes 80%.
@debug lighten(#036, 60%)  // #99ccff

// Lightness 85% becomes 100%.
@debug lighten(#e1d7d2, 30%)  // white
```

--------------------------------

### color.change() SCSS syntax example

Source: https://sass-lang.com/documentation/modules/color

Uses SCSS syntax to demonstrate color.change() with different color spaces and channel modifications. The output comments show the resulting colors.

```SCSS
@use 'sass:color';

@debug color.change(#6b717f, $red: 100); // #64717f
@debug color.change(color(srgb 0 0.2 0.4), $red: 0.8, $blue: 0.1);
// color(srgb 0.8 0.2 0.1)
@debug color.change(#998099, $lightness: 30%, $space: oklch);
// rgb(58.0719961509, 37.2631531594, 58.4201613409)

```
Tokens:
Raw