examples on nested ampersand in sass

CSS/Chain-Selector/ampersand-super-basic.md

@@ -81,7 +81,7 @@ But with the ampersand, Sass allows us to do the same thing without leaving the
 Both of these Sass snippets will result in the following CSS:
 
 ```css
-  .hoverable {
+.hoverable {
   color: #fff;
 }
 

CSS/Chain-Selector/ampersand-note-2.md → CSS/Chain-Selector/mixin-with-ampersand-best-practice-1.md

@@ -1,4 +1,4 @@
-I was working `ng-select` Angular package, and for my case here, I am trying to target the below classes
+I was working `ng-select` Angular package, and for my case here, I am trying to target both the below 2 classes
 
 ```css
 class="ng-select ng-dropdown-panel"
@@ -7,12 +7,11 @@ class="ng-select ng-dropdown-panel"
 class="ng-dropdown-panel sdk-ng-select"
 ```
 
-Note when I use <ng-select> component in .html file all ng-select related classes will have the ultimate parent 'ng-select'
+Note when I use <ng-select> component (which is the popular angular package) in .html file all ng-select related classes will have the ultimate parent 'ng-select'
 
 Here's my overall structur of the @mixin in .scss file 
 
 ```css
-
 @mixin sdk-ng-select {
     ...many styles here
 .ng-dropdown-panel,
@@ -52,16 +51,28 @@ I could simply do
 .ng-dropdown-panel, &.ng-dropdown-panel
 ```
 
-In the above, the first selector in below matches "ng-dropdown-panel" inside the "ng-select"
-the second selector matches <div class="ng-dropdown-panel sdk-ng-select"> i.e. both the classes
+#### In the above, the first selector (.ng-dropdown-panel) matches "ng-dropdown-panel" inside the "ng-select"
+
+#### The second selector (&.ng-dropdown-panel) matches <div class="ng-dropdown-panel sdk-ng-select"> i.e. both the classes
+
 `.ng-dropdown-panel.sdk-ng-select`
-Note the way ampersand work, that it will replace "&" with `.parent-class`, which becomes
+
+
+### Recollect, the way ampersand work, that it will replace "&" with `.parent-class`, which becomes
+
 `.ng-dropdown-panel.sdk-ng-select` in our generated CSS.
 
-The downside to repeating the .sdk-ng-select selector here is that mixin is made in a way where it does not know about the class .sdk-ng-select, instead, it is used inside it, and having the selector inside the mixin breaks this structure.
+The downside to repeating the `.sdk-ng-select` selector inside the mixing (as I was doing in the top of this page) is that mixin is made in a way where it does not know about the class `.sdk-ng-select`, instead, it is used inside it, like below. 
 
-So the correct version would be
+```css
+  .sdk-ng-select {
+  @include sdk-ng-select();
+}
+```
+
+And having the selector `.sdk-ng-select` inside the mixin breaks this structure.
 
+So the correct version would be
 
 ```css
   .ng-dropdown-panel,

CSS/Chain-Selector/multiple-class-selector-with-ampersand-2.md

@@ -4,4 +4,41 @@ Ampersand can also be used to **concatenate** additional class names (or IDs, et
 
 While nesting is the most popular feature of Sass it's also the most abused, as increased specificity means less performant CSS selectors and it's really easy to get carried away.
 
+When I build a site, I break out component styles into separate files where the file name generally matches the top-most selector.
+
+For example, I would have a file named _pagination.scss, that started with a top level selector of .pagination. From there, all pagination related rulesets are contained within this declaration block by using nesting and the ampersand. Among the other benefits of nesting that I've alluded to earlier, this means that when another developer has to work on a component, they only need to look in one place!
+
+Putting together what we've looked at so far, that pagination file could look something like this:
+
+```css
+.pagination {
+  &-number {
+    // & = .pagination-number
+    &.is-current {
+      border: 3px solid green;
+    }
+  }
+  // & = .pagination
+  &-prev {
+    background-color: red;
+    // & = .pagination-prev
+    &:after {
+      content: '<';
+    }
+  }
+}
+
+// which compiles to 
+
+.pagination-number.is-current {
+  border: 3px solid green;
+}
+.pagination-prev {
+  background-color: red;
+}
+.pagination-prev:after {
+  content: '<';
+}
+```
+
 [Source](https://bit.ly/37qH1qI)

CSS/SCSS/mixin-basics-2.md

@@ -2,8 +2,7 @@ The output from a mixin after including it in a class
 
 Say I have a @mixin
 
-@mixin mymixin {
-
+@mixin my-mixin {
 &.ng-select .ng-dropdown-panel .ng-dropdown-header {
     border-width: thin;
     padding: 0;
@@ -12,15 +11,17 @@ Say I have a @mixin
   }    
 }
 
-And in another css class I do 
+And in another css class I consume the above my-mixin as below
 
 ```css
 .ng-dropdown-panel.sdk-ng-select {
    @include mymixin()
 }
 ```
-Would output (i.e. the css it would select is below)
 
+The css it would compile to is below
+
+```css
 .ng-dropdown-panel.sdk-ng-select {
    &.ng-select .ng-dropdown-panel .ng-dropdown-header {
     border-width: thin;
@@ -29,6 +30,7 @@ Would output (i.e. the css it would select is below)
     border-bottom: 1px solid #ebebeb;
   }
 }
+```
 
 Which is the same as below