docs: standardize Sass term writing

docs/CODING_STANDARDS.md

@@ -41,7 +41,7 @@ if (!this.getAttribute('tabindex')) {
 In TypeScript code, use JsDoc-style comments for descriptions (on classes, members, etc.) and
 use `//` style comments for everything else (explanations, background info, etc.).
 
-In SCSS code, always use `//` style comments.
+In Sass code, always use `//` style comments.
 
 In HTML code, use `<!-- ... -->` comments, which will be stripped when packaging a build.
 
@@ -504,7 +504,7 @@ Also define CSS variables in :host.
 }
 ```
 
-#### Use/Check existing CSS variables and SCSS mixins/functions
+#### Use/Check existing CSS variables and Sass mixins/functions
 
 The `@sbb-esta/lyne-design-tokens` package provides global design tokens/CSS variables,
 which are used/configured in our code base (see `src/elements/core/styles/core/variables.scss`).
@@ -523,7 +523,7 @@ If a global variable is missing, create an issue or pull request in
 #### Use the lowest specificity possible
 
 Always prioritize lower specificity over other factors. Most style definitions should consist of a
-single element or css selector plus necessary state modifiers. **Avoid SCSS nesting for the sake of
+single element or css selector plus necessary state modifiers. **Avoid Sass nesting for the sake of
 code organization.** This will allow users to much more easily override styles.
 
 For example, rather than doing this:

docs/CONTRIBUTING.md

@@ -179,7 +179,7 @@ This project publishes the following package:
 
 ### Styling
 
-This project uses [SASS](https://sass-lang.com/) for styling the components.
+This project uses [Sass](https://sass-lang.com/) for styling the components.
 
 ## Language
 

docs/DEVELOPER.md

@@ -4,7 +4,7 @@
    We recommend using `nvm` to manage your node versions.
 2. From the root of the project, run `yarn` to install the dependencies.
 
-There are currently some unknown problems with developing on Windows when working with SASS,
+There are currently some unknown problems with developing on Windows when working with Sass,
 so we recommend using WSL2 to develop on Windows machines.
 
 To bring up a local server, run `yarn start`. This will automatically watch for changes

docs/GETTING_STARTED.md

@@ -261,10 +261,10 @@ Some design tokens are responsive: they change their value depending on the curr
 > There is a corresponding responsive CSS variable without the `-breakpoint` suffix,
 > e.g. `sbb-spacing-responsive-s` which should be used.
 
-### SASS Mixins
+### Sass Mixins
 
-Lyne Components provides various SASS mixins which can be used by consumers.
-For available SASS mixins, check [SASS Mixins](https://github.com/sbb-design-systems/lyne-components/tree/main/src/elements/core/styles/mixins).
+Lyne Components provides various Sass mixins which can be used by consumers.
+For available Sass mixins, check [Sass Mixins](https://github.com/sbb-design-systems/lyne-components/tree/main/src/elements/core/styles/mixins).
 
 ```scss
 @use '@sbb-esta/lyne-elements' as sbb;
@@ -328,7 +328,7 @@ when font size changes in browsers.
 
 Focus outlines should only be displayed when users are navigating by keyboard.
 Lyne components use the CSS selector `:focus-visible`, to achieve that. Whenever you have custom interactive elements,
-you should use the `:focus-visible` selector as well and include our SASS mixin `focus-outline`.
+you should use the `:focus-visible` selector as well and include our Sass mixin `focus-outline`.
 
 ```scss
 @use '../../core/styles' as sbb;
@@ -363,7 +363,7 @@ Please note, although SBB provides more fonts than `Roman`, `Bold` and `Light`,
 Lyne only intends to use these three fonts.
 To apply the SBB font family you can use the CSS var `var(--sbb-typo-font-family)`. However,
 this only includes the family but no letter spacing, so we recommend to always
-use our SASS mixins or CSS classes which contain all necessary properties.
+use our Sass mixins or CSS classes which contain all necessary properties.
 See [Text styles](https://lyne-storybook.app.sbb.ch/?path=/docs/styles-typography--docs) for what's available.
 
 ```html

src/elements/notification/notification.scss

@@ -176,7 +176,7 @@ $open-anim-height-to: calc(
   border-radius: var(--sbb-notification-border-radius);
   overflow: hidden;
 
-  // We apply SASS calculated background color as default/fallback for older browsers.
+  // We apply Sass calculated background color as default/fallback for older browsers.
   background-color: var(--sbb-notification-type-color-sass);
 
   // If supported, try to mix color with CSS

src/storybook/styles/layout/readme.md

@@ -3,7 +3,7 @@
 The page spacing ensures inline margins and controls the max-width of the page.
 The `expanded`-variant has a smaller inline spacing and no max-width.
 
-| CSS class                   | SASS mixin              |
+| CSS class                   | Sass mixin              |
 | --------------------------- | ----------------------- |
 | `sbb-page-spacing`          | `page-spacing`          |
 | `sbb-page-spacing-expanded` | `page-spacing-expanded` |
@@ -22,12 +22,12 @@ Alternatively the [sbb-container](/docs/elements-sbb-container-sbb-container--do
 
 ## Grid
 
-The grid is available as CSS class or SASS mixin.
+The grid is available as CSS class or Sass mixin.
 It provides the grid from the design specifications on which you can place your elements.
 The `expanded`-variant has a smaller inline spacing and no max-width.
 [See CSS grid docs for full documentation of all the possibilities of placing elements on a grid.](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout)
 
-| CSS class           | SASS mixin      |
+| CSS class           | Sass mixin      |
 | ------------------- | --------------- |
 | `sbb-grid`          | `grid`          |
 | `sbb-grid-expanded` | `grid-expanded` |

src/storybook/styles/list/readme.md

@@ -1,6 +1,6 @@
 ## sbb-list
 
-| CSS class  | SASS mixin |
+| CSS class  | Sass mixin |
 | ---------- | ---------- |
 | `sbb-list` | `list`     |
 
@@ -10,7 +10,7 @@ The list styling doesn't define any color itself but inherits it.
 
 ### Sass usage
 
-The SASS mixin can be included at top level or in a rule.
+The Sass mixin can be included at top level or in a rule.
 If used at top level it will apply rules to the native `<ul>` and `<ol>` elements.
 If used inside a rule it will extend the rule with `<ul>` and `<ol>`
 selectors (e.g. `.sbb-list { @include sbb.list; }` > `.sbb-list:where(ol, ul) {...}`).
@@ -25,7 +25,7 @@ selectors (e.g. `.sbb-list { @include sbb.list; }` > `.sbb-list:where(ol, ul) {.
 
 ## sbb-step-list
 
-| CSS class       | SASS mixin  |
+| CSS class       | Sass mixin  |
 | --------------- | ----------- |
 | `sbb-step-list` | `step-list` |
 
@@ -41,7 +41,7 @@ by using the predefined classes (e.g. `sbb-text-s`).
 
 ## sbb-icon-list
 
-| CSS class       | SASS mixin  |
+| CSS class       | Sass mixin  |
 | --------------- | ----------- |
 | `sbb-icon-list` | `icon-list` |
 
@@ -95,7 +95,7 @@ than the text, the CSS variable `--sbb-icon-list-marker-icon-color` can be used.
 
 ## sbb-description-list
 
-| CSS class  | SASS mixin         |
+| CSS class  | Sass mixin         |
 | ---------- | ------------------ |
 | `sbb-list` | `description-list` |
 
@@ -104,7 +104,7 @@ The description list doesn't define any color itself but inherits it.
 
 ### Sass usage
 
-The SASS mixin can be included at top level or in a rule.
+The Sass mixin can be included at top level or in a rule.
 If used at top level it will apply rules to the native `<dl>` element.
 If used inside a rule it will extend the rule with `<dl>`.
 selectors (e.g. `.sbb-list { @include sbb.description-list; }` > `.sbb-list:where(dl) {...}`).

src/storybook/styles/scrollbar/readme.md

@@ -1,10 +1,10 @@
 ## Scrollbar
 
-The scrollbar SASS mixin and CSS classes offer a combination of size, color and whether the track is visible or not.
+The scrollbar Sass mixin and CSS classes offer a combination of size, color and whether the track is visible or not.
 
 In Firefox the styles are looking differently as there are no possibilities to style the scrollbar exactly as designed.
 
-| CSS class                                    | SASS mixin                                                         |
+| CSS class                                    | Sass mixin                                                         |
 | -------------------------------------------- | ------------------------------------------------------------------ |
 | `sbb-scrollbar`                              | `scrollbar($size: thin, $negative: false, $track-visible: false)`  |
 | `sbb-scrollbar-negative`                     | `scrollbar($size: thin, $negative: true, $track-visible: false)`   |
@@ -15,7 +15,7 @@ In Firefox the styles are looking differently as there are no possibilities to s
 | `sbb-scrollbar-thick-track-visible`          | `scrollbar($size: thick, $negative: false, $track-visible: true)`  |
 | `sbb-scrollbar-thick-negative-track-visible` | `scrollbar($size: thick, $negative: true, $track-visible: true)`   |
 
-** Possible values of SASS mixin **
+** Possible values of Sass mixin **
 
 - `$size` thin or thick
 - `$negative` true or false

src/storybook/styles/table/readme.md

@@ -82,7 +82,7 @@ This scheme changes the text color of the cells to `sbb-color-iron`.
 In advanced scenarios, predefined classes might not suffice.
 Therefore, we provide mixins you can build on top of:
 
-| SASS Mixin           | CSS class                | Description                               |
+| Sass Mixin           | CSS class                | Description                               |
 | -------------------- | ------------------------ | ----------------------------------------- |
 | `table`              | `sbb-table`              | The table style (equivalent to `table-m`) |
 | `table--m`           | `sbb-table-m`            | Medium size table style                   |

src/storybook/styles/typography/readme.md

@@ -1,12 +1,12 @@
 ## Text styles
 
-Every text size (xxs, xs, s, m, l and xl) is available as SASS mixin or CSS class.
+Every text size (xxs, xs, s, m, l and xl) is available as Sass mixin or CSS class.
 It also includes line-height, letter-spacing and font-family.
 
 The native browser margins (1em) between paragraph elements `<p>` correctly corresponds
 to the defined paragraph spacing. Due to this there are no additional rules for paragraph spacing.
 
-| CSS class      | CSS class bold                | SASS mixin          | SASS mixin bold  |
+| CSS class      | CSS class bold                | Sass mixin          | Sass mixin bold  |
 | -------------- | ----------------------------- | ------------------- | ---------------- |
 | `sbb-text-xxs` | `sbb-text-xxs sbb-text--bold` | `text-xxs--regular` | `text-xxs--bold` |
 | `sbb-text-xs`  | `sbb-text-xs sbb-text--bold`  | `text-xs--regular`  | `text-xs--bold`  |
@@ -23,22 +23,22 @@ to the defined paragraph spacing. Due to this there are no additional rules for
 
 ## Legend
 
-| CSS class    | SASS mixin |
+| CSS class    | Sass mixin |
 | ------------ | ---------- |
 | `sbb-legend` | `legend`   |
 
 ## Sub
 
 The `<sub>`-tag is also overridden globally as long as you include our global styles.
 
-| SASS mixin |
+| Sass mixin |
 | ---------- |
 | `sub`      |
 
 ## Sup
 
 The `<sup>`-tag is also overridden globally as long as you include our global styles.
 
-| SASS mixin |
+| Sass mixin |
 | ---------- |
 | `sup`      |