Modify the current selector &: https://instyle-css.salsitasoft.com
CSS
Latest commit ba40cc2 Jan 31, 2017 @mystrdat mystrdat 1.6.3
Permalink
Failed to load latest commit information.
src 1.6.3 Feb 1, 2017
test rn dir Jun 7, 2016
.gitignore
README.md 1.6.3 Feb 1, 2017
bower.json bower file May 30, 2016
package.json

README.md

inStyle

inStyle is a CSS authoring tool to append, insert or replace elements in the current selector (&), giving you an intuitive way to style the current element based on parent variants without repeating complex queries. Enables fully nested CSS writing styles and wealth of one's soul.

Article: https://css-tricks.com/instyle-current-selector-sass/

Currently available for SASS 3.4+ and PostCSS.

What's new in 1.6.3:

  • libsass 3.4+ compatibility (thanks andrezrv)

1) Append

Appending a state to an existing parent is done with the < special character. Each additional use of this character targets a higher parent (works the same for all features).

.my-app
  display: block

  .widget
    border-radius: 5px

    &.blue
      color: blue

    .isIE6 &
      background-image: url("fake-borders.png")

    +in('<.expanded')
      color: red // .my-app.expanded .widget { };

    @media (max-width: 768px)
      float: left

You can also explicitly mention the compound selector, which is useful for filtering out undesired multiselector parents. May also be preferential for readability.

ul, ol
  list-style: none

  li
    display: inline-block

    a
      text-decoration: underline

      +in('ol.links')
        color: orange // ol.links li a { };

2) Insert

Inserting a new selector at a certain position above the current element is done with the ^ special character.

.container
  display: flex

  div
    flex: 1

    span
      color: red

      +in('^.upside-down')
        transform: rotate(180deg) // .container div .upside-down span { };

      +in('^^[class^=foo]')
        content: 'bar' // .container [class^=foo] div span { };
table
  table-layout: fixed

  thead
    font-weight: normal

  tr
    height: 30px

    +in('^thead')
      height: 50px // table thead tr { };

3) Replace

Replacing a certain selector is done using the @ character. Multiselectors that become duplicit due to the replacement are removed from the rendered selector.

ul, ol
  list-style: none

  li
    display: inline-block

    a
      text-decoration: underline

      +in('@.cool')
        background: pink // ul .cool a, ol .cool a { };

      +in('@@.special-list')
        color: orange // .special-list li a { };

Features

  • Infinitely nestable
  • Any amount of modifications separated by a space
  • Accepts multiselectors separated by a comma
  • Validates all CSS input by SASS internal selector-parse()
  • Order of modifications makes no difference, RTL priority

Options

Change any of the special characters to your preference by setting the following global variables:

$__inTagAppend: '<'
$__inTagInsert: '^'
$__inTagReplace: '@'

Installation

@import 'node_modules/inStyle/src/instyle' in your SASS/SCSS stylesheet.

npm install inStyle
bower install inStyle

Tests

npm install
npm run test

Roadmap

  • Stylus port (blocked by #1703)