美文网首页
Sass嵌套

Sass嵌套

作者: 混吃等死小前端 | 来源:发表于2020-02-13 15:39 被阅读0次
    • 选择器嵌套

    <header>
      <nav>
        <a href=“##”><span>Home<span></a>
        <a href=“##”>About</a>
        <a href=“##”>Blog</a>
      </nav>
    <header>
    
    //.scss
    nav {
      a {
        color: red;
    
        span{
          color: yellow;
        }
    
        header & { //& 符号是取父值,这里为 nav a
          color:green;
        }
      }  
    }
    
    //编译后.css
    nav a {
      color: red;
    }
    nav a span {
        color: yellow;
    }
    header nav a {
        color: #e91881;
    }
    
    • css属性嵌套xx:

    CSS 有一些属性前缀相同,只是后缀不一样,比如:border-top/border-right

    <nav class="box">
        <a href=“##”><span>Home</span></a>
        <a href=“##”>About</a>
        <a href=“##”>Blog</a>
    </nav>
    
    //.scss
    .box{
        border: {
            top: 1px solid #ccc;
            bottom: 1px solid #ccc;
        }
    }
    
    //.css
    .box {
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
    }
    
    • 伪类嵌套&:/&::

    //.scss
    .clearfix{
        &::before,
        &::after{
            content:"";
            display: block;
        }
        &::after{
            clear:both;
            overflow: hidden;
        }
    }
    
    //.css
    .clearfix::before, .clearfix::after {
      content: "";
      display: block;
    }
    .clearfix::after {
      clear: both;
      overflow: hidden; 
    }
    

    相关文章

      网友评论

          本文标题:Sass嵌套

          本文链接:https://www.haomeiwen.com/subject/dmokfhtx.html