sass
Gedeeltelijke invoer en invoer
Zoeken…
Importeren
Met @import kunt u uw bestanden opsplitsen in meerdere kleinere bestanden. Dit is logisch, omdat je een betere structuur voor je stylesheets kunt behouden en zeer grote bestanden kunt vermijden.
Voorbeeld
Stel dat u een paar bestanden hebt.
- application.scss
- header.scss
- content
|-- article.scss
'-- list.scss
- footer.scss
Je belangrijkste stylesheet application.scss kunt alle bestanden importeren evenals zijn eigen stijl te definiëren.
// application.scss
// Import files:
@import 'header.scss';
@import 'content/article.scss';
@import 'content/list.scss';
@import 'footer.scss';
// other styles in application.scss
body {
margin: 0;
}
Merk op dat je ook de extensie .scss kunt weglaten zodat je @import 'header'; kunt schrijven @import 'header'; in plaats van @import 'header.scss' .
Dit leidt ertoe dat application.scss alle geïmporteerde .scss bevat in het gecompileerde bestand dat u aan de client (browser) .scss . In dit geval zou uw gecompileerde bestand application.css die u in uw html opneemt.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/application.css?v=18c9ed25ea60">
</head>
<body>
...
</body>
</html>
Hoewel u met meerdere bestanden werkt, dient u slechts één bestand, waardoor er geen meerdere aanvragen nodig zijn (één voor elk bestand) en de laadtijd voor uw bezoekers wordt versneld.
Belangrijkste voordelen
- Betere structuur voor ontwikkeling met behulp van map en meerdere bestanden
- Slechts één bestand naar de client (browser)
Partials
U kunt gedeeltelijke bestanden maken die kleinere fragmenten van uw stylesheets bevatten. Dit stelt u in staat om uw CSS te modulariseren en zorgt voor een betere structuur van uw stylesheets. Een gedeeltelijke is een Sass-bestand met een leidend onderstrepingsteken, dat wil zeggen: _partial.scss . Het onderstrepingsteken laat Sass weten dat het specifieke bestand een gedeeltelijk bestand is en niet wordt gegenereerd in een CSS-bestand.
Sass gedeeltelijke zijn bedoeld om te worden gebruikt met de @import richtlijn. Wanneer u @import , kunt u het toonaangevende onderstrepingsteken weglaten.
Voorbeeld
Stel dat u een bestandsstructuur heeft met dergelijke partities
- main.scss
- _variables.scss
- content
|-- _buttons.scss
'-- _otherelements.scss
U kunt deze partities als volgt in uw main.scss bestand opnemen (in dit voorbeeld worden weggelaten onderstrepingstekens en bestandsextensies weggelaten):
// main.scss - Imports:
@import 'variables';
@import 'content/buttons';
@import 'content/otherelements';