{"id":45321105,"url":"https://github.com/codelation/sass-mixins","last_synced_at":"2026-02-21T08:01:27.402Z","repository":{"id":58229156,"uuid":"55822999","full_name":"codelation/sass-mixins","owner":"codelation","description":"A collection of Sass mixins used by Codelation.","archived":false,"fork":false,"pushed_at":"2016-06-27T19:45:42.000Z","size":15,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-02-12T23:41:36.900Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/codelation.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":"2016-04-09T02:58:27.000Z","updated_at":"2016-04-09T03:30:53.000Z","dependencies_parsed_at":"2022-09-11T04:40:52.522Z","dependency_job_id":null,"html_url":"https://github.com/codelation/sass-mixins","commit_stats":null,"previous_names":[],"tags_count":6,"template":false,"template_full_name":null,"purl":"pkg:github/codelation/sass-mixins","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codelation%2Fsass-mixins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codelation%2Fsass-mixins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codelation%2Fsass-mixins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codelation%2Fsass-mixins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codelation","download_url":"https://codeload.github.com/codelation/sass-mixins/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codelation%2Fsass-mixins/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29676978,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-21T06:23:40.028Z","status":"ssl_error","status_checked_at":"2026-02-21T06:23:39.222Z","response_time":107,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6: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":"2026-02-21T08:01:26.799Z","updated_at":"2026-02-21T08:01:27.393Z","avatar_url":"https://github.com/codelation.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Codelation Assets\n\nA collection of SCSS functions and mixins by [Codelation](https://codelation.com).\n\n```scss\n@import \"codelation\";\n```\n\n### Included Sass/CSS Libraries\n\n- [Bourbon](http://bourbon.io) - A simple and lightweight mixin library for Sass.\n\n### Sass Functions and Mixins\n\nA handful of useful Sass functions and mixins written by Codelation.\n\n#### Sass Functions\n\n##### color($color, $number: 500)\n\nThe [Google Material Design Colors](https://www.google.com/design/spec/style/color.html) come in handy when you\nneed a color for creating application interfaces. They are a much better alternative to CSS's named colors\n(blue, green, red, etc.), but just as easy to use.\n\nExamples:\n\n```scss\n// The named colors are available as variables of the same name\n.warning {\n  color: $amber;\n}\n\n// You can also use the different shades available\n.error {\n  color: color($red, 700);\n}\n\n// @see https://www.google.com/design/spec/style/color.html\n.success {\n  color: color($green, 600);\n}\n```\n\n##### text-color($color)\n\nThis function is useful for creating mixins where you have a background color as a variable\nand need to display either black or white text on top of the given color.\n\n#### Sass Mixins\n\n##### button($background-color: color($grey, 100), $color: color($grey, 800), $active-background-color: $accent-color, $active-color: text-color($accent-color))\n\nBy default, `@include button;` will create a plain grey button. It looks a lot like the default button in some\nbrowsers, but it will be rendered to look the same across all browsers. Useful for applications that need to\nbe obvious about a button looking like a button.\n\n##### center-children\n\nThis mixin uses flexbox to center the child elements horizontally and vertically inside the element.\nA good use case is centering an image of unknown height inside a container with a fixed height.\n\n##### has-cards($columns, $margin: 0, $column-class: \"auto\", $mobile: \"auto\")\n\nThis mixin uses flexbox to create a cards layout like that used by Google Material Design. The\nmixin is used on the container element. This will create a fixed margin between each card element\nand adds padding around the outside of the cards. Useful for creating a dashboard widgets look.\n\nExample:\n\n**HTML**\n\n```html\n\u003cdiv class=\"dashboard\"\u003e\n  \u003cdiv class=\"card\"\u003e\u003cdiv\u003e\n  \u003cdiv class=\"card\"\u003e\u003cdiv\u003e\n  \u003cdiv class=\"card\"\u003e\u003cdiv\u003e\n  \u003cdiv class=\"card\"\u003e\u003cdiv\u003e\n\u003c/div\u003e\n```\n\n**SCSS**\n\n```scss\n// This will create a cards layout with two cards per row.\n// There will be a fixed margin of 1em between and around the cards.\n// The cards in each row will stretch to be the same height.\n.dashboard {\n  @include has-cards(2, 1em);\n  background-color: #ccc;\n\n  .card {\n    background-color: #fff;\n    border-radius: 2px;\n    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);\n  }\n}\n```\n\n##### has-columns($columns: 0, $gutter: 0, $column-class: \"auto\", $mobile: \"auto\", $grow: true)\n\nThis mixin uses flexbox to create a layout with the specified number of columns that\nstretch to fill the container's height. The given gutter size will the margin between\nthe columns. The container must be a single row of columns.\n\nWhen the column count is given, the columns will all be the same width. If no column\ncount is given, the row will behave like a table row. The entire width will be used\nand each column width will be determined by its content. `$grow` can be set to false\nif you don't want the columns to take up the entire width of the container.\n\nExample:\n\n**HTML**\n\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv\u003eColumn 1\u003cdiv\u003e\n  \u003cdiv\u003eColumn 2\u003cdiv\u003e\n  \u003cdiv\u003eColumn 3\u003cdiv\u003e\n\u003c/div\u003e\n\n\u003cdiv class=\"table\"\u003e\n  \u003cdiv\u003eColumn 1\u003c/div\u003e\n  \u003cdiv\u003eColumn 2\u003c/div\u003e\n  \u003cdiv\u003eColumn 3\u003c/div\u003e\n  \u003cdiv\u003eColumn 4\u003c/div\u003e\n  \u003cdiv\u003eColumn 5\u003c/div\u003e\n\u003c/div\u003e\n```\n\n**SCSS**\n\n```scss\n// This will create a row with three columns.\n// The columns will all fill the container height.\n// There will be a fixed gutter of 12px between the columns.\n.row {\n  @include has-columns(3, 12px);\n}\n\n// This will create a row with five columns.\n// The columns will all fill the container height and width.\n// The width of each column will be determined by its content.\n// There will be a fixed gutter of 10px between the columns.\n.table {\n  @include has-columns($gutter: 10px);\n}\n```\n\n###### col-span($columns of $container-columns, $gutter: 0)\n\nWhen the `has-columns` mixin is used properly, you can create columns in a row that\nspan the width of multiple columns in another row. In order to use the `col-span`\nmixin, you must use a percentage value or zero for your gutter width. There is no way\nto have a fixed gutter width, flexible column widths, and match up with the columns\nin another row.\n\nExample:\n\n**HTML**\n\n```html\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv\u003eColumn 1\u003cdiv\u003e\n  \u003cdiv\u003eColumn 2\u003cdiv\u003e\n  \u003cdiv\u003eColumn 3\u003cdiv\u003e\n\u003c/div\u003e\n\u003cdiv class=\"row\"\u003e\n  \u003cdiv class=\"wide-column\"\u003eColumn 4\u003cdiv\u003e\n  \u003cdiv\u003eColumn 5\u003cdiv\u003e\n\u003c/div\u003e\n```\n\n**SCSS**\n\n```scss\n.row {\n  @include has-columns(3, 3%);\n}\n\n// Column 4 will span across two columns. Its left side will match up with\n// column 1's left side, and its right side will match up with column 2's right\n// side. Column 5's right margin will be set to 0 without any extra SCSS.\n.wide-column {\n  @include col-span(2 of 3, 3%)\n}\n```\n\n##### has-grid($columns, $gutter: 0, $column-class: \"auto\", $mobile: \"auto\")\n\nThis mixin uses flexbox to create a grid layout with an unknown number of child elements.\nEach child element will have the same width and they will stretch to be the same height.\nThe gutter size is the width between each column and the height between each row. Unlike\nthe `has-cards` mixin, there will not be a margin around the child elements, only between.\nThis mixin is perfect for a product category page.\n\nExample:\n\n**HTML**\n\n```html\n\u003cdiv class=\"products\"\u003e\n  \u003cdiv\u003eProduct 1\u003cdiv\u003e\n  \u003cdiv\u003eProduct 2\u003cdiv\u003e\n  \u003cdiv\u003eProduct 3\u003cdiv\u003e\n  \u003cdiv\u003eProduct 4\u003cdiv\u003e\n  \u003cdiv\u003eProduct 5\u003cdiv\u003e\n\u003c/div\u003e\n```\n\n**SCSS**\n\n```scss\n// Products 1 - 3 will be on the first row and there will be a margin of 1em between them.\n// Products 4 \u0026 5 will be on the second row and will match up with products 1 \u0026 2.\n// There will be a margin of 1em between the rows.\n.products {\n  @include has-grid(3, 1em);\n}\n```\n\n##### Opting out of mobile styles\n\nEach of the Sass mixins for creating columns with flexbox include a `$mobile` parameter. By default,\nstyles are applied on mobile devices to stack columns. This may not always be the desired behavior.\n\n```scss\n.i-want-columns-on-desktop-and-mobile {\n  @include has-columns($mobile: false);\n}\n```\n\n## Contributing\n\n1. Fork it\n2. Create your feature branch (`git checkout -b my-new-feature`)\n3. Commit your changes (`git commit -am 'Add some feature'`)\n4. Push to the branch (`git push origin my-new-feature`)\n5. Create new Pull Request\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelation%2Fsass-mixins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodelation%2Fsass-mixins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelation%2Fsass-mixins/lists"}