Parent referencing using ampersand (&) in Sass

Turns out reference selectors, and nesting in general, is a debatable paradigm to use. But for styles that are closely related and/or act on the same html elements, it can be a clever way to DRY up your code and keep things tidy. Hover effects are a great example. But I think the best one I've used so far is with visible and hidden transitions in my web apps.

Sass reference selector syntax 


.hidden {
  animation-timing-function: cubic-bezier(0.1, 0.8, 0.1, 1.000);
  transition: opacity 500ms ease-in-out;
  &-true {
    @extend .hidden;
    opacity: 0;
  }
  &-false {
    @extend .hidden;
    opacity: 1;
  }
}

Compiles down to CSS 

.hidden, .hidden-true, .hidden-false {
  animation-timing-function: cubic-bezier(0.1, 0.8, 0.1, 1);
  transition: opacity 500ms ease-in-out;
}
.hidden-true {
  opacity: 0;
}
.hidden-false {
  opacity: 1;
}

Comments

Post a Comment

Popular posts from this blog

Contrasting var and ES6s new declarations: let and const

let and const are two new declaration types in JavaScript, which have the ability to completely replace var declaration. To use them effectively, and understand why they can be a direct replacement, it's important to understand how they work. var is function scoped. It is hoisted and initialized at the top var , regardless of where it is assigned, will become declared and initialized at the beginning of the function. This means that any variable you declare will be available everywhere inside the function. This process is referred to as hoisting. Hoisted variables with var are declared and initialized at the top of the function, but have no value All variables that are declared and initialized with var are initialized as undefined . They have no value until you reach the line of code that assigns it a value. const undefinedConsoleLog = _ => { console.log(sadlyUndefined) //undefined var sadlyUndefined = 'declared by var, und...
Read more

Unit testable components pt.3: Testing components

My approach to component testing There are multiple resources that show how to test components. When you read between the lines, they are actually describing their philosophy on how a component should be tested. My tests are basic and practical because my components are dumb My components have the following properties No api calls Small encapsulated components Minimal Redux actions As a consequence, my tests have the following principles Shallow mount component directly. Ignore Redux's connect higher order function (HOF) in test ...
Read more