{"id":17092951,"url":"https://github.com/pickra/sassyegghead","last_synced_at":"2025-04-12T22:45:06.634Z","repository":{"id":44131343,"uuid":"74529048","full_name":"Pickra/SassyEgghead","owner":"Pickra","description":"Learn the Best and Most Useful SCSS","archived":false,"fork":false,"pushed_at":"2022-12-09T05:35:56.000Z","size":386,"stargazers_count":12,"open_issues_count":7,"forks_count":16,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-12T22:45:00.730Z","etag":null,"topics":["css","sass","scss"],"latest_commit_sha":null,"homepage":"https://egghead.io/courses/learn-the-best-and-most-useful-scss","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/Pickra.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":"2016-11-23T01:35:23.000Z","updated_at":"2022-07-10T06:38:46.000Z","dependencies_parsed_at":"2023-01-25T16:46:09.841Z","dependency_job_id":null,"html_url":"https://github.com/Pickra/SassyEgghead","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pickra%2FSassyEgghead","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pickra%2FSassyEgghead/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pickra%2FSassyEgghead/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Pickra%2FSassyEgghead/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Pickra","download_url":"https://codeload.github.com/Pickra/SassyEgghead/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248643047,"owners_count":21138353,"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","scss"],"created_at":"2024-10-14T14:03:55.459Z","updated_at":"2025-04-12T22:45:06.612Z","avatar_url":"https://github.com/Pickra.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Learn the Best and Most Useful SCSS\n\nHave you ever wished for iteration when writing styles? How cool would it be to use functions to write styles?\nSCSS has that and more! SCSS is a superset of CSS. Any valid CSS is SCSS, they even have the same syntax.\nSCSS borrows features from other languages to write smarter, reusable and more readable styles.\n[THIS FREE course](https://egghead.io/) will focus on how to use SCSS’s more useful features,\ncompare them against each other and assess when their usage is appropriate.\n\n## Lesson Titles:\n\n[Organize SCSS into Multiple Files with Partials:](https://github.com/Pickra/SassyEgghead/commits/feature/partials)\nTired of dealing with monolithic CSS files? In this lesson we learn how to separate our styles with SCSS partials,\nand the difference between SCSS and CSS imports.\n\n[Organize Styles with SCSS Nesting and the Parent Selector:](https://github.com/Pickra/SassyEgghead/commits/feature/nesting)\nIn this lesson we learn how to remove the redundancy of targeting pseudo-elements/classes,\nand child elements by taking advantage of SCSS’s nesting and parent selectors.\n\n[Use SCSS Variables for Readable and Maintainable Stylesheets:](https://github.com/Pickra/SassyEgghead/commits/feature/variables)\nUpdating the same color or metric multiple times is no fun. SCSS variables improve maintainability\nby allowing 1 name to represent a value that can be used anywhere.\nSCSS variables also give us the power of creating our own naming conventions to express the intent of specific values.\nIn this lesson we learn how to use SCSS variables to assign user friendly names to colors/metrics\nso 1 value change will update that value in all the right places.\n\n[Use Standard Built-in SCSS Functions for Common Operations:](https://github.com/Pickra/SassyEgghead/commits/feature/builtInFunctions)\nWe can use javascript for color and opacity variations, math, list and map logic or to see if something exists.\nSCSS includes functions for a wide range of common use cases for logic in our styles.\nIn this lesson we look at some of the more useful color functions to improve development velocity, readability, and simplify the code.\nBe sure to checkout all the [SCSS functions](http://sass-lang.com/documentation/Sass/Script/Functions.html).\n\n[Reusing Styles with the SCSS @mixin Directive:](https://github.com/Pickra/SassyEgghead/commits/feature/mixins)\nCopy/pasting the same code is redundant at best. Plus, updating copy/pasted code slows development velocity.\nIn this lesson we learn how to write reusable styles with the SCSS @mixin directive and make copy/paste a thing of the past.\n\n[Reusing Styles with the SCSS @extend Directive:](https://github.com/Pickra/SassyEgghead/commits/feature/extend)\nWe can write reusable styles with the SCSS @extend or @mixin directives. Which one is better?\nIn this lesson we learn about writing reusable styles with the @extend directive and how it compares to the @mixin directive.\n\n[Write similar classes with the SCSS @for Control Directive:](https://github.com/Pickra/SassyEgghead/commits/feature/iterateWithTheForDirective)\nWriting similar classes with minor variations, like utility classes, can be a pain to write and update.\nSometimes just a single character is the only difference between classes and updating\nthe defining parameter means we need to change it for every class name and value.\nIn this lesson we learn how to leverage the power of the SCSS @for control directive to relieve the pain.\n\n[Loop Over Data with the SCSS @each Control Directive:](https://github.com/Pickra/SassyEgghead/commits/feature/iterateWithTheEachDirective)\nThe SCSS @for directive is great when we know how many iterations are required and we only need 1 variable.\nWhat if we need multiple variables to iterate over data sets? Hello SCSS maps and the @each control directive!\nIn this lesson, we’ll check out iterating with lists and looping over data sets with maps and the @each directive.\n\n[Write Custom Functions with the SCSS @function Directive:](https://github.com/Pickra/SassyEgghead/commits/feature/functionDirective)\nSCSS provides a ton of great features, but sometimes we just want to roll our own function. We can do that too!\nIn this lesson, we learn how and when to use SCSS function directives.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpickra%2Fsassyegghead","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpickra%2Fsassyegghead","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpickra%2Fsassyegghead/lists"}