Implement @at-root selectors

[Ne-Ne]

I have noticed that when using:

@at-root

With this code:

@at-root{
    .list-date{
        float: left;
        display: block;
        width: 90px;
        height: 80px;
        margin-right:25px;
        color:white;
        background:url(/images/list-date-bg.svg) center no-repeat;

            .no-svg &{
                background-images:url(/images/list-date-bg.png);
            }

            [class^='date-']{
                display: block;
                width: 100%;
                text-align: center;
            }

            .date-day{
                margin-top:6px;
                @include font-size(5.4,5.4);
            }

            .date-month{
                @include font-size(1.5,1.5);
            }
    }
}

The code gets compiled correctly but Autoprefixer breaks, however this does not happen when running Sass 3.3.5. I am currently using Codekit 2.0.4

Mixin Above:

@mixin font-size($size:1.6, $line: $size * 1.5){
    line-height: ($line * 10) + px;
    font-size:   ($size * 10) + px;
}

Can someone double check this.

[nschonni]

@at-root is 3.3 syntax that libsass does not yet support

[Ne-Ne]

Thanks for the reply @nschonni. Is there any idea of what version Libsass is currently at?

Does anyone have a linky for the thread ref above....

[thasmo]

Why was this closed? Won't it be implemented? @akhleung, do you have any insights on this? Thanks a lot!

[akhleung]

We do want to implement it eventually. I would have been fine with leaving this issue open. In fact, I guess I'll re-open it.

[thasmo]

@akhleung, thanks for the update! BEM will be a lot easier to write with the at-root selector.

[emagnier]

I have created a small bounty on this issue.
I use the BEM syntax on many of my projects, so I'd love to see this feature implemented in Libsass.

[thasmo]

Would be awesome!

[mikeebee]

Do we know if support for this has been added with the release of version 3.0?

[mgol]

@mikeebee It wasn't. The milestone is set to 3.1.

[mikeebee]

@mzgol ok, thanks!

[xzyfer]

A big chunk of this is related to #185.

[mgol]

I bumped the bounty but it seems the plugin doesn't work as it still shows the previous amount.

[xzyfer]

Specs added sass/sass-spec#175

[wintercounter]

SassMeister was using 3.1 beta for a little bit and tried it.

Test Code:

.outer {
  content: 'outer';

  @at-root {
    .inner {
      content: 'inner';
    }
  }
}

Wrong Output:

.outer {
  content: 'outer';
  @at-root {
    .inner {
      content: 'inner'; } }
 }

Expected:

.outer {
  content: 'outer';
}
.inner {
  content: 'inner';
}

[xzyfer]

Yep. I've started work in this today. It'll be in 3.2.
On 2 Jan 2015 22:28, "wintercounter" notifications@github.com wrote:

SassMeister was using 3.1 beta for a little bit and tried it.

Test Code:

.outer {
content: 'outer';

@at-root {
.inner {
content: 'inner';
}
}
}

Wrong Output:

.outer {
content: 'outer';
@at-root {
.inner {
content: 'inner'; } }
}

Expected:

.outer {
content: 'outer';
}.inner {
content: 'inner';
}

—
Reply to this email directly or view it on GitHub
#353 (comment).

[wintercounter]

Awesome, keep up the good work! Libsass is a holy grail for me because it's performance. I still achieved 10 sec compilation time because of the huge codebase and many (not kidding, thousands) of map-get. (I know it has improvements in 3.1 but node-sass has still only 3.0). With the Ruby compiler this was around 40-50 sec, you can imagine how funny is that to work with :D

[KittyGiraudel]

All tests for @at-root are now written, including nifty ones. If we need more, I'll add more. Some of them still need to be merged though (sass/sass-spec#217).

[xzyfer]

This is implemented on master. It'll be in 3.2.

[emagnier]

👍 Thanks a lot!

[dawidk92]

+1

[sp90]

So is this usable now?

[xzyfer]

This will be in the next version on Libsass.

[ciampo]

Any update on this?

[mgol]

@ciampo This works in latest libsass, do you experience any problems?

[ciampo]

@mzgol Having some issues while compiling the sass through gulp-sass, but I guess the problem is the gulp-sass not using an updated version of node-sass

[mgol]

@ciampo From what I see gulp-sass 2.0.1 depends on node-sass 3.2.0 i.e. the latest. It should work unless you use an outdated gulp-sass.

[ciampo]

@mzgol you're actually right, just realised we were using an outdated version of gulp-sass - all fixed. Sorry and thanks!