{"id":18749574,"url":"https://github.com/scotch-io/css-mixins","last_synced_at":"2025-10-06T07:45:42.120Z","repository":{"id":137061050,"uuid":"10254237","full_name":"scotch-io/CSS-mixins","owner":"scotch-io","description":"SASS and LESS Mixins to simplify cross browser compatibility and make CSS3 properties easier to use.","archived":false,"fork":false,"pushed_at":"2013-10-15T21:40:46.000Z","size":136,"stargazers_count":30,"open_issues_count":0,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-07-12T07:32:45.786Z","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":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/scotch-io.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2013-05-23T21:46:48.000Z","updated_at":"2021-09-03T08:38:27.000Z","dependencies_parsed_at":"2023-03-30T20:05:28.442Z","dependency_job_id":null,"html_url":"https://github.com/scotch-io/CSS-mixins","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/scotch-io/CSS-mixins","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scotch-io%2FCSS-mixins","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scotch-io%2FCSS-mixins/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scotch-io%2FCSS-mixins/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scotch-io%2FCSS-mixins/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/scotch-io","download_url":"https://codeload.github.com/scotch-io/CSS-mixins/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/scotch-io%2FCSS-mixins/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":275180222,"owners_count":25419066,"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","status":"online","status_checked_at":"2025-09-14T02:00:10.474Z","response_time":75,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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-11-07T17:07:55.532Z","updated_at":"2025-10-06T07:45:37.086Z","avatar_url":"https://github.com/scotch-io.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"SASS and LESS Mixins\n===========\n\nPreset mixins to help speed up web development. Provides **cross-browser compatibility** with things like:\n\n- Rounded Corners\n- Opacity\n- Box Shadow\n- Box Shadow (Inset)\n- Gradient (Horizontal)\n- Gradient (Vertical)\n- CSS3 Transition\n- CSS3 Transforms\n\nThese will automatically create browser-specific rules to accommodate multiple browsers. For example, the `.border-radius(4px)` mixin will create:\n\n\u003e\n\tborder-radius\t\t\t: 4px;\n\t-moz-border-radius\t\t: 4px;\n\t-webkit-border-radius\t: 4px;\n\n* These instructions are for the LESS version. The SASS syntax is a little different, but will have the same results. Check out the [SASS Website](http://sass-lang.com/) for their syntax.\n\nRequirements\n------------\n\n- [jQuery](http://jquery.com/)\n- [LESS](http://lesscss.org/)\n\nInstallation\n------------\n\n- Include jQuery and LESS\n\n\u003e\n\t\u003cscript src=\"{path_to_jquery}\"\u003e\u003c/script\u003e\n\t\u003cscript src=\"{path_to_less}\"\u003e\u003c/script\u003e\n\n- Include `mixins.less` in the head of your document.\n\n\u003e\n\t\u003clink rel=\"stylesheet/less\" href=\"{path_to_mixins}\"\u003e\n\n* Alternatively, you can import the mixins.less into the stylesheet you want. At the beginning of your LESS file, use:\n\n`@import \"mixins\";`\n\nUsage\n------------\n\n### Rounded Corners ###\nSet the border radius. Accepts pixels or percentages.\n\nHave a border radius all around: `.border-radius(5px);`\n\nCreate a circle: `.border-radius(50%);`\n\n### Opacity ###\nSet the opacity of any element. This will set the opacity of the element plus its children. For just setting the opacity of a background, look at Background Opacity\n\n`.opacity(0.5);`\n\n### Background Alpha ###\nCreates a transparent background. The contents of the element will stay at normal capacity.\n\n`.background-alpha(#000, 0.5);`\n\n### Box Shadow ###\nCreate a box shadow. Accepts 4 options: `.box-shadow(@x-size, @y-size, @blur, @color, @spread);`\n\n`.box-shadow(2px, 2px, 5px, #333, 0px);`\n\n### Box Shadow (Inset) ###\nCreate an inner box shadow. Accepts 4 options: `.box-shadow(@x-size, @y-size, @blur, @color, @spread);`\n\n`.box-shadow-inset(2px, 2px, 5px, #333, 0px);`\n\n### Gradient (Horizontal) ###\nCreate a horizontal gradient. Accepts 2 colors: `.gradient-horizontal(#FFF, #E7E7E7);`\n\n### Gradient (Vertical) ###\nCreate a vertical gradient. Accepts 2 colors: `.gradient-vertical(#FFF, #E7E7E7);`\n\n### CSS3 Transition ###\nApplies a CSS3 transition to an element. This will be used to transition CSS effects like :hover. \n\n`.transition(@type, @time, @ease);`\n`.transition(all, 5s, ease-in-out);`\n\n### CSS3 Transforms ###\nThis includes the simple CSS3 transforms. I'm currently working on a CSS3 animation library to help speed up CSS3 animations. Coming soon...\n\nThese transforms include:\n- `.transform(@deg);`\n- `.scale(@multiplier);`\n- `.rotate(@deg);`\n- `.skew(@deg, @deg2);`\n\nThese can be used on :hover actions to create cool effects.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscotch-io%2Fcss-mixins","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fscotch-io%2Fcss-mixins","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fscotch-io%2Fcss-mixins/lists"}