{"id":15112244,"url":"https://github.com/jsonmaur/sass-system","last_synced_at":"2026-01-18T00:23:29.365Z","repository":{"id":57162241,"uuid":"437945657","full_name":"jsonmaur/sass-system","owner":"jsonmaur","description":"A style system generator and utility-first CSS framework","archived":false,"fork":false,"pushed_at":"2023-05-11T02:56:47.000Z","size":253,"stargazers_count":0,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T23:47:03.942Z","etag":null,"topics":["atomic-css","css","css-framework","design-system","functional-css","responsive","sass","sass-framework","scss","style-system","utility-classes"],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jsonmaur.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-12-13T16:30:05.000Z","updated_at":"2023-05-04T20:34:07.000Z","dependencies_parsed_at":"2024-09-20T18:23:02.742Z","dependency_job_id":null,"html_url":"https://github.com/jsonmaur/sass-system","commit_stats":null,"previous_names":["maurandco/ssbuild","maurandco/sass-system"],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonmaur%2Fsass-system","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonmaur%2Fsass-system/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonmaur%2Fsass-system/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jsonmaur%2Fsass-system/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jsonmaur","download_url":"https://codeload.github.com/jsonmaur/sass-system/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247378140,"owners_count":20929297,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atomic-css","css","css-framework","design-system","functional-css","responsive","sass","sass-framework","scss","style-system","utility-classes"],"created_at":"2024-09-26T00:43:13.846Z","updated_at":"2026-01-18T00:23:28.960Z","avatar_url":"https://github.com/jsonmaur.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sass System\n\nA style system generator and utility-first CSS framework built entirely in Sass.\n\nThis was inspired by similar utility-first frameworks such as Tailwind and Tachyons, but it comes with the power of a CSS preprocessor and zero dependencies other than [dart-sass](https://sass-lang.com/dart-sass)—which is fast and self-contained. As opposed to dealing with a Node build system, an \"Electron for CLI's\" binary, or the plethora of plugins needed for PostCSS.\n\n- [Features](#features)\n- [Installation](#installation)\n- [Getting Started](#getting-started)\n- [Custom Classes](#custom-classes)\n- [Configuration](#configuration)\n- [Getters](#getters)\n- [Media Queries](#media-queries)\n\n## Features\n\n- Highly customizable style system\n- Resonsive-first \u0026 utility-first classes\n- Support for dark mode utility classes\n- Beautiful presets for color, shadow, scale, and typography\n- Stacked pseudo selector classes for precision styling\n- Color scale generator for custom colors\n- Easily extended with custom Sass\n\n## Installation\n\nIf you don't need any customization and want to start using the utility classes right away, you can link directly to the default build in your HTML:\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/sass-system@0.1.1/index.min.css\" /\u003e\n```\n\nIf you want to customize your build, you'll need to install sass-system into your project using one of these methods:\n\n- [Download the latest release](https://github.com/jsonmaur/sass-system/releases)\n- Install with [npm](https://www.npmjs.com): `npm install sass-system`\n\n## Getting Started\n\n```scss\n@use \"path/to/sass-system\";\n```\n\nThat's it! Use [--load-path](https://sass-lang.com/documentation/cli/dart-sass#load-path) to include the vendor directory for your package management (could be `vendor`, `node_modules`, etc.), and all the utility classes will now be included in your CSS output.\n\n```html\n\u003cdiv class=\"m-5 p-5 bg-gray-8 max-w-6 md:max-w-7\"\u003e\n  \u003ch1 class=\"mb-4 pink-5 text-xxl text-heavy\"\u003e\n    Welcome to Sass System!\n  \u003c/h1\u003e\n\n  \u003cp class=\"text-sm text-light lead-copy\"\u003e\n    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut\n    labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco\n    laboris nisi ut aliquip ex ea commodo consequat.\n  \u003c/p\u003e\n\u003c/div\u003e\n```\n\n## Custom Classes\n\nIf you find yourself frequently reusing utility classes and want to extract common components into custom classes, you can access style system values directly using [getters](#getters):\n\n```scss\n@use \"path/to/sass-system\" as ss;\n\n.my-custom-class {\n  background: ss.color(gray-8);\n  padding: ss.space(5);\n\n  @include ss.media-up-to(md) {\n    padding: ss.space(6);\n  }\n}\n```\n\n## Configuration\n\nIf you want to customize the default values, you can pass custom configuration using [`with`](https://sass-lang.com/documentation/at-rules/use#configuration). Note that all custom values will **override the defaults** unless they are configured within the [$extend](#extend) map.\n\n```sass\n@use \"path/to/sass-system\" with (\n  $primary-fonts: (\n    sans-serif: \"Fira Sans\",\n    monospace: \"Fira Mono\"\n  ),\n  $extend: (\n    brand-colors: (\n      off-black: #202020\n    )\n  )\n);\n```\n\n- [$normalize](#normalize)\n- [$class-prefix](#class-prefix)\n- [$separator](#separator)\n- [$dark-mode](#dark-mode)\n- [$screens](#screens)\n- [$spacing](#spacing)\n- [$primary-fonts](#primary-fonts)\n- [$font-stacks](#font-stacks)\n- [$font-weights](#font-weights)\n- [$font-sizes](#font-sizes)\n- [$font-leading](#font-leading)\n- [$font-tracking](#font-tracking)\n- [$text-indent](#text-indent)\n- [$box-shadows](#box-shadows)\n- [$colors](#colors)\n- [$brand-colors](#brand-colors)\n- [$selectors](#selectors)\n- [$generators](#generators)\n- [$extend](#extend)\n\n### Normalize\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `boolean`  \n  \u003e default: `true`\n\u003c/details\u003e\n\nWhether to import [modern-normalize](https://github.com/sindresorhus/modern-normalize) and some other [opinionated normalization rules](lib/normalize.scss) at the top of your stylesheet.\n\n### Class Prefix\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `string`  \n  \u003e default: none\n\u003c/details\u003e\n\nUsed to prefix a value to every generated class name. This is turned off by default, so classes will look like `.bg-black`. e.g. If set to `ss-`, classes will look like `.ss-bg-black`.\n\n### Separator\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `string`  \n  \u003e default: `\\\\:`\n\u003c/details\u003e\n\nUsed to separate base class names from variants such as dark selectors, pseudo selectors, and responsive selectors. Using the default value of an escaped colon will generate classes such as `.sm\\:dark\\:bg-black`, which can be used as `\u003cdiv class=\"sm:dark:bg-black\"\u003e`.\n\n### Dark Mode\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `string`  \n  \u003e default: `media`\n\u003c/details\u003e\n\nEnables dark mode classes using media queries or a parent class. Setting to `media` will create classes within `@media (prefers-color-scheme: dark)`, and setting to `class` will create classes under a parent `.dark` class such as `.dark .dark\\:bg-black`.\n\n### Screens\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `map`  \n  \u003e getter: `screen($name)`  \n  \u003e default:\n  \u003e ```sass\n  \u003e (\n  \u003e   xs: 640px,\n  \u003e   sm: 768px,\n  \u003e   md: 1024px,\n  \u003e   lg: 1280px,\n  \u003e   xl: 1792px\n  \u003e )\n  \u003e ```\n\u003c/details\u003e\n\nNamed screen size values which are used to generate responsive classes within media queries such as `.md\\:bg-black`. These key names cannot be used for screen sizes due to conflicts with [width](lib/generators/width#readme) classes: `0`, `px`, `full`, `screen`, `min`, `max`, `fit`, `auto`\n\n### Spacing\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `list`  \n  \u003e getter: `space($index)`  \n  \u003e default:\n  \u003e ```sass\n  \u003e [\n  \u003e   .25rem,\n  \u003e   .5rem,\n  \u003e   1rem,\n  \u003e   1.25rem,\n  \u003e   1.5rem,\n  \u003e   2rem,\n  \u003e   2.5rem,\n  \u003e   3rem,\n  \u003e   4rem,\n  \u003e   6rem,\n  \u003e   10rem,\n  \u003e   18rem\n  \u003e ]\n  \u003e ```\n\u003c/details\u003e\n\nSpacing values used for margin and padding. Class names correspond with the list index starting at 1. e.g. `.m-1` will correspond to `margin: .25rem`, and `.p-8` will correspond to `padding: 32rem`. These classes are prefixed with `.m-*` and `.p-*`. See the [margin generator](lib/generators/margin#readme) and [padding generator](lib/generators/padding#readme) for more info.\n\n### Primary Fonts\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `map`  \n  \u003e default:\n  \u003e ```sass\n  \u003e (\n  \u003e   serif: null,\n  \u003e   sans-serif: null,\n  \u003e   monospace: null\n  \u003e )\n  \u003e ```\n\u003c/details\u003e\n\nA primary font can be set for each type of font stack, such as `monospace: \"Fira Mono\"`, which prepends to the default font stack of that same type. This avoids having to redefine entire system font stacks from scratch just to add a custom font.\n\n### Font Stacks\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `map`  \n  \u003e getter: `font($name)`  \n  \u003e default:\n  \u003e ```sass\n  \u003e (\n  \u003e   serif: [\n  \u003e     ui-serif,\n  \u003e     Georgia,\n  \u003e     Cambria,\n  \u003e     \"Times New Roman\",\n  \u003e     Times,\n  \u003e     serif,\n  \u003e     \"Apple Color Emoji\",\n  \u003e     \"Segoe UI Emoji\",\n  \u003e     \"Segoe UI Symbol\",\n  \u003e     \"Noto Color Emoji\"\n  \u003e   ],\n  \u003e   sans-serif: [\n  \u003e     ui-sans-serif,\n  \u003e     system-ui,\n  \u003e     -apple-system,\n  \u003e     BlinkMacSystemFont,\n  \u003e     \"Segoe UI\",\n  \u003e     Roboto,\n  \u003e     \"Helvetica Neue\",\n  \u003e     Arial,\n  \u003e     \"Noto Sans\",\n  \u003e     sans-serif,\n  \u003e     \"Apple Color Emoji\",\n  \u003e     \"Segoe UI Emoji\",\n  \u003e     \"Segoe UI Symbol\",\n  \u003e     \"Noto Color Emoji\"\n  \u003e   ],\n  \u003e   monospace: [\n  \u003e     ui-monospace,\n  \u003e     SFMono-Regular,\n  \u003e     Menlo,\n  \u003e     Monaco,\n  \u003e     Consolas,\n  \u003e     \"Liberation Mono\",\n  \u003e     \"Courier New\",\n  \u003e     monospace,\n  \u003e     \"Apple Color Emoji\",\n  \u003e     \"Segoe UI Emoji\",\n  \u003e     \"Segoe UI Symbol\",\n  \u003e     \"Noto Color Emoji\"\n  \u003e   ]\n  \u003e )\n  \u003e ```\n\u003c/details\u003e\n\nNamed list values for font family stacks. Rather than redefining entire font stacks to specify a single custom font, it's recommended to specify a [primary font](#primary-fonts) instead. These classes **do not** have a prefix, so make sure there are no key conflicts with [$brand-colors](#brand-colors). See the [font-family generator](lib/generators/font-family#readme) for more info.\n\n### Font Weights\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `map`  \n  \u003e getter: `font-weight($name)`  \n  \u003e default:\n  \u003e ```sass\n  \u003e (\n  \u003e   thin: 100,\n  \u003e   extra-light: 200,\n  \u003e   light: 300,\n  \u003e   regular: 400,\n  \u003e   medium: 500,\n  \u003e   semi-bold: 600,\n  \u003e   bold: 700,\n  \u003e   extra-bold: 800,\n  \u003e   heavy: 900\n  \u003e )\n  \u003e ```\n\u003c/details\u003e\n\nNamed values used for font weight. These classes are prefixed with `.text-*`, so make sure there are no key conflicts with [$font-sizes](#font-sizes). See the [font-weight generator](lib/generators/font-weight#readme) for more info.\n\n### Font Sizes\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `map`  \n  \u003e getter: `font-size($name)`  \n  \u003e default:\n  \u003e ```sass\n  \u003e (\n  \u003e   xxs: .75rem,\n  \u003e   xs: .875rem,\n  \u003e   sm: 1rem,\n  \u003e   md: 1.25rem,\n  \u003e   lg: 1.5rem,\n  \u003e   xl: 2.25rem,\n  \u003e   xxl: 3rem,\n  \u003e   jumbo: 6rem\n  \u003e )\n  \u003e ```\n\u003c/details\u003e\n\nNamed values used for font size. These classes are prefixed with `.text-*`, so make sure there are no key conflicts with [$font-weights](#font-weights). See the [font-size generator](lib/generators/font-size#readme) for more info.\n\n### Font Leading\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `map`  \n  \u003e getter: `font-lead($name)`  \n  \u003e default:\n  \u003e ```sass\n  \u003e (\n  \u003e   tight: .9em,\n  \u003e   solid: 1em,\n  \u003e   title: 1.25em,\n  \u003e   copy: 1.5em,\n  \u003e   wide: 2em\n  \u003e )\n  \u003e ```\n\u003c/details\u003e\n\nNamed values used for font leading (line height). These classes are prefixed with `.lead-*`. See the [line-height generator](lib/generators/line-height#readme) for more info.\n\n### Font Tracking\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `map`  \n  \u003e getter: `font-track($name)`  \n  \u003e default:\n  \u003e ```sass\n  \u003e (\n  \u003e   tight: -.05em,\n  \u003e   open: .1em,\n  \u003e   mega: .25em\n  \u003e )\n  \u003e ```\n\u003c/details\u003e\n\nNamed values used for font tracking (letter spacing). These classes are prefixed with `.track-*`. See the [letter-spacing generator](lib/generators/letter-spacing#readme) for more info.\n\n### Text Indent\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `number`  \n  \u003e default: `1em`\n\u003c/details\u003e\n\nValue used for the text indentation class. See the [text-indent generator](lib/generators/text-indent#readme) for more info.\n\n### Box Shadows\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `map`  \n  \u003e getter: `box-shadow($name)`  \n  \u003e default:\n  \u003e ```sass\n  \u003e (\n  \u003e   low: (0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)),\n  \u003e   mid: (0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)),\n  \u003e   high: (0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)),\n  \u003e   mega: 0 25px 50px -12px rgb(0 0 0 / 0.25),\n  \u003e   inner: inset 0 2px 4px 0 rgb(0 0 0 / 0.05)\n  \u003e )\n  \u003e ```\n\u003c/details\u003e\n\nNamed values used for box shadow. These classes are prefixed with `.shadow-*`. See the [box-shadow generator](lib/generators/box-shadow#readme) for more info.\n\n### Colors\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `map`  \n  \u003e getter: `color($name-$index)`  \n  \u003e default:\n  \u003e ```sass\n  \u003e (\n  \u003e   gray: #adb5bd,\n  \u003e   cyan: #0dcaf0,\n  \u003e   teal: #20c997,\n  \u003e   green: #198754,\n  \u003e   yellow: #ffc107,\n  \u003e   orange: #fd7e14,\n  \u003e   red: #dc3545,\n  \u003e   pink: #d63384,\n  \u003e   purple: #6f42c1,\n  \u003e   indigo: #6610f2,\n  \u003e   blue: #0d6efd\n  \u003e )\n  \u003e ```\n\u003c/details\u003e\n\nNamed values for colors that get auto-generated variations. 4 darker variations and 4 lighter variations will be generated for each color, for a total of 9 colors per key. These classes are prefixed with the color name. The base color will exist as `.[name]-5` with `.[name]-[1-4]` for lighter variations and `.[name]-[6-9]` for darker variations. See the [color generator](lib/generators/color#readme) and [background-color generator](lib/generators/background-color#readme) for more info.\n\n### Brand Colors\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `map`  \n  \u003e getter: `color($name)`  \n  \u003e default:\n  \u003e ```sass\n  \u003e (\n  \u003e   black: #000000,\n  \u003e   white: #ffffff\n  \u003e )\n  \u003e ```\n\u003c/details\u003e\n\nNamed values for brand colors that don't have auto-generated variations. These classes **do not** have a prefix, e.g. `black` creates a `.black` class. Make sure there are no key conflicts with [$font-stacks](#font-stacks). See the [color generator](lib/generators/color#readme) and [background-color generator](lib/generators/background-color#readme) for more info.\n\n### Selectors\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `map`  \n  \u003e default:\n  \u003e ```sass\n  \u003e (\n  \u003e   // pseudo classes\n  \u003e   hover: \":hover\",\n  \u003e   focus: \":focus\",\n  \u003e   focus-within: \":focus-within\",\n  \u003e   focus-visible: \":focus-visible\",\n  \u003e   active: \":active\",\n  \u003e   visited: \":visited\",\n  \u003e   target: \":target\",\n  \u003e   first: \":first-child\",\n  \u003e   last: \":last-child\",\n  \u003e   only: \":only-child\",\n  \u003e   odd: \":nth-child(odd)\",\n  \u003e   even: \":nth-child(even)\",\n  \u003e   first-of-type: \":first-of-type\",\n  \u003e   last-of-type: \":last-of-type\",\n  \u003e   only-of-type: \":only-of-type\",\n  \u003e   empty: \":empty\",\n  \u003e   disabled: \":disabled\",\n  \u003e   checked: \":checked\",\n  \u003e   indeterminate: \":indeterminate\",\n  \u003e   default: \":default\",\n  \u003e   required: \":required\",\n  \u003e   valid: \":valid\",\n  \u003e   invalid: \":invalid\",\n  \u003e   in-range: \":in-range\",\n  \u003e   out-of-range: \":out-of-range\",\n  \u003e   placeholder-shown: \":placeholder-shown\",\n  \u003e   autofill: \":autofill\",\n  \u003e   read-only: \":read-only\",\n  \u003e   rtl: \":dir(rtl)\",\n  \u003e   ltr: \":dir(ltr)\",\n  \u003e   // pseudo elements\n  \u003e   before: \"::before\",\n  \u003e   after: \"::after\",\n  \u003e   first-letter: \"::first-letter\",\n  \u003e   first-line: \"::first-line\",\n  \u003e   marker: \"::marker\",\n  \u003e   selection: \"::selection\",\n  \u003e   file: \"::file-selector-button\",\n  \u003e   placeholder: \"::placeholder\",\n  \u003e   // attribute selectors\n  \u003e   open: \"[open]\",\n  \u003e   // nested selectors\n  \u003e   hover disabled: \":hover:disabled\",\n  \u003e   hover before: \":hover::before\",\n  \u003e   hover after: \":hover::after\"\n  \u003e )\n  \u003e ```\n\u003c/details\u003e\n\nAll the selectors that can be specified in [generators](#generators), and the associated suffix for the classes. The key is used in the class name, and the value is used as the selector. e.g. If the `first` selector is enabled for a generator, it will create classes such as `.first\\:bg-black:first-child`.\n\nThe selector name can also be a space-separated list for nested selectors. e.g. `hover first: \":hover:first-child\"` will create `.hover\\:first\\:classname:hover:first-child` classes. We included a few by default, but add your own using [$extend](#extend) as needed. Using a space in the key name is to ensure the configured `$separator` is used in the generated class.\n\n### Generators\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `map`  \n  \u003e default:\n  \u003e ```sass\n  \u003e (\n  \u003e   base: [\n  \u003e     aspect-ratio background-color box-shadow box-sizing color font-family font-size font-style\n  \u003e     font-variant font-weight height letter-spacing line-height margin max-height max-width\n  \u003e     min-height min-width opacity padding text-align text-decoration text-indent text-overflow\n  \u003e     text-transform vertical-align white-space width\n  \u003e   ],\n  \u003e   hover: [],\n  \u003e   dark: (\n  \u003e     base: []\n  \u003e   ),\n  \u003e   responsive: (\n  \u003e     base: [],\n  \u003e     dark: (\n  \u003e       base: []\n  \u003e     )\n  \u003e   )\n  \u003e )\n  \u003e ```\n\u003c/details\u003e\n\nRather than include every single possible utility class in the final CSS (which would result in an enormous file), you can add or remove specific classes in the config—which we call \"generators\". Not using dark mode? Set those generators to an empty list. Want to add utility classes for a specific pseudo selector, or even nested pseudo selectors? Add those to the generators list. We added some sane defaults that will work for most sites, but you will need to add custom generator lists for anything beyond that.\n\nThis is different from other systems like Tailwind, which use a just-in-time method where a file watcher scans your HTML files for classes being used and includes them in the outputted CSS. We decided to leave that up to the configuration. It's a bit more work on the developer's side to manually include the class variations they need, but it's more predicable in the end.\n\nSee [selectors](#selectors) for a list of available selectors. `dark` can be set to a nested list of selectors to support dark classes, and `responsive` (or individual screens such as `sm` and `md`) can be set to a nested list to support responsive classes. Dark responsive classes can be enabled with by setting `dark` to a nested list _within_ `responsive`. If you find yourself with duplicated lists of generators, simply use a Sass variable.\n\n[See all the available generators.](lib/generators#readme)\n\n### Extend\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ci\u003especs\u003c/i\u003e\u003c/summary\u003e\n\n  \u003e type: `map`  \n  \u003e default: none\n\u003c/details\u003e\n\nThis can be used to append custom values onto config maps and lists while retaining the existing values. For example:\n\n```sass\n$extend: (\n  screens: (\n    xxl: 2304px\n  )\n)\n```\n\nWill result in these screens:\n\n```sass\n(\n  xs: 640px,\n  sm: 768px,\n  md: 1024px,\n  lg: 1280px,\n  xl: 1792px,\n  xxl: 2304px\n)\n```\n\n_Note that key names nested within `$extend` are **not** prefixed with `$`._\n\n## Getters\n\nThese functions are useful for getting style system values inside [custom classes](#custom-classes).\n\n- `screen($name)` to get values from [$screens](#screens)\n- `space($index)` to get values from [$spacing](#spacing)\n- `font($name)` to get values from [$font-stacks](#font-stacks)\n- `font-weight($name)` to get values from [$font-weights](#font-weights)\n- `font-size($name)` to get values from [$font-sizes](#font-sizes)\n- `font-lead($name)` to get values from [$font-leading](#font-leading)\n- `font-track($name)` to get values from [$font-tracking](#font-tracking)\n- `box-shadow($name)` to get values from [$box-shadows](#box-shadows)\n- `color($name-$index)` to get values from [$colors](#colors)\n- `color($name)` to get values from [$brand-colors](#brand-colors)\n\nFor example:\n\n```scss\n.foobar {\n  color: ss.color(gray-8);\n  padding: ss.space(6);\n}\n```\n\nWill result in:\n\n```css\n.foobar {\n  color: #e6e9eb;\n  padding: 2rem;\n}\n```\n\n## Media Queries\n\nThese mixins are useful for defining custom breakpoints using the sizes from [$screens](#screens). For example:\n\n```scss\n.foobar {\n  padding: ss.space(6);\n\n  @include ss.media-up-to(md) {\n    padding: ss.space(8);\n  }\n}\n```\n\nWill result in:\n\n```css\n.foobar {\n  padding: 2rem;\n}\n\n@media (min-width: 1024px) {\n  .foobar {\n    padding: 3rem;\n  }\n}\n```\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003emedia-up-to($screen)\u003c/code\u003e\u003c/summary\u003e\n\n  Generates a media query using `min-width` (the given screen size or _larger_):\n\n  ```scss\n  @include ss.media-up-to(md) {}\n  ```\n\n  Will result in:\n\n  ```css\n  @media (min-width: 1024px) {}\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003emedia-down-to($screen)\u003c/code\u003e\u003c/summary\u003e\n\n  Generates a media query using `max-width` (the given screen size or _smaller_) with 0.5px subtracted from the screen size:\n\n  ```scss\n  @include ss.media-down-to(md) {}\n  ```\n\n  Will result in:\n\n  ```css\n  @media (max-width: 1023.5px) {}\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003emedia-only($screen)\u003c/code\u003e\u003c/summary\u003e\n\n  Generates a media query using `min-width` and `max-width` to target a single screen size:\n\n  ```scss\n  @include ss.media-only(md) {}\n  ```\n\n  Will result in:\n\n  ```css\n  @media (min-width: 1024px) and (max-width: 1279.5px) {}\n  ```\n\u003c/details\u003e\n\n\u003cdetails\u003e\n  \u003csummary\u003e\u003ccode\u003emedia-between($screen1, $screen2)\u003c/code\u003e\u003c/summary\u003e\n\n  Generate a media query using `min-width` and `max-width` to target screen sizes between the two specified:\n\n  ```scss\n  @include ss.media-between(sm, lg) {}\n  ```\n\n  Will result in:\n\n  ```css\n  @media (min-width: 768px) and (max-width: 1279.5px) {}\n  ```\n\u003c/details\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsonmaur%2Fsass-system","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjsonmaur%2Fsass-system","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjsonmaur%2Fsass-system/lists"}