{"id":28910541,"url":"https://github.com/darshancoder/sass","last_synced_at":"2026-02-25T05:41:18.299Z","repository":{"id":232811967,"uuid":"631568685","full_name":"darshancoder/Sass","owner":"darshancoder","description":"Sass Learning Here Super Power of CSS","archived":false,"fork":false,"pushed_at":"2023-04-24T10:30:43.000Z","size":3075,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-04-13T03:34:34.317Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://clever-brioche-bb5f3c.netlify.app/","language":"HTML","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/darshancoder.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,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2023-04-23T12:45:33.000Z","updated_at":"2023-05-31T10:35:39.000Z","dependencies_parsed_at":"2024-04-11T16:34:19.710Z","dependency_job_id":null,"html_url":"https://github.com/darshancoder/Sass","commit_stats":null,"previous_names":["darshancoder/sass"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/darshancoder/Sass","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darshancoder%2FSass","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darshancoder%2FSass/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darshancoder%2FSass/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darshancoder%2FSass/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/darshancoder","download_url":"https://codeload.github.com/darshancoder/Sass/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/darshancoder%2FSass/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261170574,"owners_count":23119520,"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":[],"created_at":"2025-06-21T18:14:02.530Z","updated_at":"2025-10-27T06:08:14.484Z","avatar_url":"https://github.com/darshancoder.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Sass\nSass Learning Here Super Power of CSS\n\n\n## 1 Varibles in Sass\n- We Define Varibles By using $ sign\n- Example Here\n`\u003ccode\u003e // Sass Varibles Here Goes\n$primary-color:#272727;\n$accent-color:#ff652f;\n$text-color:#fff; \u003c/code\u003e`\n\n## 2 Map of Sass\n- example\n`$font-weights:(\n    \"regular\":400,\n    \"medium\":500,\n    \"bold\":700\n)\n.main{\n    font-weight: map-get($map:$font-weights , $key:bold );// Short Hand  font-weight: map-get($font-weights , bold );\n\n}\n`\n\n\n## 3 Nesting of Sass\n- 2 Types Nested Here\n1. `.main {\n    width: 80%;\n    margin: 0 auto;\n\n    // p{\n    //     font-weight: map-get($map:$font-weights , $key:bold );\n}`\n\n2. `.main {\n    width: 80%;\n    margin: 0 auto;\n\n    #{\u0026}__paragraph{\n        font-weight: map-get($font-weights , bold );\n    }\n    \u0026:hover{\n        color: pink;\n    }\n}`\n\n\n## 4 Sperating Files in Sass or Importing Files \n1. Step One \n- Creating file by using _(underscore) ex:_example.scss\n\n2. Step Two \n- Add Your code in that sass File in example.scss \n\n3. Step Thrid\n- import Your File to Main.scss\n- `@import './'example`\n\n\n## 5. Function in Sass\n1. Write Function \n- `@function [weight]($weight-name){\n    @return map-get($font-weights, $weight-name)\n}`\n\n2. Call the Functions\n- `font-weight: [weight](medium)`\n\n\n## 6. Mixin in Sass\n### Example One \n1. First We have to write Mixin in TOp the Code \n- If we need to pass Argument in mixin we canot its not mandotray\n`@mixin flexCenter($direction) {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    flex-direction: $direction;\n}`\n\n2. We Have to Use mixin By property is [@include]\n- `@include flexCenter(row); =\u003e With Argument`\n- `@include flexCenter(row); =\u003e without argument `\n\n\n### Example Two  [`Bg Change Theme`]\n1. Create Mixin\n- `@mixin theme($light-theme:true){\n    @if $light-theme{\n        background:lighten($primary-color, 100%) ;\n        color: darken($color: $text-color, $amount: 100%);\n    }\n}\n`\n\n2. Use Mixin By [@include]\n- `.light {\n    @include theme(true)\n    // @include theme($light-theme:true)\n}`\n\n### Exmaple Three [`Media Query`]\n1. create \n- $mobile is decalre Variable\n- `@mixin mobile {\n    @media (max-width:$mobile){\n        @content;\n\n    }\n};`\n\n2. Use it Include \n- `Scss @include mobile{\n    flex-direction: column;\n    background-color: $accent-color;\n  }`\n\n## 7. Extends \n1. Create Extends\n - `@extend .main_paragraph1;`\n - Here We are using Above Paragrah_1\n\n## 8. Math Operations\n1. \n## 9. \n## 10. \n## 11. \n## 12. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarshancoder%2Fsass","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdarshancoder%2Fsass","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdarshancoder%2Fsass/lists"}