sass
Części i import
Szukaj…
Importowanie
Korzystanie z @import pozwala podzielić pliki na wiele mniejszych plików. Ma to sens, ponieważ możesz zachować lepszą strukturę arkuszy stylów i unikać bardzo dużych plików.
Przykład
Powiedzmy, że masz kilka plików.
- application.scss
- header.scss
- content
|-- article.scss
'-- list.scss
- footer.scss
Twój główny arkusz stylów application.scss może importować wszystkie pliki, a także definiować własne style.
// 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;
}
Zauważ, że możesz także pominąć rozszerzenie .scss aby móc napisać @import 'header'; zamiast @import 'header.scss' .
Prowadzi to do tego application.scss że application.scss ma wszystkie zaimportowane .scss zawarte w skompilowanym pliku, który podajesz klientowi (przeglądarce). W takim przypadku skompilowanym plikiem będzie application.css który zostanie dołączony do pliku HTML.
<html>
<head>
<link rel="stylesheet" type="text/css" href="/application.css?v=18c9ed25ea60">
</head>
<body>
...
</body>
</html>
Chociaż pracujesz z wieloma plikami, udostępniasz tylko jeden plik, co eliminuje potrzebę wielu żądań (po jednym dla każdego pliku) i przyspiesza czas ładowania użytkowników.
Główne korzyści
- Lepsza struktura programowania przy użyciu folderów i wielu plików
- Udostępnianie tylko jednego pliku klientowi (przeglądarce)
Częściowe
Możesz tworzyć częściowe pliki zawierające mniejsze fragmenty swoich arkuszy stylów. Pozwala to na modularyzację CSS i pozwala na lepszą strukturę arkuszy stylów. Częściowy to plik Sass o wiodącym znaku podkreślenia, tj .: _partial.scss . Podkreślenie informuje Sassa, że określony plik jest częściowy i nie zostanie wygenerowany w pliku CSS.
Części Sass są przeznaczone do stosowania w dyrektywie @import . Korzystając z @import , możesz pominąć wiodący znak podkreślenia.
Przykład
Załóżmy, że masz strukturę plików z częściowymi częściami podobnymi do tego
- main.scss
- _variables.scss
- content
|-- _buttons.scss
'-- _otherelements.scss
Możesz dołączyć te main.scss pliku main.scss w następujący sposób (w tym przykładzie pominięto wiodące podkreślenia i rozszerzenia plików):
// main.scss - Imports:
@import 'variables';
@import 'content/buttons';
@import 'content/otherelements';