SASS嵌套用法示例

SASS嵌套使我们的工作非常高效, 我们不必一次又一次地重复外部选择器。我们可以按照嵌套选择器在HTML文件中出现的顺序编写它们(即"父-外部选择器"和"子-内部选择器"表单)。 SASS将自动执行合并工作。

请参阅以下示例：

SASS文件：

ul {
    list-style-type: none;

    li {
        display: inline-block;
        
        a {
            text-decoration: none;
            display: inline-block;
            padding: 10px 15px; 
            color: blue;
        }
    }
}

编译的CSS文件：

ul {
    list-style-type: none;
}

ul li {
   display: inline-block;
}

ul li a {
    text-decoration: none;
    display: inline-block;
    padding: 10px 15px;
    color: blue;
}

SASS还允许嵌套具有不同组合器的选择器。你可以将组合器放在内部选择器的开头或外部选择器的末尾或两个的中间。

请参阅以下示例：

SASS文件：

ul { 
    + li {
        display: inline-block;
    }
}

li {
    > {
        a {
            text-decoration: none;
        }   
    }
}

p ~ {
    span {
        text-decoration-line: underline;
        text-decoration-style: double;
    }
}

编译的CSS文件：

ul + li {
    display: inline-block;
}
  
li > a {
    text-decoration: none;
}
  
p ~ span {
    text-decoration-line: underline;
    text-decoration-style: double;
}

---