Fondation - Sass

SASS aide à rendre le code plus flexible et personnalisable dans Foundation.

Compatibilité

Pour installer la version basée sur SASS pour la fondation, Ruby doit être installé sur Windows. Foundation peut être compilé avec Ruby SASS et libsass. Nous recommandonsnode-sass 3.4.2+ version pour compiler SASS.

Préfixeur automatique requis

L'autoprefixer gère les fichiers SASS. gulp-autoprefixer est utilisé pour construire le processus. Le paramètre de préfixe automatique suivant est utilisé pour obtenir une prise en charge appropriée du navigateur.

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

Chargement du framework

Nous pouvons installer les fichiers du framework en utilisant NPM. En utilisant l'interface de ligne de commande (CLI), nous pouvons compiler les fichiers Sass. Voici la commande pour charger le framework -

npm install foundation-sites --save

Après avoir exécuté le code de ligne de commande ci-dessus, vous obtiendrez les lignes suivantes -

Compilation manuelle

Les fichiers de structure peuvent être ajoutés en tant que chemin d'importation en fonction de votre processus de construction, mais le chemin sera le même dossier_packages / foundation-sites / scss . L' instruction @import est incluse en haut du fichier foundation-sites.scss . La ligne suivante dans le code donné est expliquée dans leAdjusting CSS Output section.

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

Utilisation du CSS compilé

Vous pouvez inclure les fichiers CSS précompilés. Il existe deux types de fichiers CSS, c'est-à-dire minifiés et non minifiés. La version réduite est utilisée pour la production et la version non réduite est utilisée pour éditer directement le cadre CSS.

<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">

Ajuster la sortie CSS

Pour divers composants, la sortie Foundation se compose de nombreuses classes. Il est utilisé pour contrôler la sortie CSS du framework. Ajoutez la seule ligne de code suivante pour inclure tous les composants à la fois.

@include foundation-everything;

Voici la liste des composants importés lorsque vous écrivez le code ci-dessus dans votre fichier scss. Les composants qui ne sont pas nécessaires peuvent être commentés. Vous pouvez afficher les lignes de code ci-dessous dans le fichier 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....

Le fichier de paramètres

Un fichier de paramètres est inclus dans l'ensemble du projet de fondation, c'est-à-dire _settings.scss . Si vous utilisez Yeti Launch ou la CLI pour créer un projet Foundation for Sites, vous pouvez trouver le fichier de paramètres sous src / assets / scss /.

Nous avons installé Foundation en utilisant npm, vous pouvez donc trouver le fichier de paramètres inclus sous your_folder_name / node_modules / foundation-sites / scss / settings / _settings.scss . Vous pouvez le déplacer dans vos propres fichiers Sass pour travailler avec.

Vous pouvez écrire votre propre CSS, si vous ne pouvez pas personnaliser avec des variables. Voici un ensemble de variables qui modifient le style par défaut des boutons.

$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;