{"id":23215773,"url":"https://github.com/7ds7/basscss-sass-xsgrid","last_synced_at":"2026-01-19T13:01:27.121Z","repository":{"id":219174017,"uuid":"748370642","full_name":"7Ds7/basscss-sass-xsgrid","owner":"7Ds7","description":null,"archived":false,"fork":false,"pushed_at":"2024-02-04T22:04:22.000Z","size":119,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-05T13:44:30.117Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/7Ds7.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE.md","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":"2024-01-25T20:39:01.000Z","updated_at":"2024-01-25T20:39:14.000Z","dependencies_parsed_at":"2024-02-04T23:24:02.800Z","dependency_job_id":"819093d9-c776-4c14-833a-4219acac35a7","html_url":"https://github.com/7Ds7/basscss-sass-xsgrid","commit_stats":null,"previous_names":["7ds7/basscss-sass-xsgrid"],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/7Ds7/basscss-sass-xsgrid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7Ds7%2Fbasscss-sass-xsgrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7Ds7%2Fbasscss-sass-xsgrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7Ds7%2Fbasscss-sass-xsgrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7Ds7%2Fbasscss-sass-xsgrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/7Ds7","download_url":"https://codeload.github.com/7Ds7/basscss-sass-xsgrid/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/7Ds7%2Fbasscss-sass-xsgrid/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28568833,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-19T12:50:50.164Z","status":"ssl_error","status_checked_at":"2026-01-19T12:50:42.704Z","response_time":67,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-12-18T20:18:55.635Z","updated_at":"2026-01-19T13:01:27.099Z","avatar_url":"https://github.com/7Ds7.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# basscss-sass\n\nTranspiled Basscss Sass partials\n\nhttp://basscss.com\n\nThis repository is provided as a convenience for users working within a Sass build process.\nBasscss is written in standard, spec-compliant CSS, using some new features like [custom media queries](http://dev.w3.org/csswg/mediaqueries/#custom-mq) and [custom properties](http://www.w3.org/TR/css-variables/), and is distributed across multiple modules.\n\nIf you have any choice in the matter, I highly recommend using [PostCSS](https://github.com/postcss/postcss) instead of Sass.\n\n\n## Getting Started\n\n```bash\nnpm install 7ds7/bass-sass\n```\n\n## Sass variables defaults\n\nIn order to override basscss defaults include the file [variables-basscss.scss](https://github.com/7Ds7/basscss-sass/blob/master/variables-basscss.scss) before importing basscss on your project.\n\n```scss\n// SHAPE VARIABLES\n// relates to structure\n\n// Breakpoints\n$breakpoint-xs-grid: '(min-width: 31.3125rem)';\n$breakpoint-xs: '(max-width: 40em)';\n$breakpoint-sm: '(min-width: 40em)';\n$breakpoint-sm-md: '(min-width: 40em) and (max-width: 52em)';\n$breakpoint-md: '(min-width: 52em)';\n$breakpoint-md-lg: '(min-width: 52em) and (max-width: 64em)';\n$breakpoint-lg: '(min-width: 64em)';\n\n// Typography\n$h00: 4rem;\n$h0: 3rem;\n$h1: 2rem;\n$h2: 1.5rem;\n$h3: 1.25rem;\n$h4: 1rem;\n$h5: .875rem;\n$h6: .75rem;\n\n$line-height-1: 1;\n$line-height-2: 1.125;\n$line-height-3: 1.25;\n$line-height-4: 1.5;\n$caps-letter-spacing: .2em;\n$bold-font-weight: bold;\n\n// Widths\n$width-1: 24rem;\n$width-2: 32rem;\n$width-3: 48rem;\n$width-4: 64rem;\n\n// Margins \u0026 Paddings\n$space-1: .5rem;\n$space-2: 1rem;\n$space-3: 2rem;\n$space-4: 4rem;\n\n// Borders\n$border-width: 1px;\n$border-radius: 3px;\n\n// Z indexes\n$z1: 1;\n$z2: 2;\n$z3: 3;\n$z4: 4;\n\n// Forms\n$form-field-padding-x: .5rem;\n$form-field-padding-y: .5rem;\n$form-field-height: 2.25rem;\n\n// Range field\n$range-thumb-width: $form-field-padding-x;\n$range-thumb-height: ( $form-field-height - ($form-field-padding-y * 2) );\n$range-track-height: ( calc($form-field-padding-y / 2) );\n$range-thumb-offset: ( calc($range-thumb-height / -2) + (calc($range-track-height / 2)) );\n$range-thumb-pseudo-size: $form-field-height;\n\n// Media object\n$media-object-space: $space-1;\n\n// ASPECT VARIABLES\n// relates to looks\n\n// Colors\n$aqua: #7FDBFF;\n$blue: #0074D9;\n$navy: #001F3F;\n$teal: #39CCCC;\n$green: #2ECC40;\n$olive: #3D9970;\n$lime: #01FF70;\n$yellow: #FFDC00;\n$orange: #FF851B;\n$red: #FF4136;\n$fuchsia: #F012BE;\n$purple: #B10DC9;\n$maroon: #85144B;\n$white: #FFFFFF;\n$silver: #DDDDDD;\n$gray: #AAAAAA;\n$black: #111111;\n\n// Lighten\n$darken-1: rgba(0, 0, 0, .0625);\n$darken-2: rgba(0, 0, 0, .125);\n$darken-3: rgba(0, 0, 0, .25);\n\n// Darken\n$lighten-1: rgba(255, 255, 255, .0625);\n$lighten-2: rgba(255, 255, 255, .125);\n$lighten-3: rgba(255, 255, 255, .25);\n$lighten-4: rgba(255, 255, 255, .5);\n\n// Highlight Light\n$hljs-comment: $gray;\n$hljs-keyword: $black;\n$hljs-number: $olive;\n$hljs-string: $blue;\n$hljs-title: $blue;\n$hljs-type: $navy;\n$hljs-tag: $navy;\n$hljs-attribute: $olive;\n$hljs-regexp: $olive;\n$hljs-symbol: $purple;\n$hljs-built-in: $navy;\n$hljs-preprocessor: $gray;\n$hljs-deletion: $fuchsia;\n$hljs-addition: $lime;\n$hljs-change: $navy;\n$hljs-chunk: $silver;\n\n// Highlight Dark (comment out /replace Highlight Light)\n// $hljs-comment: $silver;\n// $hljs-keyword: white;\n// $hljs-number: $lime;\n// $hljs-string: $red;\n// $hljs-title: $red;\n// $hljs-type: $aqua;\n// $hljs-tag: $aqua;\n// $hljs-attribute: $lime;\n// $hljs-regexp: $lime;\n// $hljs-symbol: $fuchsia;\n// $hljs-built-in: $aqua;\n// $hljs-preprocessor: $silver;\n// $hljs-deletion: $fuchsia;\n// $hljs-addition: $lime;\n// $hljs-change: $aqua;\n// $hljs-chunk: $gray;\n\n// Buttons\n$button-color: #fff;\n$button-background-color: $blue;\n$button-small-padding-y: .25rem;\n$button-small-padding-x: .5rem;\n$button-big-padding-y: 1rem;\n$button-big-padding-x: 1.25rem;\n$button-narrow-padding-x: .5rem;\n$button-font-family: inherit;\n$button-font-size: inherit;\n$button-font-weight: $bold-font-weight;\n$button-line-height: 1.125rem;\n```\n\n## Sass Tips\n\nUsing Sass as a preprocessor can cause numerous issues when working on large scale CSS with multiple contributors. I recommend following these tips when using Sass.\n\n- **Never use @extend.** `@extend` is an anti-pattern, and Basscss is not intended to work with this functionality in Sass.\n- **Avoid Mixins** Mixins lead to unnecessary complexity, are generally poorly understood, often lead to code bloat, and do not align with Basscss's design principles.\n- **Avoid Nesting Selectors** To maintain the composability of Basscss, avoid nesting selectors as much as possible.\n\n\n## Contributing\n\n**The scss files in this repository are not source files.**\nThey are transpiled from their respective CSS modules using the\n[css-scss](https://github.com/jxnblk/css-scss) module.\n\nDo **not** edit the scss files in this repository.\n\nSee \u003cCONTRIBUTING.md\u003e for more.\n\n---\n\n[MIT License](LICENSE.md)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F7ds7%2Fbasscss-sass-xsgrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F7ds7%2Fbasscss-sass-xsgrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F7ds7%2Fbasscss-sass-xsgrid/lists"}