Sass Steuerrichtlinien Attribut Elemente mit vorhandenem Attribute

Question

Ich beziehe mich auf die Dokumentation hinzufügen hier:

sass docs

und zu versuchen, um zu sehen, ob man über eine verwenden, wenn Anweisung einen Brief Attribut Abstand anzuwenden zu jeder Klasse, die eine bestimmte Schriftfamilie verwendet.

Ich habe

versucht

h1 { 
    @if font-family == 'Open Sans Condensed' {letter-spacing: 0.1em;} 
} 

h1 { 
    font-family: 'Open Sans Condensed', sans-serif; 
} 

mit der Hoffnung der Ausgabe:

h1 { 
    font-family: 'Open Sans Condensed'; 
    letter-spacing: 0.1em; 
} 

, die nicht funktioniert. Ich bin mir ziemlich sicher, dass ich dieses Problem aus dem falschen Blickwinkel angehen werde. Kann jemand überprüfen, ob diese Art der Nutzung möglich ist?

Answer 1

Zwei Möglichkeiten, wie Sie diesen Ansatz könnten:

1) Fügen Sie den Buchstaben-Abstand als Teil der font-face-Definition.

@font-face { 
    font-family: 'Open Sans'; 
    src: [urls for various formats go here]; 
    letter-spacing: 0.1em; 
} 

Wenn Sie die Schrift von einem externen Stylesheet einlegen, wie mit Google Fonts oder ähnlichen, sollten Sie noch in der Lage sein, einen zweiten font-face Block zu erklären, dass die font-family und Zeichenabstand Regeln nur enthält .

2) Verwenden Sie ein Sass Mixin. Sie können es sehr einfach oder flexibler machen, je nachdem, ob Sie mehrere Zeichensätze berücksichtigen möchten.

Grund one-font-Setup:

@mixin font-styles() { 
    font-family: 'Open Sans Condensed', sans-serif; 
    letter-spacing: 0.1em; 
} 

h1 { 
    @include font-styles; 
} 

oder parametrisierte für mehrere Schriftstile:

@mixin font-styles($font: 'headings') { 
    @if $font == 'headings' { 
    font-family: 'Open Sans Condensed', sans-serif; 
    letter-spacing: 0.1em; 
    } 
    @elseif $font == 'text' { 
     font-family: 'Open Sans', sans-serif; 
     [related font styles go here] 
    } 
    [add more font style sets as needed] 
} 

h1 { @include font-styles('headings'); } 
p { @include font-styles('text'); }