Sass @ at-root (1)

At the sassconf Conference, we were given the new features of sass3.3. These new features have a lot of significance, especially@at-rootCommand to make your code better clean.

Today, we will take a look@at-rootUsage specification of features.

 

Learn more@at-rootWe will first recall the sass nesting function. Let's look at an example. The following code is common in our CSS:

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

Return to sass and implement the above style. We can use sass nesting to accomplish this:

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

In addition to the above method, you can also use the connector&To achieve:

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

If simple implementation:

.foo .bar {    color: gray;}

You can also use another special method:

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

 

In our CSS, there is a naming method called Bem, such:

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

Imagine whether we can implement the above style code in sass in the following way:

#{&}_element{}

We will verify it as follows:

.block {    color: red;    #{&}__element {        color:blue;    }    #{&}--modifier {        color: orange;    }}

Sadly, the compiled CSS is not the code we want:

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

 

However, in less and stylus, bem class names can be well implemented. At this point, I was wondering, is there any such function in sass? Fortunately, sass3.3 added@at-rootFeatures:

.block {    color: red;    @at-root #{&}__element {        color: blue;    }    @at-root #{&}--modifier {        color:orange;    }}

@at-rootFeatures

The previous example tells us@at-rootWhat is it. He can tell sass that you don't want to nest selector. When using&Sass automatically nest a selector even if you do not want to nest it. However, we often do not want nested selectors, such as bem. Use@at-rootAnd#{&}It can reference parent (always reference parent selector in SASS) and interpolation, and can be nested to do other things. Next, we will explain through some examples@at-root.

@at-rootRunning Environment

@at-rootIs a new feature of sass. To be able to run normally@at-rootFirst, install the new sass version: As long as Ruby is installed on your computer, you can directly open the terminal command and run the following command to install sass:

$ gem install sass --pre 

If you cannot confirm whether the sass you have installed is the latest version, you can use:

$ sass -v

Version information displayed:

Sass 3.3.0.rc.2 (Maptastic Maple)

If not, use the following command to update sass:

$ gem update sass

NOTE: If your system is just upgraded to OS X 10.9 mavericks, You have to update command line tools again:

$ xcode-select --install

Restart your terminal command and re-execute the above command to get the latest sass version. Please note that this is an unpublished version because it is still under development, but it is not affected at all. You can also try some new features in sass.

"Ben frain also describes the new features in sass in the things I want from sass aren't the things I thought I wanted, such as source maps ."

@at-rootSpecifications

@at-rootHow the usage specification works. Here we will explain through some test cases:

Inline selector mode SCSs

.foo {    @at-root .bar {        color:gray;    }}

CSS

.bar {  color: gray; }

Test cases can be described,@at-rootThe Inline selector mode of will not cause any nesting of your selector, directly removing the Parent selection. Let's look at a case with a deeper nesting:

SCSs

.foo {    @at-root .bar {        color: gray;        @at-root button{            color:red;            @at-root span {                color: orange;            }        }    }}

CSS

.bar {  color: gray; }button {  color: red; }span {  color: orange; }

Nested in SCSs, use@at-rootIn the inline selector mode, the compiled CSS does not have any nesting, making the code simpler. Return to SCSs nesting. If you do not use@at-rootThe Inline selector mode is nested layer by layer according to the hierarchical relationship of the Code. In the preceding example@at-rootAfter removing the code, I will compile the following CSS code (I have learned SASS), which is not surprising at all.

.foo .bar {  color: gray; }.foo .bar button {  color: red; }.foo .bar button span {  color: orange; }