Implement @at-root selectors [$30] #353

Closed
Ne-Ne opened this Issue May 6, 2014 · 27 comments

Projects

None yet
@Ne-Ne
Ne-Ne commented May 6, 2014 edited

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.

--- Did you help close this issue? Go claim the **[$30 bounty](https://www.bountysource.com/issues/2010662-implement-at-root-selectors?utm_campaign=plugin&utm_content=tracker%2F283068&utm_medium=issues&utm_source=github)** on [Bountysource](https://www.bountysource.com/?utm_campaign=plugin&utm_content=tracker%2F283068&utm_medium=issues&utm_source=github).
@nschonni
Contributor
nschonni commented May 6, 2014

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

@Ne-Ne
Ne-Ne commented May 6, 2014

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....

@akhleung akhleung changed the title from Autoprefixer Bug: Possible Compiling Bug to Implement @at-root selectors Jun 6, 2014
@Ne-Ne Ne-Ne closed this Jun 9, 2014
@thasmo
thasmo commented Aug 22, 2014

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.

@akhleung akhleung reopened this Aug 22, 2014
@thasmo
thasmo commented Aug 22, 2014

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

@hcatlin hcatlin added the feature label Oct 4, 2014
@hcatlin hcatlin added this to the 3.1 milestone Oct 4, 2014
@lunelson lunelson referenced this issue in sass/sass-spec Oct 6, 2014
Merged

Add test for @at-root feature #59

@hcatlin hcatlin changed the title from Implement @at-root selectors to Implement @at-root selectors [$15] Oct 7, 2014
@hcatlin hcatlin added the bounty label Oct 7, 2014
@emagnier
emagnier commented Oct 7, 2014

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
thasmo commented Oct 7, 2014

Would be awesome!

@mikeebee

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

@mgol
mgol commented Oct 20, 2014

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

@mikeebee

@mzgol ok, thanks!

@dimitrinicolas dimitrinicolas referenced this issue in sass/node-sass Dec 4, 2014
Closed

@at-root don't work #559

@xzyfer xzyfer modified the milestone: 3.1, 3.2 Dec 21, 2014
@xzyfer xzyfer referenced this issue Dec 22, 2014
Closed

Time for a 3.1 release! #697

12 of 12 tasks complete
@xzyfer
Contributor
xzyfer commented Dec 22, 2014

A big chunk of this is related to #185.

@mgol
mgol commented Dec 22, 2014

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

@xzyfer xzyfer self-assigned this Jan 2, 2015
@xzyfer xzyfer added the test written label Jan 2, 2015
@xzyfer
Contributor
xzyfer commented Jan 2, 2015

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
Contributor
xzyfer commented Jan 2, 2015

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

@HugoGiraudel

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 xzyfer closed this in #799 Jan 7, 2015
@xzyfer
Contributor
xzyfer commented Jan 7, 2015

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

@emagnier
emagnier commented Jan 7, 2015

👍 Thanks a lot!

@dawidk92

+1

@sp90
sp90 commented Feb 12, 2015

So is this usable now?

@xzyfer
Contributor
xzyfer commented Feb 12, 2015

This will be in the next version on Libsass.

@hcatlin hcatlin changed the title from Implement @at-root selectors [$15] to Implement @at-root selectors [$30] Feb 21, 2015
@fspoettel fspoettel referenced this issue in fspoettel/hagrid Apr 1, 2015
Closed

Libsass compatible? #18

@ciampo
ciampo commented Jun 16, 2015

Any update on this?

@mgol
mgol commented Jun 16, 2015

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

@ciampo
ciampo commented Jun 17, 2015

@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
mgol commented Jun 17, 2015

@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
ciampo commented Jun 17, 2015

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

@derwaldgeist derwaldgeist referenced this issue in jasonsanjose/brackets-sass Jul 8, 2015
Closed

Update LibSass to 3.2 / node-sass 3 #123

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment