Fundacja - Sass

SASS pomaga uczynić kod bardziej elastycznym i konfigurowalnym w Foundation.

Zgodność

Aby zainstalować wersję opartą na SASS dla Foundation, Ruby powinien być zainstalowany w systemie Windows. Fundację można skompilować za pomocą Ruby SASS i libsass. Polecamynode-sass 3.4.2+ wersja do kompilacji SASS.

Wymagany Autoprefixer

Autoprefixer obsługuje pliki SASS. gulp-autoprefixer służy do budowania procesu. Poniższe ustawienie autoprefiksera służy do uzyskania właściwej obsługi przeglądarki.

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

Ładowanie Framework

Możemy zainstalować pliki frameworka za pomocą NPM. Korzystając z interfejsu wiersza poleceń (CLI), możemy skompilować pliki Sass. Poniżej znajduje się polecenie załadowania struktury -

npm install foundation-sites --save

Po uruchomieniu powyższego kodu wiersza poleceń otrzymasz następujące wiersze -

Kompilacja ręczna

Pliki Framework można dodać jako ścieżkę importu w zależności od procesu budowania, ale ścieżka będzie taka sama, jak folder_pakiety / witryny-fundacji / scss . Instrukcja @import znajduje się na początku pliku Foundation-sites.scss . Następny wiersz w podanym kodzie jest wyjaśniony wAdjusting CSS Output Sekcja.

@import 'foundation';
@include foundation-everything;

Korzystanie ze skompilowanego CSS

Możesz dołączyć wstępnie skompilowane pliki CSS. Istnieją dwa typy plików CSS, tj. Zminimalizowane i niezminifikowane. Wersja zminimalizowana jest używana do produkcji, a wersja niezminifikowana służy do bezpośredniej edycji CSS frameworka.

<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">

Dostosowywanie wyjścia CSS

W przypadku różnych komponentów dane wyjściowe Foundation składają się z wielu klas. Służy do kontrolowania wyników CSS frameworka. Dodaj następujący pojedynczy wiersz kodu, aby jednocześnie uwzględnić wszystkie składniki.

@include foundation-everything;

Poniżej znajduje się lista komponentów zaimportowanych po zapisaniu powyższego kodu w pliku scss. Komponenty, które nie są konieczne, można skomentować. Możesz wyświetlić poniższe linie kodu w pliku Your_folder_name / node_modules / Foundation-sites / scss / Foundation.scss .

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

Plik ustawień

Plik ustawień jest zawarty w całym projekcie fundamentu, tj . _Settings.scss . Jeśli używasz Yeti Launch lub CLI do tworzenia projektu Foundation for Sites, możesz znaleźć plik ustawień w src / asset / scss /.

Zainstalowaliśmy Foundation przy użyciu npm, dlatego możesz znaleźć plik ustawień zawarty w twoim_folderze / node_modules / Foundation-sites / scss / settings / _settings.scss . Możesz przenieść to do własnych plików Sass do pracy.

Możesz napisać własny CSS, jeśli nie jesteś w stanie dostosować za pomocą zmiennych. Poniżej znajduje się zestaw zmiennych, które zmieniają domyślny styl przycisków.

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;

$button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;