{"id":19606755,"url":"https://github.com/learnwithfair/sass-documentation","last_synced_at":"2025-02-26T16:43:52.295Z","repository":{"id":237541173,"uuid":"794684303","full_name":"learnwithfair/sass-documentation","owner":"learnwithfair","description":"sass-documentation with [learnwithfair, Learn with fair, Rahatul Rabbi, Md Rahatul Rabbi ,rahatulrabbi]","archived":false,"fork":false,"pushed_at":"2024-05-01T18:32:21.000Z","size":98,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-09T09:24:26.755Z","etag":null,"topics":["documentation","learn-with-fair","learnwithfair","rahatul-rabbi","rahatulrabbi","sass","style-sheet","webdevelopment"],"latest_commit_sha":null,"homepage":"","language":null,"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/learnwithfair.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,"publiccode":null,"codemeta":null}},"created_at":"2024-05-01T18:25:36.000Z","updated_at":"2024-05-01T18:37:49.000Z","dependencies_parsed_at":"2024-05-02T13:05:35.164Z","dependency_job_id":"dcac0293-3245-4f3f-97d7-3caffb4e6f99","html_url":"https://github.com/learnwithfair/sass-documentation","commit_stats":null,"previous_names":["learnwithfair/sass-documentation"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fsass-documentation","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fsass-documentation/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fsass-documentation/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/learnwithfair%2Fsass-documentation/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/learnwithfair","download_url":"https://codeload.github.com/learnwithfair/sass-documentation/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240894559,"owners_count":19874834,"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":["documentation","learn-with-fair","learnwithfair","rahatul-rabbi","rahatulrabbi","sass","style-sheet","webdevelopment"],"created_at":"2024-11-11T10:07:06.792Z","updated_at":"2025-02-26T16:43:52.272Z","avatar_url":"https://github.com/learnwithfair.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"# SASS DOCUMENTATION\n\nThanks for visiting my GitHub account!\n\n\u003cimg src =\"https://upload.wikimedia.org/wikipedia/commons/thumb/9/96/Sass_Logo_Color.svg/512px-Sass_Logo_Color.svg.png\" height = \"200px\" width = \"200px\"/\u003e **Sass** is a preprocessor scripting language that is interpreted or compiled into Cascading Style Sheets. SassScript is the scripting language itself. Sass consists of two syntaxes. The original syntax, called \"the indented syntax,\" uses a syntax similar to Haml. [see-more](https://www.w3schools.com/sass/)\n\n## Source Code (Download)\n\n[Click Here](https://mega.nz/folder/RGFiUApD#PoKIVCwF8IkQhE2PHw1XxQ)\n\n## Required Software (Download)\n\n- VS Code, Download -\u003ehttps://code.visualstudio.com/download\n\n## Project Overview\n\n|                              |                                    |\n| :--------------------------: | :--------------------------------: |\n|         CSS vs SASS          |              Example               |\n| ![imgage](images/images.png) | ![roadmap](images/sass-vs-css.jpg) |\n\n|                              |\n| :--------------------------: |\n| !![roadmap](images/code.jpg) |\n\n## Learning outcomes\n\n1. Introduction to SASS\n2. SASS Variables \u0026 CSS Rules nesting\n3. Partials \u0026 SASS folder structure\n4. @mixin and @include\n5. inheriting css styles using @extend\n6. @if, @else if, @else\n7. @for, @while loop\n8. @map over items using @each\n\n### 1. [Introduction to SASS](https://youtu.be/fL-XB_IpWV4)\n\n#### 1.1 What is SASS?\n\n- Syntactically Awesome Style Sheet\n- extension of CSS / CSS Preprocessor\n- it allows us to use logic in CSS\n- It was developed in 2006\n\n#### 1.2 Prerequisites for learning SASS?\n\n- HTML, CSS, Basic Javascript will help as well\n\n#### 1.3 Why SASS?\n\n- It helps to make our code short, simpler and more maintainable\n- It has some extra features such as nested rules, mixins, inheritance for avoiding repeated codes -\u003e No DRY (Dont Repeat YourSelf)\n\n#### 1.4 How does SASS works?\n\n- step 1: create a sass file, for example main.scss\n\n- step 2: browser only understand css code so we need to convert sass file to css file (main.css). sass compiler will convert the file into css file. We can install live sass compiler in vscode for compiling sass code.\n\n- step 3: use main.css file with HTML file.\n\n#### 1.5 SASS Comments\n\n- single line comment syntax :\n\n  ```scss\n  // this is a single line comment\n  ```\n\n- Multiple line comment syntax :\n\n  ```scss\n  /*\n      this is a\n      multiple line\n      comment\n      */\n  ```\n\n#### 1.6 SASS Settings\n\n- use the following code in your vscode settings.json\n\n  ```json\n     // liveSass setup\n    \"liveSassCompile.settings.formats\": [\n      {\n        \"format\": \"compressed\",\n        \"extensionName\": \".css\",\n        \"savePath\": \"/dist\"\n      }\n    ],\n    \"liveSassCompile.settings.generateMap\": true,\n  ```\n\n### 2. [SASS Variables \u0026 CSS Rules nesting](https://youtu.be/_W3fvJ87Xuw)\n\n#### 2.1 SASS Variables\n\n- SASS variable is more simpler than CSS variable.\n- SASS Variable syntax :\n\n  ```scss\n  // sass variable declaration syntax\n  $variableName: value; // here value can be string, numbers, colors, booleans, lists, nulls\n\n  // sass variable declaration example\n  $primary-color: #4c4c4c;\n\n  // sass variable use\n  header {\n    background-color: $primary-color;\n  }\n\n  // css variable example\n  :root {\n    --primary-color: #4c4c4c;\n  }\n  header {\n    background-color: var(--primary-color);\n  }\n  ```\n\n- it allows us to use logic in CSS\n- It was developed in 2006\n\n#### 2.2 Nesting CSS Rules\n\n- Example of nesting css rules\n\n  ```scss\n  // html part\n  \u003cnav\u003e\n      \u003cul\u003e\n        \u003cli\u003e\u003ca href=\"#\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n        \u003cli\u003e\u003ca href=\"#\"\u003eContact\u003c/a\u003e\u003c/li\u003e\n      \u003c/ul\u003e\n    \u003c/nav\u003e\n  \n  \n  \n  // without SASS designing the nav\n  nav {\n    background-color: #01579b;\n    height: 5rem;\n  }\n  nav ul {\n    height: 100%;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    gap: 1rem;\n  }\n  nav ul li {\n    padding: 0.8rem;\n    border-radius: 0.6rem;\n    transition: all 0.3s ease-in;\n  }\n  nav ul li:hover {\n    background-color: #000;\n  }\n  nav ul li a {\n    color: #fff;\n  }\n\n  // with SASS designing the nav - nestig rules\n  // nav starts here\n  nav {\n    background-color: #01579b;\n    height: 5rem;\n    ul {\n      height: 100%;\n      display: flex;\n      justify-content: center;\n      align-items: center;\n      gap: 1rem;\n      li {\n        padding: 0.8rem;\n        border-radius: 0.6rem;\n        transition: all 0.3s ease-in;\n        a {\n          color: #fff;\n        }\n        // list:hover can be written as \u0026:hover here as we are targeting parent element\n        \u0026:hover {\n          background-color: #000;\n        }\n      }\n    }\n  }\n  // nav ends here\n  ```\n\n- Following simple navbar project showing the use of SASS variables and nesting rules\n\n  - firts create an html file -\u003e index.html\n\n    ```html\n    \u003c!-- index.html --\u003e\n    \u003c!DOCTYPE html\u003e\n    \u003chtml lang=\"en\"\u003e\n      \u003chead\u003e\n        \u003cmeta charset=\"UTF-8\" /\u003e\n        \u003cmeta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\" /\u003e\n        \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n        \u003ctitle\u003eDocument\u003c/title\u003e\n        \u003clink rel=\"stylesheet\" href=\"./dist/main.css\" /\u003e\n      \u003c/head\u003e\n      \u003cbody\u003e\n        \u003cdiv class=\"container\"\u003e\n          \u003cnav\u003e\n            \u003ca href=\"#\" class=\"nav__logo\"\u003e\n              \u003ch2\u003eStudy With Anis\u003c/h2\u003e\n            \u003c/a\u003e\n            \u003cul class=\"nav__menu\"\u003e\n              \u003cli class=\"nav__item\"\u003e\u003ca class=\"nav__link\" href=\"#\"\u003eHome\u003c/a\u003e\u003c/li\u003e\n              \u003cli class=\"nav__item\"\u003e\n                \u003ca class=\"nav__link\" href=\"#\"\u003eCourses\u003c/a\u003e\n              \u003c/li\u003e\n              \u003cli class=\"nav__item\"\u003e\u003ca class=\"nav__link\" href=\"#\"\u003eAbout\u003c/a\u003e\u003c/li\u003e\n              \u003cli class=\"nav__item\"\u003e\n                \u003ca class=\"nav__link\" href=\"#\"\u003eContact\u003c/a\u003e\n              \u003c/li\u003e\n            \u003c/ul\u003e\n          \u003c/nav\u003e\n        \u003c/div\u003e\n      \u003c/body\u003e\n    \u003c/html\u003e\n    ```\n\n  - create main.scss file as the following example\n\n    ```scss\n    // variable declaraion\n    $color-primary-dark: #1565c0;\n    $color-text1: #fff;\n    $color-text2: #000;\n\n    $border-radius: 0.6rem;\n    $tranisition: all 0.4s ease-in-out;\n\n    // reset code\n    * {\n      border: none;\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n      list-style-type: none;\n      text-decoration: none;\n      outline: none;\n    }\n    html {\n      scroll-behavior: smooth;\n    }\n\n    .container {\n      max-width: 70rem;\n      margin: 0 auto;\n    }\n\n    // example of nesting css rules\n    // nav starts here\n    nav {\n      background-color: $color-primary-dark;\n      display: flex;\n      justify-content: space-between;\n      align-items: center;\n      padding: 1rem;\n      .nav__logo {\n        color: $color-text1;\n      }\n      .nav__menu {\n        display: flex;\n        gap: 1rem;\n        .nav__item {\n          padding: 0.5rem;\n          border-radius: $border-radius;\n          transition: $tranisition;\n          .nav__link {\n            color: $color-text1;\n          }\n          \u0026:hover {\n            background: #000;\n          }\n        }\n      }\n    }\n    // nav ends here\n    ```\n\n### 3. [Partials \u0026 SASS folder structure](https://youtu.be/minJdR-8vjw)\n\n- What is partials \u0026 why partials?\n  - Partials is a modular (independent reusable) sass file.\n  - Partials are reusable\n  - different team member can work in different file at a time and avoid conflicts\n- Partials example is given below\n\n  - step 1: create a partial file start with underscore. example: \\_reset.scss\n\n    ```scss\n    // reset code starts\n    * {\n      border: none;\n      box-sizing: border-box;\n      margin: 0;\n      padding: 0;\n      list-style-type: none;\n      text-decoration: none;\n      outline: none;\n    }\n    html {\n      scroll-behavior: smooth;\n    }\n    ```\n\n  - step 2: from anywhere you can use this partial by forwarding it.\n\n    ```scss\n    @forward \"reset\"; // no underscore is required while importing partials\n    ```\n\n- [sass folder structure for projects](https://itnext.io/structuring-your-sass-projects-c8d41fa55ed4)\n  - for a small project\n    - \\_base.scss -\u003e (boiler plate codes) can includes reset, variables, mixins and utility classes.\n    - \\_layout.scss -\u003e layout such as container, grid systems etc.\n    - \\_component.scss -\u003e reusable things like buttons, cards, navbar etc.\n    - main.scss -\u003e it should ONLY contain the imports from other files.\n  - for a medium to large project follow 7-1 pattern (7 folders 1 file)\n    - SASS folder\n      - abstracts / utilities folder\n        - \\_index.scss -\u003e forwarding all others file in this folder\n        - \\_variables.scss\n        - \\_functions.scss\n        - \\_mixins.scss\n      - base folder\n        - \\_index.scss -\u003e forwarding all others file in this folder\n        - \\_reset.scss\n        - \\_typography.scss\n      - components/modules folder\n        - \\_index.scss -\u003e forwarding all others file in this folder\n        - \\_buttons.scss\n        - \\_slider.scss\n        - \\_cards.scss\n        - \\_navbar.scss\n      - layout folder\n        - \\_index.scss -\u003e forwarding all others file in this folder\n        - \\_navigation.scss\n        - \\_grid.scss\n        - \\_header.scss\n        - \\_footer.scss\n        - \\_sidebar.scss\n        - \\_forms.scss\n      - pages folder\n        - \\_index.scss -\u003e forwarding all others file in this folder\n        - \\_home.scss\n        - \\_contact.scss\n        - \\_about.scss\n        - \\_courses.scss\n      - themes folder\n        - \\_index.scss -\u003e forwarding all others file in this folder\n        - \\_theme.scss\n        - \\_admin.scss\n      - vendors folder\n        - \\_index.scss -\u003e forwarding all others file in this folder\n        - \\_bootstrap.scss\n        - \\_jquery-ui.scss\n    - main.scss file\n\n### 4. [@mixin and @include](https://youtu.be/uJttGVgnlLQ)\n\n- What is mixin?\n\n  - a group of css declarations that can be reused. kind of function.\n  - mixin examples are given below\n\n    ```scss\n    //example 1\n    // creating  a simple @mixin\n    @mixin para-style {\n      font-size: 10px;\n      text-align: justify;\n    }\n\n    // including or using the @mixin\n    #about-me p {\n      @include para-style;\n      margin: 1rem;\n    }\n\n    //example 2\n    // creating  a dynamic @mixin\n    @mixin para-style($size, $style) {\n      font-size: $size;\n      text-align: $style;\n    }\n\n    // including or using the @mixin\n    #about-me p {\n      @include para-style(24px, justify);\n      margin: 1rem;\n    }\n    ```\n\n### 5. [inheriting css styles using @extend](https://youtu.be/YJQBhTLc1d4)\n\n- inheritance allows us to bring css declarations from one selector to another.\n- inheritance examples are given below\n\n  ```scss\n  .btn {\n    border: none;\n    border-radius: 0.6rem;\n    padding: 1rem 2rem;\n    cursor: pointer;\n    font-size: 1.2rem;\n    text-transform: uppercase;\n  }\n\n  // inherting the .btn styles using the @extend\n  .btn-download {\n    @extend .btn;\n    background-color: orange;\n  }\n  ```\n\n### 6. [@if, @else if, @else](https://youtu.be/XafbLsjEZkg)\n\n- conditional control statement -\u003e if, else if, else example is given below\n\n  ```scss\n  @mixin fontSize($value) {\n    @if $value == big {\n      font-size: 2rem;\n    } @else if $value == medium {\n      font-size: 1.5rem;\n    } @else {\n      font-size: 1rem;\n    }\n  }\n\n  .download-btn {\n    background-color: green;\n    @include fontSize(medium);\n    @include fontSize(big);\n    @include fontSize(normal);\n  }\n  ```\n\n### 7. [@for, @while loop](https://youtu.be/Qhas26n7jiY)\n\n- loop control statement -\u003e for, while example is given below\n\n  ```scss\n  // css 12 columns design\n  // column width: 100% / 12 * numberOfColumns\n  .col-1 {\n    width: 8.33%;\n  }\n  .col-2 {\n    width: 16.66%;\n  }\n  .col-3 {\n    width: 25%;\n  }\n  .col-4 {\n    width: 33.33%;\n  }\n  .col-5 {\n    width: 41.66%;\n  }\n  .col-6 {\n    width: 50%;\n  }\n  .col-7 {\n    width: 58.33%;\n  }\n  .col-8 {\n    width: 66.66%;\n  }\n  .col-9 {\n    width: 75%;\n  }\n  .col-10 {\n    width: 83.33%;\n  }\n  .col-11 {\n    width: 91.66%;\n  }\n  .col-12 {\n    width: 100%;\n  }\n\n  // we can write above css column rules so easily by using for loop or while loop\n  @for $i from 1 through 12 {\n    .col-#{$i} {\n      width: 100% / 12 * $i;\n    }\n  }\n\n  // while loop example\n  $i: 1;\n  @while $i \u003c 13 {\n    .col-#{$i} {\n      width: 100% / 12 * $i;\n    }\n  }\n  ```\n\n### 8. [@map over items using @each](https://youtu.be/Qhas26n7jiY)\n\n- example is given below\n\n  ```scss\n  // example without map\n  .red-text {\n    color: red;\n  }\n  .green-text {\n    color: red;\n  }\n  .blue-text {\n    color: blue;\n  }\n\n  // example1 with mapping items\n  @each $colorName in red, green, blue {\n    .#{$colorName}-text {\n      color: $colorName;\n    }\n  }\n\n  // example 2\n  $colorsName: (red, green, blue);\n  @each $colorName in $colorsName {\n    .#{$colorName}-text {\n      color: $colorName;\n    }\n  }\n  ```\n\n## Follow Me\n\n\u003cimg src =\"https://www.edigitalagency.com.au/wp-content/uploads/Facebook-logo-blue-circle-large-transparent-png.png\" height=\"15px\" width=\"15px\"/\u003e [Facebook](http://facebook.com/learnwithfair), \u003cimg src =\"https://image.similarpng.com/very-thumbnail/2021/10/Youtube-icon-design-on-transparent-background-PNG.png\" height=\"20px\" width=\"20px\"/\u003e [Youtube](http://youtube.com/@learnwithfair), \u003cimg src =\"https://i.pinimg.com/originals/fa/ea/02/faea02f412415becfb4939d2b6431c28.jpg\" height=\"15px\" width=\"15px\"/\u003e [Instagram](http://instagram.com/learnwithfair)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearnwithfair%2Fsass-documentation","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flearnwithfair%2Fsass-documentation","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flearnwithfair%2Fsass-documentation/lists"}