Sass @at-root

特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)

SassConf大会上,给我们传递了Sass3.3的新特性。这些新特性有很多意义,特别是@at-root指令,这让你的代码会得更佳清洁。今天我们主要一起来了解Sass中的@at-root特性的使用规范。

在具体了解@at-root规范之间,我们先来回忆Sass的嵌套功能。简单的来看一个示例。在我们的CSS中常见有这样的一段代码:

.foo {
    color:green;
}
.foo .bar {
    color:gray;
}

回到Sass中,实现上面的样式,我们可以使用Sass的嵌套来完成:

.foo {
    color: green;
    .bar {
        color: gray;
    }
}

除了上面的方法之外,还可以通过连体符&来实现:

.foo {
    color: green;

    & .bar {
        color: gray;
    }
}

如若简单实现:

.foo .bar {
    color: gray;
}

还可以使用另外一种特殊方式来实现:

.bar {
    .foo & {
        color: gray;
    }
}

在我们CSS中有一种命名方式是BEM,如:

.block {}
.block__element{}
.block--modifier{}

试想我们在Sass中是否可以通过下面的方式来实现上面样式代码:

#{&}_element{}

不仿我们来验证一下:

.block {
    color: red;

    #{&}__element {
        color:blue;
    }

    #{&}--modifier {
        color: orange;
    }
}

悲催的是,编译出来的CSS并不是我们想要的代码:

.block {
  color: red; }
  .block .block__element {
    color: blue; }
  .block .block--modifier {
    color: orange; }

但在LESS和Stylus中,能很好的实现BEM类名的形式。此时在想,在Sass中有没有这样的功能呢?值得幸运的是,在Sass3.3中新增加了@at-root特性,能实现上面BEM的特性:

.block {
    color: red;

    @at-root #{&}__element {
        color: blue;
    }

    @at-root #{&}--modifier {
        color:orange;
    }
}

@at-root特性

前而的例子告诉我们@at-root是什么。通过他可以告诉Sass,你不想嵌套选择器。当使用&选择器时,就算你不想嵌套选择器,Sass也会自动嵌套。但往往很多时候,我们是不想要嵌套选择器,例如BEM。使用@at-root#{&}可以引用父(在Sass中总是引用父选择器)和插值,可以嵌套,做一些其他的事情。接下来,我们通过一些实例来说明@at-root的特性。

@at-root运行环境

@at-root是Sass的新特性。要想能正常的运行@at-root,首先需要先安装Sass的全新版本:只要确保你的电脑上已经安装了Ruby,你可以直接打开终端命令运行下面的命令安装Sass:

$ gem install sass --pre 

如果你无法确认,你以前安装的Sass是不是最新版本,你可以通过:

$ sass -v

显示的版本信息:

Sass 3.3.0.rc.2 (Maptastic Maple)

如果不是,你可以使用下面的命令更新Sass:

$ gem update sass

注意,如果你的系统是刚升级到OS X 10.9 Mavericks,你得重新更新Command Line Tools:

$ xcode-select --install

重启您的终端命令,重新执行上面的命令就可以获取最新版本的Sass。请注意,这是一个未发表的版本,因为它还在开发中,但现在玩一点都不受影响,还可以体验Sass中新增加的一些特性

Ben FrainThe things I want from Sass aren’t the things I thought I wanted一文中也详细的描述了Sass中新增的特性,如:Source Maps

@at-root规范

@at-root使用规范是如何工作,这里我们通过一些测试用例来做说明:

内联选择器模式

SCSS
剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/preprocessor/Sass-3-3-new-feature-at-root-bem.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部