Feature: support & with @scope ...

[jasonkuhrt]

Currently &.signup-share-page will not attach to body.signup-page, but I think it should:

@scope body.signup-page

&.signup-share-page
    & > .container
        center-block(24)
        .finish
            margin-top 2
     #tweet-box
        margin-top 4

[jasonkuhrt]

I would like to note that this currently works:

@scope #site-navigation

> .inner
    padding-top 5px

But this does not:

@scope #site-navigation

& > .inner
    padding-top 5px

I actually prefer the former, but the latter needs to be supported.

I also find it ironic that in issue #191 you said that you wouldn't support stuff like the former, yet now that's the only one working... ha

[tj]

also a wont-add for now since one can get around it by just using the selector above @scope, we can revisit this later if need be

[jasonkuhrt]

Because there is an easy work-around I agree the priority is low, but this issue should remain open and be resolved.

Adding support for

  @scope body.work-page
  & > header
      position absolute

  // in the above case, & is optional, i.e. see next:

  > aside
      width auto

  &.deleted
      display none

  // and finally a rule directly applied to the @scope
  background-color red

turns @scope into a feature that acts like a regular selector, + its own special scoping behaviour on all subsequent selectors.

Pros in short:

1. simplify the language conceptually and on a day-to-day useage
2. reduce user's menton tax
3. easier to explain feature
4. easy language improvement/win
5. polish that shows we care, builds good will

[tj]

how would that really differ from just nesting under body.work-page

[tj]

i'll reopen as a feature req

[jasonkuhrt]

how would that really differ from just nesting under body.work-page

It seems to me that @scope should be sugar on top of that, providing the following benefits:

1. All the following selectors are automatically scoped == awesome when dealing with .styl files in a 1:1 fashion where 1 file is 1 page in a project (i.e. 1 file for about page, 1 file for home page, etc. this is a common pattern)
2. We visually reduce the indentation level
   1. It is easier to read fewer indentations
   2. It is easier to understand fewer indentations, because @scope provides a way to abstract the "common denominator" selector thus letting our brains read the differences between the selectors. This makes understanding the pertinent aspects of code-in-question easier, no?

[tj]

maybe a nicer alternative would be doing:

some selector here {
  @import 'something'
}

basically acting as a big mixin

[jasonkuhrt]

I like.

Now I am thinking:

Do I want that

• AND improved @scope syntax
  or
• INSTEAD of improved @scope syntax

I'll sleep on it.

[tj]

yeah tough call. IMO the import thing feels cleaner, it should be quite simple. do you know if sass supports this?

the one down-side is that if you want to render that file independently you cant really because then you lose your scope

[jasonkuhrt]

I'll check out SASS's behaviour tomorrow.

I feel like they don't do the exact same thing, as you say:

if you want to render that file independently you cant really because then you lose your scope

• @import great for more-dynamic scoping (i.e. you could use conditional logic to change scope, even)
• @scope great for simple scoping where the use-case is very clear, will not change, etc.

More tomorrow

[jasonkuhrt]

Use-cases for @import

conditional scoping

// Here goes, but I am not convinced yet, hopefully we'll get some better use-cases
article.blog-post
    if something is true
        @import "one-thing"
    else
        @import "another-thing"

Use-cases for @scope

1:1 concrete relationships between file <--> role

// common pattern: after framework styles, and project styles, comes "page" styles like this one:

// path,filename: "stylus/pages/artist-project.styl"

@scope body.project-page.artist-profile

.sidebar
     prop value
     ...

[tj]

I still dont get why you're nesting with @scope, how would:

@scope body.project-page.artist-profile
  foo
    bar: 'baz'

differ from:

body.project-page.artist-profile
  foo
    bar: 'baz'

the whole reason for adding @scope is so you dont have to nest

[jasonkuhrt]

@visionmedia fixed! Sorry about that, just a bad twitch I have when writing code too quickly.

[tj]

ah :D haha that makes more sense now, you did it above as well so i was confused haha

[jasonkuhrt]

@visionmedia Ahhh, so sorry haha. Fixed, too.