MNIEJ - dyrektywy importowe

Opis

Plik @importDyrektywa służy do importowania plików w kodzie. Rozprowadza MNIEJ kodu na różne pliki i pozwala łatwo zachować strukturę kodu. Instrukcje @import można umieścić w dowolnym miejscu kodu.

Na przykład możesz zaimportować plik za pomocą @importsłowo kluczowe jako @import "nazwa_pliku.less" .

Rozszerzenia plików

Możesz użyć instrukcji @import w zależności od różnych rozszerzeń plików, takich jak -

Jeśli używasz rozszerzenia .css , zostanie ono uznane za CSS, a instrukcja @import pozostanie niezmieniona.
Jeśli zawiera jakiekolwiek inne rozszerzenie, będzie traktowane jako MNIEJ i zostanie zaimportowane.
Jeśli nie ma LESS rozszerzenia, zostanie dołączone i dołączone jako importowany plik LESS.

@import "style";      // imports the style.less
@import "style.less"; // imports the style.less
@import "style.php";  // imports the style.php as a less file
@import "style.css";  // it will kept the statement as it is

Przykład

Poniższy przykład demonstruje użycie zmiennej w pliku SCSS -

<!doctype html>
   <head>
      <title>Import Directives</title>
      <link rel = "stylesheet" href = "style.css" type = "text/css" />
   </head>

   <body>
      <h2>Example of Import Directives</h2>
      <p class = "myline">Welcome to Tutorialspoint...</p>
   </body>
</html>

Następnie utwórz plik import_dir.less .

import_dir.less

.myline {
   font-size: 20px;
}

Teraz utwórz plik style.less .

bezszyjkowy

@import "http://www.tutorialspoint.com/less/import_dir.less";
.myline {
   color:#FF0000;
}

Import_dir.less plik dostanie importowane do style.less pliku od ścieżkihttps://www.tutorialspoint.com/less/import_dir.less.

Możesz skompilować style.less do style.css za pomocą następującego polecenia -

lessc style.less style.css

Wykonaj powyższe polecenie; automatycznie utworzy plik style.css z następującym kodem -

style.css

.myline {
   font-size: 20px;
}

.myline {
   color: #FF0000;
}

Wynik

Wykonaj następujące kroki, aby zobaczyć, jak działa powyższy kod -

Zapisz powyższy kod HTML w pliku import_directives.html plik.
Otwórz ten plik HTML w przeglądarce, zostanie wyświetlony następujący wynik.