如何使用与号 (&) 将父级与 SASS 中的类型选择器结合起来？

与号或“&”是 SASS 的一个强大功能。它通过使用嵌套语句增强了代码的可读性，这比传统的 CSS 具有优势。我们可以多次嵌套 css 类，但大多数情况下不需要。

句法：

parent {
    some_styling;
   
    & .child_element {
        some_stylings;
    }
      
    /* :hover, :active, :visited etc.. */
    &:pseudo_selector {
        some_stylings;
    }
}

我们可以通过使用＆符号(&)符号嵌套子元素来使用 CSS 的任何属性。

示例 1： SASS/SCSS：

.head {
    font-family: 'Courier New', Courier, monospace;
    text-align: center;
  
    & .tagline {
        text-decoration: underline;
        background-color: rgb(29, 202, 29);
    }
  
    & .paragraph {
        font-size: 20px;
        color: rgb(45, 204, 204);
  
        & .read-more{
            color: rgb(113, 129, 129);
            font-size: smaller;
            border: 2px solid black;
        }
    }
}

编译的CSS：

CSS

.head {
  font-family: 'Courier New', Courier, monospace;
  text-align: center;
}
  
.head .tagline {
  text-decoration: underline;
  background-color: #1dca1d;
}
  
.head .paragraph {
  font-size: 20px;
  color: #2dcccc;
}
  
.head .paragraph .read-more {
  color: #718181;
  font-size: smaller;
  border: 2px solid black;
}

示例 2(使用伪选择器)SASS / SCSS：

SASS

a {
    text-decoration: none;
      
    &:hover {
        background-color: rgb(63, 168, 194);
        text-decoration: underline;
        font-weight: bold;
    }
  
    &:visited {
        color: rgb(157, 175, 53);
    }
  
    &:active {
        color: rgb(77, 77, 77);
    }
}

编译的CSS：

CSS

a {
  text-decoration: none;
}
  
a:hover {
  background-color: #3fa8c2;
  text-decoration: underline;
  font-weight: bold;
}
  
a:visited {
  color: #9daf35;
}
  
  
a:active {
  color: #4d4d4d;
}