zoukankan      html  css  js  c++  java
  • @at-root和#{&}结合

    Sass有脚本模式#{},他和&不同之处是,&只用作选择器,它只能出现在一个复合的开始选择器,类似于一个类型选择器,如a或者h1。但#{}他表示的是一个插值,它可以用在任何地方。同样的,当@at-root#{&}一起使用时,可以给我们的开发带来极大的方便与优势。例如:

    SCSS
    .foo {
        @at-root .bar #{&} {
            color: gray;
        }
    }
    CSS
    .bar .foo {
      color: gray; 
    }

    可能会让你感到意外与失望,因为你从上面的代码之中并没有看到他有特别之处。或者说能帮你减少什么?也不能帮你优化什么?不过不用太心急,接着往下看。

    先快速回忆一下BEM,如:

    .block {} //Block
    .block__element{} //Element
    .block--modifier{} //Modifier

    此时使用@at-root就能尽显其英雄本色:

    SCSS
    .block {
        color:red;
    
        @at-root #{&}__element{
            color:green;
        }
    
        @at-root #{&}--modifier {
            color:blue;
        }
    }
    CSS
    .block {
      color: red; 
    }
    .block__element {
      color: green; 
    }
    .block--modifier {
      color: blue; 
    }

    到了这里,你是否体会到@at-root在BEM中是具有多大的优势了吧。不急,后面将来个实例,让你一览其整个过程。

  • 相关阅读:
    Android SDCard操作(文件读写,容量计算)
    weibo4
    weibo5
    android源码结构分析
    后台退出事件
    获取服务器和客户端信息
    vs2008破解升级
    禁止所有蜘蛛
    页面的回发与回传
    显示上一条新闻 下一条新闻
  • 原文地址:https://www.cnblogs.com/aobingyan/p/3809093.html
Copyright © 2011-2022 走看看