2014-12-25 6 views
8

Ich habe den folgenden Ausschnitt von css2sass (bis SCSS Convert)Warum kann SASS Pseudo_expr nicht wie `& :: nicht (: first-child)` kompilieren?

.floating-label-form-group { 
    position: relative; 
    margin-bottom: 0; 
    padding-bottom: .5em; 
    border-bottom: 1px solid #e1e1e1; 
    input, textarea { 
    z-index: 1; 
    position: relative; 
    padding-right: 0; 
    padding-left: 0; 
    border: 0; 
    border-radius: 0; 
    font-size: 1.5em; 
    background: 0 0; 
    box-shadow: none!important; 
    resize: none; 
    } 
    label { 
    display: block; 
    z-index: 0; 
    position: relative; 
    top: 2em; 
    margin: 0; 
    font-size: .85em; 
    line-height: 1.764705882em; 
    vertical-align: middle; 
    vertical-align: baseline; 
    opacity: 0; 
    -webkit-transition: top .5s ease,opacity .5s ease; 
    -moz-transition: top .5s ease,opacity .5s ease; 
    -ms-transition: top .5s ease,opacity .5s ease; 
    transition: top .5s ease,opacity .5s ease; 
    } 
    &::not(:first-child) { 
    padding-left: 14px; 
    border-left: 1px solid #e1e1e1; 
    } 

Als ich es SASS 3.4.9 mit kompilieren, es klagt:

Error: Invalid CSS after "&::not(": expected pseudo_expr, was ":first-child)" 

Der CSS-Code zu erwarten sollte wie folgt aussehen:

.floating-label-form-group::not(:first-child){ 
    padding-left:14px;border-left:1px solid #e1e1e1} 

Allerdings scheint es, dass SASS nicht weiß, wie &::not( in CSS zu kompilieren. Hat jemand Ideen, wie man das beheben kann?

Antwort

18

Eigentlich hat Sass Recht: das ist in der Tat ungültig CSS. :not() ist eine Pseudo-Klasse, kein Pseudoelement, so sollte es nur einen Doppelpunkt hat:

&:not(:first-child) { 
    padding-left: 14px; 
    border-left: 1px solid #e1e1e1; 
    } 
-1

Platz in Anführungszeichen: first-Kind, der folgende Code für mich in Rais arbeitete 4

.floating-label-form-group::not(':first-child') { 
    padding-left: 14px; 
    border-left: 1px solid #eee; 
} 
+0

Dies erzeugt ungültiges CSS. – cimmanon