{"id":16730975,"url":"https://github.com/ndyag/sass-pattern","last_synced_at":"2026-04-04T12:58:56.801Z","repository":{"id":22471417,"uuid":"25810300","full_name":"NdYAG/sass-pattern","owner":"NdYAG","description":"Utilities for quick Sass development","archived":false,"fork":false,"pushed_at":"2017-05-10T03:07:06.000Z","size":1211,"stargazers_count":6,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T10:06:00.684Z","etag":null,"topics":["css","sass"],"latest_commit_sha":null,"homepage":"","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/NdYAG.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":"2014-10-27T08:44:51.000Z","updated_at":"2024-10-24T07:09:17.000Z","dependencies_parsed_at":"2022-08-20T17:30:17.777Z","dependency_job_id":null,"html_url":"https://github.com/NdYAG/sass-pattern","commit_stats":null,"previous_names":["ndyag/neutron"],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NdYAG%2Fsass-pattern","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NdYAG%2Fsass-pattern/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NdYAG%2Fsass-pattern/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NdYAG%2Fsass-pattern/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NdYAG","download_url":"https://codeload.github.com/NdYAG/sass-pattern/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248208566,"owners_count":21065203,"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":["css","sass"],"created_at":"2024-10-12T23:35:23.004Z","updated_at":"2025-12-12T05:51:20.308Z","avatar_url":"https://github.com/NdYAG.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# sass-pattern\n\nA list of mixins and placeholders to ease you from of the pain of repeating same code and help you focus on necessary styling.\n\n* [Install](#install)\n* Styling\n    * [Arrange](#arrange)\n    * [Button](#button)\n    * [Typography](#typography)\n    * [Retina](#retina)\n    * [Shape](#shape)\n    * [Reset](#reset)\n\n## Install\n\n`bower install sass-pattern`\n\n`npm install sass-pattern`\n\n```scss\n@import \"sass-pattern\";\n```\n\n\n## Arrange\n\nThese three objects helps you achieve the most common design layouts.\n\n```scss\n// API:\n@mixin Media($left, $right, $gutter: 0, $atRoot: true)\n\n@mixin Flag($left, $right, $align: middle, $gutter: 0, $atRoot: true)\n\n@mixin Balance($left, $right, $height: 0, $atRoot: true)\n```\n\n### Media Object\n\n\u003e The media object is an image to the left, with descriptive content to the right.\n\nvia http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/\n\nDouban Community:\n\n![media.png](https://qiita-image-store.s3.amazonaws.com/0/19886/22b0477f-79b4-a02e-0adc-1d1b2eab5ffa.png \"media.png\")\n\n```html\n\u003cdiv class=\"status\"\u003e\n    \u003cdiv class=\"status-author\"\u003e\u003c/div\u003e\n    \u003cdiv class=\"status-content\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```scss\n.status {\n    @include Media(\n        $left: '.status-author',\n        $right: '.status-content',\n        $gutter: 10px\n    );\n}\n```\n\n### Flag Object\n\n\u003e ... Where the flag object differs, however, is its ability to vertically align the image and text to the tops, middles or bottoms of each other.\n\nvia http://csswizardry.com/2013/05/the-flag-object/\n\nPart of user's profile in Douban:\n\n![flag.png](https://qiita-image-store.s3.amazonaws.com/0/19886/6df4e728-2a60-20b7-fab3-0a7692a5778d.png \"flag.png\")\n\n```html\n\u003cdiv class=\"collection\"\u003e\n    \u003cspan class=\"collection-status\"\u003e\u003c/span\u003e\n    \u003cul class=\"collection-items\"\u003e\u003c/div\u003e\n\u003c/div\u003e\n```\n\n```sass\n.collection {\n    @include Flag(\n        $left: '.collection-status',\n        $right: '.collection-items',\n        $gutter: 5px\n    );\n}\n```\n\n### Balance Object\n\nThis time, the two elements being arranged are 'floated', one left, one right. But you still have the control of their vertical alignment.\n\nThe header of a story in Douban Music:\n\n![balance.png](https://qiita-image-store.s3.amazonaws.com/0/19886/337e09a3-8a47-d979-927f-d02b9c390d7f.png \"balance.png\")\n\n```html\n\u003cheader class=\"event-hd\"\u003e\n    \u003ch1 class=\"event-title\"\u003e\u003c/h1\u003e\n    \u003cdiv class=\"event-share\"\u003e\u003c/div\u003e\n\u003c/header\u003e\n```\n\n```scss\n.event-hd {\n    @include Balance(\n        $left: '.event-title',\n        $right: '.event-share'\n    );\n}\n```\n\n## Button\n\n```scss\n// API\n@mixin Button {\n    @content;\n}\n%Button\n```\n\nCreate a button:\n\n```scss\n.button-primary {\n    @include Button {\n        border: 1px solid #ccc;\n        background: #fff;\n        padding: 1rem;\n        font-size: 1.5rem;\n    };\n}\n```\n\nStyle a button without worrying about cross-device style differences.\n\n```html\n\u003cbutton class=\"button-login\"\u003eLogin\u003c/button\u003e\n\u003ca class=\"button-login\"\u003eLogin\u003c/a\u003e\n\u003cspan class=\"button-login\"\u003eLogin\u003c/span\u003e\n```\n\n```scss\n.button-login {\n    @extend %Button;\n    \n    border: 1px solid darken($blue, 6%);\n    background: linear-gradient(top, lighten($blue, 6%) 0%, $blue 100%);\n    \u0026:hover {\n        background: linear-gradient(top, lighten($blue, 6%) 10%, $blue 100%);\n    }\n    \u0026:active {\n        background: $blue;\n    }\n}\n```\n\n### Typography\n\n```scss\n// API\n@mixin SansSerif\n%SansSerif\n\n@mixin Smoothing\n%Smoothing\n\n@mixin Kerning\n%Kerning\n\n// One-line truncating, with ellipsis behind\n@mixin Ellipsis\n%Ellipsis\n\n// Multiline truncating, with ellipsis behind\n@mixin Clamp($lines)\n```\n\n### Retina\n```scss\n@mixin Retina($img, $img2x, $bgSize: cover)\n\n@mixin HalfPixelBorder($color, $dir)\n```\n\n```scss\n.sprite {\n    @include Retina('img.png', 'img@2x.png', 100px 50px);\n}\n```\n\n### Shape\n```scss\n@mixin Rect($width, $height, $radius: 0)\n\n@mixin Square($length, $radius: 0)\n\n@mixin Circle($diameter)\n\n// auto scaling\n@mixin Ratio($ratio)\n```\n\n### Reset\n```scss\n@mixin ResetElement\n\n@mixin ResetMobile\n\n// arguments $h1 ~ $h6 are all optional\n@mixin ResetTitle($h1, $h2, $h3, $h4, $h5, $h6) {\n    @content;\n}\n\n@mixin Reset {\n    @content;\n}\n```\n\n\n```scss\n@include Reset {\n    body {\n        @include SansSerif;\n        @include Smoothing;\n    }\n    a {\n        text-decoration: none;\n    }\n};\n```\n\nDocumentation:\n\n* [English](https://github.com/NdYAG/sass-pattern/wiki/Documentation)\n* [简体中文](https://github.com/NdYAG/sass-pattern/wiki/%E6%96%87%E6%A1%A3)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndyag%2Fsass-pattern","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fndyag%2Fsass-pattern","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fndyag%2Fsass-pattern/lists"}