sass
Partialer och import
Sök…
importera
Med @import kan du dela upp dina filer i flera mindre filer. Detta är meningsfullt eftersom du kan hålla bättre struktur för dina stilark och undvika mycket stora filer.
Exempel
Låt oss säga att du har några filer.
- application.scss
- header.scss
- content
|-- article.scss
'-- list.scss
- footer.scss
Din huvudsakliga stilark application.scss kan importera alla filer samt definiera sina egna stilar.
// 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;
}
Observera att du också kan utelämna .scss förlängningen så att du kan skriva @import 'header'; istället för @import 'header.scss' .
Detta leder till att application.scss har alla importerade .scss inkluderade i den sammanställda filen du serverar till klienten (webbläsaren). I det här fallet är din kompilerade fil application.css som du inkluderar i din html.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/application.css?v=18c9ed25ea60">
</head>
<body>
...
</body>
</html>
Även om du arbetar med flera filer så serverar du bara en fil, vilket eliminerar behovet av flera förfrågningar (en för varje fil) och påskyndar laddningstiden för dina besökare.
De viktigaste fördelarna
- Bättre struktur för utveckling med hjälp av mapp och flera filer
- Visar bara en fil till klienten (webbläsare)
Partials
Du kan skapa partiella filer som innehåller mindre utdrag av dina formatmallar. Detta gör att du kan modulera din CSS och möjliggöra en bättre struktur av dina stilark. En partiell är en Sass-fil med ett ledande understreck, dvs: _partial.scss . Underskriften låter Sass veta att den specifika filen är en delvis och att den inte kommer att genereras till en CSS-fil.
Sass-partiklar är avsedda att användas med @import direktivet. När du använder @import kan du utelämna det ledande understrecket.
Exempel
Antar att du har en filstruktur med partier som denna
- main.scss
- _variables.scss
- content
|-- _buttons.scss
'-- _otherelements.scss
Du kan inkludera de delarna i din main.scss fil enligt följande (ledande understreck och filändelser utelämnas i det här exemplet):
// main.scss - Imports:
@import 'variables';
@import 'content/buttons';
@import 'content/otherelements';