Skip to content

Instantly share code, notes, and snippets.

@calvinjuarez
Last active August 29, 2015 14:20
Show Gist options
  • Save calvinjuarez/aa687d2f6294331ccd8b to your computer and use it in GitHub Desktop.
Save calvinjuarez/aa687d2f6294331ccd8b to your computer and use it in GitHub Desktop.
Other symbols that Less property accessors could use, if `$` is nixed.

I think there are two questions to answer:

  1. Does the anticipated frequency of use for the Selector Function merit using a symbol over a more semantic, explicit function name?
  2. Are there any compelling arguments for either the Selector Function or the Property Accessor to use any other particular symbol, or for either to use $ specifically?

In @lukeapage's comment, he mentions that there are open issues about assigning CSS selectors to variables, which I think is in reference to #1421 & the issues referencing & referenced by it. I think that "assigning CSS selectors to variables" is likely the primary use case for a "parse this as a selector" function.

Yeah, going along with what @matthew-dean's saying, it was my understanding that the selector function was meant to allow assigning CSS selectors to variables (essentially notifying the parser that this string/list should be treated as a selector/selector list, rather than as a simple string/list).

As such, does the selector function have to be a symbol, or would something more explicit and semantic, like sel(.parent .child, .this, .that) (or selector()), be a better option.

If so, are there other symbols (or syntaxes) that would be possible for either proposal?

Either of these should be as safe as $:

@prop: ^{#ns prop};
// OR
@sel: ^(.selector);
@prop: |{#ns prop};
// OR
@sel: |(.selector);

Some more conceptual & off-the-wall (read "ridiculous") ideas:

@prop: :{#ns prop}; // borrows the `:` from `property: value;`; interpolates weird
@prop: _{#ns prop}; // just another character; interpolates weird
@sel: #(.selector);
// OR
@sel: .(.selector);
@sel-1: <.selector>; // require `<` as first character to be the first char, i.e.:
@sel-2: <@sel-1, .another .one>; // → selector list ['.selector', '.another .one']
@list: .parent .child, .this, .that;
@sel-3: <@list>; // → ['.parent .child', '.this', '.that'];
@sel-4: <
  .could .be,
  #written,
  .like > a.normal,
  .selector[list]
>;

I've got a lot of questions about what you selector variables are meant to do. Are they just strings that are parsed as selectors? Could you call a mixin with @sel() (that is, do they return a selector list or the ruleset(s) associated with any selectors)?

If people are in love with $(.selector) for property parsing, there are a lot of other symbols that Less and CSS haven't really used...

.selector {
  this: ?{prop};
  that: ?{#ns prop};
  this: _{prop};
  that: _{#ns prop};

... or there are others that could possibly be considered ...

  this: %{prop}; // conflict with "100%".
  that: %{#ns prop};
  this: :{prop};
  that: :{#ns prop};
  // `.selector:{prop}` looks like a pseudo- selector
  this: ~{prop}; // ambiguity w/ `~""`…
  that: ~{#ns prop};
  // Note that CSS attribute selectors use `~=`: `.selector[attribute~=~{prop}]`
  this: ^{prop};
  that: ^{#ns prop};
  // Note that CSS attribute selectors use `^=`: `.selector[attribute^=^{prop}]`
  this: |{prop};
  that: |{#ns prop};
  // Note that CSS attribute selectors use `|=`: `.selector[attribute|=|{prop}]`
  this: ={prop}; // semantic disconnect
  that: ={#ns prop};
  // In an attribute selector this would look like `.selector[attribute=={prop}]`
}

... but almost everything has big conflicts.

For reference:

  • All easy-to-access special characters (US keyboard): ~`!@#$%^&*()_-+={}[]|\:;"',.<>?/
  • Delimiters: (){}[]
  • Less math symbols: *-+/
  • Less list sparators: ;,
  • Less comparison operators: =<>
  • Symbols that are pretty well spoken for by CSS or Less: ~!@#%&:"'.
  • The Question mark: ? (see less/less.js#1894)
  • Attribute selector symbols not included elsewhere: $^| (see Attribute selectors on MDN)
  • Symbols that are definitely a stretch: `_\
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment