Comment utiliser les variables $ par défaut de Bulma

J'ai littéralement commencé mon parcours de codage il y a 3 jours, donc c'est une toute nouvelle dimension pour moi. Je suis commençant pour obtenir le coup de html et css, sur le site Web que j'essaye de concevoir.

J'utilise le Bulma framework CSS sur mon site, et je vais avoir du mal à utiliser leurs variables: http://bulma.io/documentation/overview/variables/

ces variables sont-accessibles uniquement dans SASS? J'ai mis en place SASS, donc mon fichier scss met à jour mon fichier css, mais mon fichier scss n'est pas associé à Bulma de quelque façon que ce soit, donc je vais avoir "Variable is undefined", ce qui a du sens. Donc je suppose que je vais devoir importer les variables Bulma dans le fichier scss, mais comment?

Voici comment j'ai obtenu ma configuration css dans la "tête" du html.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> 
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css"> 
<link rel="stylesheet" type="text/css" href="assets/css/testing.css">

La seule chose que je suis en train d'accomplir en ce moment est d'obtenir un fond noir avec les variables prédéfinies $ noir. C'est à partir du fichier .css, et évidemment pas le moyen de le faire, vous ne pouvez pas utiliser $ variables dans css, non? Je suppose que je manque quelque chose de basique ici, aidez un débutant s'il vous plaît.

Récapitulatif: Comment utiliser le cadre préréglé (Bulma, dans ce cas) variables?

Merci

Source

2017-10-04 Sykt Norsk

Bienvenue à SO! Et merci d'avoir réuni l'une des meilleures questions formulées par un nouvel utilisateur. Nous aurons besoin de plus d'infos pour vous aider je pense. Ainsi, vos fichiers .scss sont compilés dans 'testing.css', est-ce correct? Pouvez-vous mettre à jour votre question avec la structure de répertoire de votre projet, y compris le répertoire '.scss'/fichiers? –

C'est correct, mes fichiers .scss sont en cours de compilation.css. Mon projet est essentiellement dans D:/folder1/folder2/projectfolder - où html.index, licences etc. sont situés. Dans le dossier de projet, j'ai également obtenu un sous-dossier appelé assets, qui a encore 3 sous-dossiers: css, img, sass, avec leurs fichiers respectifs à l'intérieur. Il y a la feuille testing.css dans le dossier css, et le fichier testing.scss dans le dossier sass, rien d'autre. –

On dirait que vous avez juste besoin d'importer le Bulma initial-variables.scss file dans votre fichier testing.scss.

@import 'path/to/initial-variables';

puis vous aurez accès à des variables comme $ black. N'oubliez pas de changer le chemin afin qu'il soit correct pour votre installation.

Source

2017-10-04 23:07:23

C'est la bonne réponse, j'ai fini par importer tous les utilitaires, comme vous pouvez le voir dans ma réponse ci-dessus. Je ne peux pas vous mettre en colère parce que je suis faible. Un aperçu de ma deuxième question? –

Je ne sais pas si cela est le « droit » façon de le faire, mais c'est ainsi que je l'ai fait travailler:

npm install bulma

puis en insérant cette à le dessus de mon testing.scss :

@import "C:/Users/username/node_modules/bulma/sass/utilities/_all";

Je peux maintenant utiliser les variables de Bulma dans testing.scss, et ils traduisent en css vanille lorsqu'ils sont sauvegardés/compilés à testing.css. Je n'ai pas trouvé d'instructions pour cela, juste quelque chose sur lequel je suis tombé. Est-ce que c'est comme, trop basique, alors ils supposent que tout le monde sait comment faire cela?

Source

2017-10-04 23:00:01

Conseil: supprimez la Question Bonus et postez une nouvelle question sur Stackoverflow. Encore mieux, recherchez cette question, je sais qu'il existe des solutions existantes. –

Comment utiliser les variables $ par défaut de Bulma

Répondre

Questions connexes