{"id":13446713,"url":"https://github.com/sebastianmusial/SSCSS","last_synced_at":"2025-03-21T16:32:42.485Z","repository":{"id":57368857,"uuid":"109589788","full_name":"sebastianmusial/SSCSS","owner":"sebastianmusial","description":"Light Sass lib for managing your font-size, margin, padding, and position values across breakpoints.","archived":false,"fork":false,"pushed_at":"2020-03-14T15:31:42.000Z","size":347,"stargazers_count":126,"open_issues_count":0,"forks_count":6,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-03-04T17:40:47.177Z","etag":null,"topics":["angular-style","breakpoint","component-styleguide","component-styling","css","css-utilites","font","interpolation-techniques","sass","sass-boilerplate","sass-framework","sass-mixins","scss","scss-framework","scss-mixins","scss-styles","scss-template","style-guide","styleguide","stylesheet"],"latest_commit_sha":null,"homepage":"","language":"CSS","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/sebastianmusial.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-11-05T15:08:30.000Z","updated_at":"2024-05-30T07:16:10.000Z","dependencies_parsed_at":"2022-08-23T20:10:22.409Z","dependency_job_id":null,"html_url":"https://github.com/sebastianmusial/SSCSS","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastianmusial%2FSSCSS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastianmusial%2FSSCSS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastianmusial%2FSSCSS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sebastianmusial%2FSSCSS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sebastianmusial","download_url":"https://codeload.github.com/sebastianmusial/SSCSS/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244819784,"owners_count":20515646,"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":["angular-style","breakpoint","component-styleguide","component-styling","css","css-utilites","font","interpolation-techniques","sass","sass-boilerplate","sass-framework","sass-mixins","scss","scss-framework","scss-mixins","scss-styles","scss-template","style-guide","styleguide","stylesheet"],"created_at":"2024-07-31T05:00:57.910Z","updated_at":"2025-03-21T16:32:42.200Z","avatar_url":"https://github.com/sebastianmusial.png","language":"CSS","funding_links":[],"categories":["CSS"],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/sebastianmusial/SSCSS\"\u003e\n    \u003cimg src=\"sscss.png\" width=\"300\" alt=\"SSCSS logo\"/\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  The light Sass library for managing your sizes and dimensions across breakpoints.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n\t\u003cstrong\u003e@Articles:\u003c/strong\u003e\u003cbr\u003e\n  \u003ca href=\"https://medium.com/@sebastianmusia/how-to-style-modern-applications-in-a-simple-way-f93e95cd6962\" target=\"blank\"\u003eHow to style modern applications in a simple way?\u003c/a\u003e\n\u003c/p\u003e\n\n## Installation\n\n`npm i sscss`\n\nCreate your own `_core.scss` file with imports:\n```\n@import 'your-own-variables-and-settings';\n@import '~sscss/sscss';\n```\nThe file should be imported in all components where you will use Sass inheritances (@extend).\n\n## Settings\n\nIn the settings, you can use your own breakpoints in the `px` unit.\u003cbr\u003e\nThe `interpolation` key (boolean) in the map is optional and allows overwriting your global settings.\n\nExample of breakpoints:\n\n```\n$mobile: 320px;\n$tablet: 768px;\n$desktop: 1024px;\n```\n\nExample of required settings:\n```\n$sscss-font-size: (\n  'small':    ($mobile: 12px,  $tablet: 14px,  $desktop: 16px,  'interpolation': true),\n  'medium':   ($mobile: 14px,  $tablet: 18px),\n  'big':      ($mobile: 24px),\n);\n\n$sscss-dimension: (\n  'small':    ($mobile: 4px,   $tablet: 8px,   $desktop: 16px,  'interpolation': true),\n  'medium':   ($mobile: 8px,   $desktop: 32px),\n  'big':      ($mobile: 16px,  $tablet: 32px,  'interpolation': false),\n);\n```\n\n---\nIn the app you can use:\n\n* the `@extend` approach allows you avoid styles generated outside your components.\n* the `.class` approach allows you to generate small global utility classes. \n* the linear interpolation or standard breakpoint behaviors.\n\nExample of optional global settings:\n```\n$sscss-font-interpolation: false;\n$sscss-font-as-class: false;\n\n$sscss-dimension-interpolation: false;\n$sscss-dimension-as-class: false;\n```\n\n| Variable | Description | Default |\n| --- | --- | --- |\n| `$sscss-font-interpolation` | Settings for linear interpolation. | `false` |\n| `$sscss-font-as-class` | Settings for `.class` or `@extend` approach. | `false` |\n| `$sscss-dimension-interpolation` | Settings for linear interpolation. | `false` |\n| `$sscss-dimension-as-class` | Settings for `.class` or `@extend` approach. | `false` |\n\n## Usage\n\n\u003cdetails open\u003e\u003csummary\u003eFonts\u003c/summary\u003e\n\nName is generated based on a `$sscss-font-size` variable.\n\n| Extensions | Class |\n| --- | --- |\n| `@extend %u-font-size--{name}` | `.u-font-size--{name}` | `.%u-font-size--{name}` |\n\u003c/details\u003e\n\n\u003cdetails open\u003e\u003csummary\u003ePaddings\u003c/summary\u003e\n\nName is generated based on a `$sscss-dimension` variable.\n\n| Extension | Class | Description |\n| --- | --- | --- |\n| `@extend %u-padding--{name}` | `.u-padding--{name}` |  Padding top, right, bottom, left |\n| `@extend %u-padding--top-{name}` | `.u-padding--top-{name}` |  Padding top |\n| `@extend %u-padding--right-{name}` | `.u-padding--right-{name}` |  Padding right |\n| `@extend %u-padding--bottom-{name}` | `.u-padding--bottom-{name}` |  Padding bottom |\n| `@extend %u-padding--left-{name}` | `.u-padding--left-{name}` |  Padding left |\n| `@extend %u-padding--v-{name}` | `.u-padding--v-{name}` |  Padding top, bottom (vertical) |\n| `@extend %u-padding--h-{name}` | `.u-padding--h-{name}` |  Padding right, left (horizontal) |\n\u003c/details\u003e\n\n\u003cdetails open\u003e\u003csummary\u003eMargins\u003c/summary\u003e\n\nName is generated based on a `$sscss-dimension` variable.\n\n| Extension | Class | Description |\n| --- | --- | --- |\n| `@extend %u-margin--{name}` | `.u-margin--{name}` | Margin top, right, bottom, left |\n| `@extend %u-margin--top-{name}` | `.u-margin--top-{name}` | Margin top |\n| `@extend %u-margin--right-{name}` | `.u-margin--right-{name}` | Margin right |\n| `@extend %u-margin--bottom-{name}` | `.u-margin--bottom-{name}` | Margin bottom |\n| `@extend %u-margin--left-{name}` | `.u-margin--left-{name}` | Margin left |\n| `@extend %u-margin--v-{name}` | `.u-margin--v-{name}` | Margin top, bottom (vertical) |\n| `@extend %u-margin--h-{name}` | `.u-margin--h-{name}` | Margin right, left (horizontal) |\n| `@extend %u--margin--{name}` | `.u--margin--{name}` | Negative value of margin top, right, bottom, left |\n| `@extend %u--margin--top-{name}` | `.u--margin--top-{name}` | Negative value of margin top |\n| `@extend %u--margin--right-{name}` | `.u--margin--right-{name}` | Negative value of margin right |\n| `@extend %u--margin--bottom-{name}` | `.u--margin--bottom-{name}` | Negative value of margin bottom |\n| `@extend %u--margin--left-{name}` | `.u--margin--left-{name}` | Negative value of margin left |\n| `@extend %u--margin--v-{name}` | `.u--margin--v-{name}` | Negative value of margin top, bottom (vertical) |\n| `@extend %u--margin--h-{name}` | `.u--margin--h-{name}` | Negative value of margin right, left (horizontal) |\n\u003c/details\u003e\n\n\u003cdetails open\u003e\u003csummary\u003ePositions\u003c/summary\u003e\n\nName is generated based on a `$sscss-dimension` variable.\n\n| Extension | Class | Description |\n| --- | --- | --- |\n| `@extend %u-position--{name}` | `.u-position--{name}` | Position top, right, bottom, left |\n| `@extend %u-position--top-{name}` | `.u-position--top-{name}` | Position top |\n| `@extend %u-position--right-{name}` | `.u-position--right-{name}` | Position right |\n| `@extend %u-position--bottom-{name}` | `.u-position--bottom-{name}` | Position bottom |\n| `@extend %u-position--left-{name}` | `.u-position--left-{name}` | Position left |\n| `@extend %u-position--v-{name}` | `.u-position--v-{name}` | Position top, bottom (vertical) |\n| `@extend %u-position--h-{name}` | `.u-position--h-{name}` | Position right, left (horizontal) |\n| `@extend %u--position--{name}` | `.u--position--{name}` | Negative value of position top, right, bottom, left |\n| `@extend %u--position--top-{name}` | `.u--position--top-{name}` | Negative value of position top |\n| `@extend %u--position--right-{name}` | `.u--position--right-{name}` | Negative value of position right |\n| `@extend %u--position--bottom-{name}` | `.u--position--bottom-{name}` | Negative value of position bottom |\n| `@extend %u--position--left-{name}` | `.u--position--left-{name}` | Negative value of position left |\n| `@extend %u--position--v-{name}` | `.u--position--v-{name}` | Negative value of position top, bottom (vertical) |\n| `@extend %u--position--h-{name}` | `.u--position--h-{name}` | Negative value of position right, left (horizontal) |\n\u003c/details\u003e\n\n## Author\n\n\u003ctable border=\"0\"\u003e\n  \u003ctr\u003e\n    \u003ctd\u003e\n      \u003ca href=\"https://github.com/sebastianmusial\" style=\"color: white\"\u003e\n        \u003cimg src=\"https://github.com/sebastianmusial.png?s=150\" width=\"150\"/\u003e\n      \u003c/a\u003e\n    \u003c/td\u003e\n    \u003ctd\u003e\n      \u003cp\u003e\u003cstrong\u003eSebastian Musiał\u003c/strong\u003e\u003c/p\u003e\n      \u003cp\u003e\u003cimg src=\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDQ4IDQ4IiBoZWlnaHQ9IjQ4cHgiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDQ4IDQ4IiB3aWR0aD0iNDhweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IkV4cGFuZGVkIj48Zz48Zz48cGF0aCBkPSJNNDQsNDBINGMtMi4yMDYsMC00LTEuNzk0LTQtNFYxMmMwLTIuMjA2LDEuNzk0LTQsNC00aDQwYzIuMjA2LDAsNCwxLjc5NCw0LDR2MjRDNDgsMzguMjA2LDQ2LjIwNiw0MCw0NCw0MHogTTQsMTAgICAgIGMtMS4xMDMsMC0yLDAuODk3LTIsMnYyNGMwLDEuMTAzLDAuODk3LDIsMiwyaDQwYzEuMTAzLDAsMi0wLjg5NywyLTJWMTJjMC0xLjEwMy0wLjg5Ny0yLTItMkg0eiIvPjwvZz48Zz48cGF0aCBkPSJNMjQsMjkuMTkxTDYuNDU3LDE3Ljg0Yy0wLjQ2NC0wLjMwMS0wLjU5Ny0wLjkxOS0wLjI5Ny0xLjM4M3MwLjkxOS0wLjU5NiwxLjM4My0wLjI5N0wyNCwyNi44MDlMNDAuNDU3LDE2LjE2ICAgICBjMC40NjQtMC4yOTksMS4wODMtMC4xNjcsMS4zODMsMC4yOTdzMC4xNjcsMS4wODItMC4yOTcsMS4zODNMMjQsMjkuMTkxeiIvPjwvZz48Zz48cGF0aCBkPSJNNi4wMDEsMzRjLTAuMzIzLDAtMC42NDEtMC4xNTYtMC44MzMtMC40NDVjLTAuMzA3LTAuNDYtMC4xODMtMS4wOCwwLjI3Ny0xLjM4N2w5LTZjMC40Ni0wLjMwNywxLjA4MS0wLjE4MywxLjM4NywwLjI3NyAgICAgYzAuMzA3LDAuNDYsMC4xODMsMS4wOC0wLjI3NywxLjM4N2wtOSw2QzYuMzg0LDMzLjk0NSw2LjE5MSwzNCw2LjAwMSwzNHoiLz48L2c+PGc+PHBhdGggZD0iTTQxLjk5OSwzNGMtMC4xOSwwLTAuMzgzLTAuMDU1LTAuNTU0LTAuMTY4bC05LTZjLTAuNDYtMC4zMDctMC41ODQtMC45MjctMC4yNzctMS4zODcgICAgIGMwLjMwNi0wLjQ2LDAuOTI2LTAuNTg0LDEuMzg3LTAuMjc3bDksNmMwLjQ2LDAuMzA3LDAuNTg0LDAuOTI3LDAuMjc3LDEuMzg3QzQyLjY0LDMzLjg0NCw0Mi4zMjIsMzQsNDEuOTk5LDM0eiIvPjwvZz48L2c+PC9nPjwvc3ZnPg==\" style=\"width: 18px; height: 18px; vertical-align: middle; margin: 0 5px 5px 0\"\u003e \u003ca href=\"mailto:kontakt@sebastianmusial.pl\"\u003ekontakt@sebastianmusial.pl\u003c/a\u003e\u003c/p\u003e\n      \u003cp\u003e\u003cimg src=\"data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSLlvaLnirZfMl8xXyIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgNTEyIDUxMjsiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDUxMiA1MTIiIHdpZHRoPSI1MTJweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PGcgaWQ9IuW9oueKtl8yIj48Zz48cGF0aCBkPSJNNDg1Ljk4LDExMy4xNDFjLTE2LjkyMyw3LjUwNi0zNS4xMDksMTIuNTc4LTU0LjE5NywxNC44NTggICAgYzE5LjQ4LTExLjY3OSwzNC40NDUtMzAuMTcxLDQxLjQ5LTUyLjIwOGMtMTguMjM0LDEwLjgxNC0zOC40MywxOC42NjgtNTkuOTI1LDIyLjg5OWMtMTcuMjEzLTE4LjM0MS00MS43MzgtMjkuNzk5LTY4Ljg4LTI5Ljc5OSAgICBjLTUyLjExNCwwLTk0LjM2OCw0Mi4yNS05NC4zNjgsOTQuMzY0YzAsNy4zOTYsMC44MzQsMTQuNTk4LDIuNDQ0LDIxLjUwNWMtNzguNDI3LTMuOTM2LTE0Ny45NjItNDEuNTA0LTE5NC41MDQtOTguNTk3ICAgIGMtOC4xMjMsMTMuOTM3LTEyLjc3NywzMC4xNDYtMTIuNzc3LDQ3LjQ0MWMwLDMyLjczOSwxNi42NTksNjEuNjIzLDQxLjk4LDc4LjU0NmMtMTUuNDY5LTAuNDkxLTMwLjAyLTQuNzM1LTQyLjc0Mi0xMS44MDQgICAgYy0wLjAwOSwwLjM5NS0wLjAwOSwwLjc4OC0wLjAwOSwxLjE4OGMwLDQ1LjcyMSwzMi41MjksODMuODU5LDc1LjY5OCw5Mi41MzFjLTcuOTE4LDIuMTU2LTE2LjI1NSwzLjMxMS0yNC44NjEsMy4zMTEgICAgYy02LjA4MSwwLTExLjk5Mi0wLjU5My0xNy43NTUtMS42OTNjMTIuMDA5LDM3LjQ4OCw0Ni44NTgsNjQuNzczLDg4LjE1Myw2NS41MzNjLTMyLjI5NiwyNS4zMTItNzIuOTg1LDQwLjM5Ni0xMTcuMTk4LDQwLjM5NiAgICBjLTcuNjE3LDAtMTUuMTI4LTAuNDQ2LTIyLjUxMS0xLjMyYzQxLjc2MiwyNi43NzUsOTEuMzY1LDQyLjQsMTQ0LjY1NSw0Mi40YzE3My41NzQsMCwyNjguNDkzLTE0My43OTQsMjY4LjQ5My0yNjguNDk2ICAgIGMwLTQuMDkxLTAuMDkyLTguMTYtMC4yNzMtMTIuMjA4QzQ1Ny4zMzIsMTQ4LjY4NCw0NzMuMzMsMTMyLjA2NCw0ODUuOTgsMTEzLjE0MXoiIHN0eWxlPSJmaWxsLXJ1bGU6ZXZlbm9kZDtjbGlwLXJ1bGU6ZXZlbm9kZDtmaWxsOiMyQ0E3RTA7Ii8+PC9nPjwvZz48L3N2Zz4=\" style=\"width: 18px; height: 18px; vertical-align: middle; margin: 0 5px 5px 0\"\u003e \u003ca href=\"https://twitter.com/SebaMusial\"\u003e@sebamusial\u003c/a\u003e\u003c/p\u003e\n    \u003c/td\u003e\n  \u003c/tr\u003e\n\u003c/table\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebastianmusial%2FSSCSS","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsebastianmusial%2FSSCSS","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsebastianmusial%2FSSCSS/lists"}