SASS/SCSS utilizzando @extend attraverso singoli file (responsive design)

Question

Sto utilizzando un approccio "mobile first" sul mio sito e sto utilizzando SCSS.

Ho 3 fogli di stile SCSS:

• base.scss (servito a tutti)
• medium.scss (> = 768px finestra)
• large.scss (> = 1024px finestra)

Sono servito in questo modo:

<link rel="stylesheet" href="/css/base.css" type="text/css" /> 
<link rel="stylesheet" href="/css/medium.css" type="text/css" media="only screen and (min-width: 767px)" /> 
<link rel="stylesheet" href="/css/large.css" type="text/css" media="only screen and (min-width: 1023px)" /> 

In altre parole, large.scss non ha conoscenza del css in base.scss, tuttavia ho bisogno di estendere una classe che risiede in base.css, quando in large.scss.

Come posso fare questo?

Ho provato separare gli elementi devo estendere, come i bottoni, in un foglio di stile separato, e quindi utilizzare @import 'buttons.scss'; in medium.scss, ma poi tutto il css in buttons.scss sarà reso nel tale foglio pure.

C'è un modo per rendere visibili le classi in base.scss al "motore di rendering" di SASS quando si compila il css in modo che possano essere utilizzati in medium.scss?

Answer 1

Ho avuto un problema simile di recente. La mia soluzione: mixins.

_mixins.scss

@mixin someSpacing($base: 5px;){ 
    padding: $base; 
    margin: $base; 
} 

ricordarsi di utilizzare underscore come prefisso, sass solito compilare tali file. Quindi ora puoi semplicemente importare _mixins.scss nei tuoi file. Inoltre puoi estendere il tuo mixin con i parametri per darti più flessibilità.

ad es. base.scss

@import '_mixins.scss'; 

    .classA { 
     @include someSpacing(3px); 
    } 

large.scss

@import '_mixins.scss'; 

    .anotherClass { 
     @include someSpacing(10px); 
    } 

più dettagli in riferimento sass: http://sass-lang.com/docs/yardoc/file.SASS_REFERENCE.html#mixins

Answer 2

ho bisogno di questo come bene una volta. Ho chiesto a Chris Eppstein oggi e mi ha detto:

estendono è per file di output

Quindi sì. @include è la tua unica speranza.

Answer 3

L'approccio corretto per il vostro compito è quello di memorizzare tutti i selettori estensibili a parziali e importare le parziali nei file di output.

progetto/parziali/_extendables.sass

.foo 
    color: red 

%bar 
    width: 50px 

progetto/base.sass

@import partials/extendables 

.baz 
    @extend .foo 

progetto/medium.sass

@import partials/extendables 

.quux 
    @extend %bar 

Inoltre, l'approccio che si sta utilizzando per l'organizzazione della risposta i molto obsoleto. A meno che non si sia costretti a supportare alcune vecchie versioni arrugginite di IE, è necessario utilizzare l'approccio moderno:

• Un file di output singolo.
• Codice organizzato in molti piccoli partial, raggruppati per componenti di pagina (menu, elenco di notizie, notiziari, ecc.) E per funzione (tecnica sticky footer, tipografia), piuttosto che raggrupparli per media query o da dove gli elementi compaiono sul pagina (ad esempio, tutti i codici di intestazione, tutti i codici della barra laterale).

• media query devono essere applicate in modo granulare, sul posto, utilizzando la funzione di supporto Sass interrogazione spumeggiante:

  progetto/partial/componenti/_menu.sass

  .menu 
  
      @media (max-width: 600px) 
      // Mobile styles for menu container 
  
      @media (min-width: 601px) 
      // Desktop styles for menu container 
  
  
  .menu-item 
  
      @media (max-width: 600px) 
      // Mobile styles for menu items 
  
      @media (min-width: 601px) 
      // Desktop styles for menu items