“CSS is a compile target”

[core-date-range] [core-morph-popup] .content-box .footer .btn.close.disabled,
[core-date-range] [core-morph-popup] .content-box .footer .btn.close.disabled.active,
[core-date-range] [core-morph-popup] .content-box .footer .btn.close.disabled.focus,
[core-date-range] [core-morph-popup] .content-box .footer .btn.close.disabled:active,
[core-date-range] [core-morph-popup] .content-box .footer .btn.close.disabled:focus,
[core-date-range] [core-morph-popup] .content-box .footer .btn.close.disabled:hover,
[core-date-range] [core-morph-popup] .content-box .footer .btn.close[disabled],
[core-date-range] [core-morph-popup] .content-box .footer .btn.close[disabled].active,
[core-date-range] [core-morph-popup] .content-box .footer .btn.close[disabled].focus,
[core-date-range] [core-morph-popup] .content-box .footer .btn.close[disabled]:active,
[core-date-range] [core-morph-popup] .content-box .footer .btn.close[disabled]:focus,
[core-date-range] [core-morph-popup] .content-box .footer .btn.close[disabled]:hover,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close.disabled,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close.disabled.active,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close.disabled.focus,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close.disabled:active,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close.disabled:focus,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close.disabled:hover,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close[disabled],
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close[disabled].active,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close[disabled].focus,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close[disabled]:active,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close[disabled]:focus,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close[disabled]:hover,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close.disabled,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close.disabled.active,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close.disabled.focus,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close.disabled:active,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close.disabled:focus,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close.disabled:hover,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close[disabled],
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close[disabled].active,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close[disabled].focus,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close[disabled]:active,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close[disabled]:focus,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close[disabled]:hover,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close.disabled,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close.disabled.active,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close.disabled.focus,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close.disabled:active,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close.disabled:focus,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close.disabled:hover,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close[disabled],
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close[disabled].active,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close[disabled].focus,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close[disabled]:active,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close[disabled]:focus,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close[disabled]:hover,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close.disabled,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close.disabled.active,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close.disabled.focus,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close.disabled:active,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close.disabled:focus,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close.disabled:hover,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close[disabled],
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close[disabled].active,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close[disabled].focus,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close[disabled]:active,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close[disabled]:focus,
[core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close[disabled]:hover,
[core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close.disabled,
[core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close.disabled.active,
[core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close.disabled.focus,
[core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close.disabled:active,
[core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close.disabled:focus,
[core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close.disabled:hover,
[core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close[disabled],
[core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close[disabled].active,
[core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close[disabled].focus,
[core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close[disabled]:active,
[core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close[disabled]:focus,
[core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close[disabled]:hover,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close.disabled,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close.disabled.active,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close.disabled.focus,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close.disabled:active,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close.disabled:focus,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close.disabled:hover,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close[disabled],
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close[disabled].active,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close[disabled].focus,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close[disabled]:active,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close[disabled]:focus,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close[disabled]:hover,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close.disabled,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close.disabled.active,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close.disabled.focus,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close.disabled:active,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close.disabled:focus,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close.disabled:hover,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close[disabled],
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close[disabled].active,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close[disabled].focus,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close[disabled]:active,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close[disabled]:focus,
[core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close[disabled]:hover,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close.disabled,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close.disabled.active,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close.disabled.focus,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close.disabled:active,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close.disabled:focus,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close.disabled:hover,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close[disabled],
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close[disabled].active,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close[disabled].focus,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close[disabled]:active,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close[disabled]:focus,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close[disabled]:hover,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close.disabled,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close.disabled.active,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close.disabled.focus,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close.disabled:active,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close.disabled:focus,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close.disabled:hover,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close[disabled],
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close[disabled].active,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close[disabled].focus,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close[disabled]:active,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close[disabled]:focus,
[core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close[disabled]:hover,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .btn.close,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .btn.close.active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .btn.close.focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .btn.close:active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .btn.close:focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .btn.close:hover,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close.active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close.focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close:active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close:focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-facebook.close:hover,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close.active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close.focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close:active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close:focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-google.close:hover,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close.active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close.focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close:active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close:focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-login.close:hover,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close.active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close.focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close:active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close:focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .col-signup .signup .btn-signup.close:hover,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close.active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close.focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close:active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close:focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .frm-no-account .btn-go.close:hover,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close.active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close.focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close:active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close:focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-close.close:hover,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close.active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close.focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close:active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close:focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer .nav-bar .menu-search li .btn-search.close:hover,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close.active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close.focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close:active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close:focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .first-half-btn.close:hover,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close.active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close.focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close:active,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close:focus,
fieldset[disabled] [core-date-range] [core-morph-popup] .content-box .footer div[chart-view] .tablet-switch .second-half-btn.close:hover {
    background-color: #fff;
}

		

Опасные моменты с препроцессорами

• extend коварный, провоцирует дублирование
• variables хитрые и провоцируют баги с коллизиями имен
• mixin тоже коварный и провоцирует дублирование свойств
• nesting провоцирует слишком специфичные селекторы
• нужны source maps
• не программируйте на CSS

Правда, не надо программировать на CSS

			
 @mixin check($slides) {
   @for $i from 1 through $slides {
     input[type=radio]:nth-of-type(#{$i}):checked ~ .slider-wrapper {
       .slide:nth-of-type(#{$i}) {
         // transform: translate3d(0,0,0);
         opacity: 1;
         .caption {
           opacity: 1;
           transform: translate3d(0, 0, 0);
         }
       }
       @include slectIndexLeft($i, $slides);
       @include slectIndexRight($i, $slides);
     }
   }
 }

 @mixin slectIndexLeft($slide, $numOfSlides) {
   $num: 1;
   @if $slide > 1 {
     $num: $slide - 1;
   }
   @else if $slide==1 {
     $num: $numOfSlides;
   }
   .slider-controls.left {
     label[for] {
       z-index: -1;
       &:nth-of-type(#{$num}) {
         z-index: 10;
       }
     }
   }
 }

 @mixin slectIndexRight($slide, $numOfSlides) {
   $num: 1;
   @if $slide < $numOfSlides {
     $num: $slide + 1;
   }
   @else if $slide==$numOfSlides {
     $num: 1;
   }
   .slider-controls.right {
     label[for] {
       z-index: -1;
       &:nth-of-type(#{$num}) {
         z-index: 10;
       }
     }
   }
 }

 @mixin slider($numOfSlides: 3, $sliderHeight: 250px, $animation: cubic-bezier(.17, .67, .35, .89)) {
   position: relative;
   @include check($numOfSlides);
   input[type=radio] {
     display: none;
   }
   .slider-controls {
     position: absolute;
     width: 40px;
     height: 63px;
     top: 45%;
     taransform: trnaslateY(-50%);
     opacity: 0;
     transform: translate3d(0, -100%, 0);
     will-change: opacity, transform;
     transition: .3s $animation;
     &.right {
       right: 15px;
       background: url('../img/arrow-right.svg') 50% 50% no-repeat;
     }
     &.left {
       left: 15px;
       background: url('../img/arrow-left.svg') 50% 50% no-repeat;
     }
     label[for] {
       position: absolute;
       display: block;
       width: 100%;
       cursor: pointer;
       height: 100%;
       top: 0;
       left: 0;
     }
   }
   .slider-wrapper {
     height: $sliderHeight;
     width: 100%;
     position: relative;
     overflow: hidden;
     &:hover {
       .slider-controls {
         opacity: 1;
         transform: translate3d(0, -50%, 0);
       }
     }
     .slide {
       transition: all .3s $animation;
       will-change: transform, opacity;
       position: absolute;
       border-radius: 4px;
       width: 100%;
       top: 0;
       left: 0;
       height: inherit;
       overflow: hidden;
       border-radius: 4px;
       // transform: translate3d(-100%, 0,0);
       opacity: 0;
       &:after {
         position: absolute;
         z-index: 2;
         top: 0;
         left: 0;
         width: 100%;
         height: inherit;
         content: '';
         background: linear-gradient(0deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 100%);
       }
       img {
         display: block;
         height: auto;
         min-width: 100%;
         min-height: 100%;
       }
       .caption {
         position: absolute;
         z-index: 3;
         opacity: 0;
         will-change: opacity, transform;
         transition: 1s $animation;
         // top: 50%;
         width: 100%;
         bottom: 0;
         padding: 20px;
         padding-bottom: 16px;
         label {
           background: $purple;
           display: inline-block;
           border-radius: 25px;
           color: white;
           padding: 0 13px;
           margin-bottom: 16px;
           text-transform: uppercase;
           font: 400 10px/19px $Montserrat;
           letter-spacing: 3px;
         }
         h3 {
           font: bold 24px $Montserrat;
           color: white;
           text-align: left;
           margin-bottom: 11px;
         }
         p {
           font: 300 14px/17px $Roboto;
           color: $grey;
           text-align: left;
         }
         &.left {
           transform: translate3d(-150%, -50%, 0);
         }
         &.right {
           transform: translate3d(150%, -50%, 0);
         }
         &.center {
           transform: translate3d(0, 150%, 0);
         }
         // h1 {
         //   color: #fff;
         //   margin: 0;
         //   // font: bold 28px @font-main;
         //   text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
         // }
       }
     }
   }
 }

 // slide selection by radio check

			
		

CSS нужно популяризировать

Не как compile target, а как инструмент.

Пробежимся по вкусняшкам

• CSS Shapes, CSS Masking
• CSS Image Values and Replaced Content
Module Level 4
• CSS Custom Properties for Cascading
Variables Module Level 1
• CSS Grid Layout Module Level 1
• Selectors Level 4

CSS Shapes и CSS Masking

• DataURI картинки чтобы не моргало
• для Shapes картинки должны быть CORS Friendly
• Shapes лучше вообще без картинок

В это время в соседнем отделе

Свойство initial-letter-wrap для ::first-letter

			p::first-letter {
			initial-letter: 3;
			initial-letter-wrap: all;
			}
		

CSS Image Values and Replaced Content Module Level 4

• element(#someId) позволит рендерить DOM-узел как изображение
• conic-gradient() уиии!

CSS Custom Properties for Cascading Variables Module Level 1

• совсем скоро!
• объявляются в селекторах => есть специфичность и наследование
• что будет с переменными в препроцессорах?

CSS Grid Layout Module Level 1

• самая ожидаемая спецификация
• большая, сложная: новые значения и свойства — ИНСТРУМЕНТИЩЕ для лэйаутов
• касается исключительно CSS и подходит для любой разметки
• посмотрим пару примеров…
• определенно The Next Big Thing