Partage

Problème de compilation SCSS

7 janvier 2021 à 10:48:32

Bonjoir,

Je suis en train d'appendre le SCSS et je l'ai assimilé à du PHP en passant par WAMP mais le SCSS ne marche malheureusement pas... Je vous envoie mon code :

HTML :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<link rel="stylesheet" href="NarvalChat.scss">
	<title>Document</title>
</head>
<body>
	<div class="menu">
		<div class="barre first"></div>
		<div class="barre"></div>
		<div class="barre"></div>
	</div>
	<div style="width: 150px; height: 100px; background-color: red;" class="red"></div>
	<form action="NarvalChat.php" method="post">
		<input type="text" name="msg" placeholder="Entrez votre message :" id="msg">
		<input type="submit" id="submit">
	</form>
	<script src="NarvalChat.js"></script>
</body>
</html>

SCSS :

:root 
{
	--background: #0A0B1A;
	--blue: #1A1A34;
	--light-blue: #27274C;
	--medium-grey-text: #8F8F8F;
	--dark-grey-text: #707070;
}
body
{
	background-color: var(--background);
	margin: 0;
}
/*Menu*/
.menu
{
	width: 80px;
	height: 80px;
	background-color: var(--blue);
	border-radius: 50px;
	margin: 25px;
	position: fixed;
	display: flex;
	flex-direction: column;
	&:hover + .red
	{
		color: orange;
	}
}
.barre
{
	margin-left: auto;
	margin-right: auto;
	width: 50px;
	height: 5px;
	margin-top: 12px;
	background-color: white;
}
.barre:nth-child(1)
{
	margin-top: 22px;
}
.barre:nth-child(2)
{
	width: 40px;
}
.barre:nth-child(3)
{
	width: 30px;
}
/*--Menu*/
/*Msg Form*/
form
{
	display: flex;
	position: fixed;
	bottom: 20px;
	margin-left: 20px;
}
#msg
{
	width: 85vw;
	height: 40px;
	padding: 10px;
	background-color: var(--blue);
	border: none;
	border-radius: 15px;
	color: var(--dark-grey-text);
}
#submit
{
	width: 100px;
	height: 35px;
	border: none;
	border-radius: 10px;
	margin-left: -55px;
	margin-top: 13px;
	background-color: var(--light-blue);
	color: var(--medium-grey-text);
}
/*--Msg Form*/

Mais si je choisi le langage SASS il me met tout met ";" en rouge est-ce une propriété du langage de ne pas avoir de ";" étant dis que je ne le connais pas.

PS : j'ai vu que je devais bien utilisé le SCSS

Merci d'avance

Maxence ABRILE

-
Edité par Maxence ABRILE 7 janvier 2021 à 11:25:13

monkey3d

7 janvier 2021 à 11:12:41

Bonjour,

Il me semble que forum html serait plus adapté ...

... mais sauf erreur le scss est un langage qui une fois compilé donne du css et c'est le css qui doit être chargé dans ta page et non le scss.

Du moins c'est ainsi que je pratique.

Par ailleurs, as tu regardé ce que donne l'outil console du navigateur ? y a t-il des erreurs ?

A+

Maxence ABRILE

7 janvier 2021 à 11:18:54

J'ai mis ce message dans le FORUM php car ma page est en php et il pourrait y avoir une liaison (du moins ne m'y connaissant pas je pense)et je n'ai pas compris le "...mais sauf erreur le scss est un langage qui une fois compilé donne du css et c'est le css qui doit être chargé dans ta page et non le scss."

et ma console de navigateur ne me met aucune propriété encore moins quand je met des variable type $chat = 100px;

Lamecarlate

7 janvier 2021 à 11:19:20

Bonjour,

comme le dit monkey3d, il faut compiler ton SCSS, car le navigateur ne peut pas le comprendre. Je t'invite à relire la doc : https://sass-lang.com/install .

Déplacement vers un forum plus approprié

Le sujet est déplacé de la section PHP vers la section HTML / CSS

Mauvais titre

Le titre est un élément important qui ne doit pas être négligé. N'oubliez pas cette règle simple : le titre idéal résume la question que vous allez poser en une petite phrase. Il doit permettre aux visiteurs de se repérer facilement dans le forum visité et d'identifier le sujet à sa seule lecture.

Vous pouvez utiliser divers préfixes comme [Erreur], [MySQL], [Compatibilité], etc... Aussi, pensez à consulter les règles propres à chaque forum (visibles dans les topics épinglés en haut des sections).

De plus, choisir un bon titre permet de rendre plus faciles les recherches des autres membres.

Les titres de type "besoin d'aide" ou "problème" ne sont pas tolérés.

Pour modifier votre titre, éditez le premier message de votre sujet.

(titre originel : PHP et SCSS)

Pas d'aide concernant le code par MP, le forum est là pour ça :)

monkey3d

7 janvier 2021 à 11:31:09

Je ne vois pas trop la liaison entre le php et le css : le php est côté serveur et le css est côté navigateur.

Le point important c'est que ton css soit bien chargé lors de l'envoi de la page par le serveur vers le navigateur d'où regarder la console du navigateur si pas de message d'erreurs.

Et je parle bien du css pas du scss qui est est un langage permettant de générer le css après compilation comme confirmé par Lamercarlate.

A+

Maxence ABRILE

7 janvier 2021 à 11:37:22

Mais je ne comprends pas une chose : j'ai un fichier en scss qui normalement applique tout le design de ma page. Je n'ai pas de page css. Alors, dois-je avoir une page css et scss ou non ?

De plus le scss marche presque comme le php ?

php -> serveur -> rend du html

scss -> rends du css ?

AbcAbc6

7 janvier 2021 à 11:40:52

Voir :

Et tu comprendra mieux comment générer du CSS au départ du SCSS

monkey3d

7 janvier 2021 à 12:29:37

D'abord ce ne sont pas des pages scss ou css ... les pages ce sont du html : c'est la norme côté navigateur. Le navigateur ne comprend que cela.

Le css est lui pour permettre de mettre du style au html : cf ce que veut dire d'ailleurs css.

Donc tu dois compiler ton scss pour produire un css puis c'est ce css que tu le charges dans ta page html.

Le scss marche presque comme le php : alors là je ne vois pas ce que tu veux dire ? Si ce n'est que ce sont 2 langages ... tout le reste est différent et ils ont chacun des buts différents.

Je ne vais pas plus loin. Je pense qu'il te faut au-delà de résoudre ton problème immédiat revoir quelques points de base essentiels d'une architecture web.

Bye

Maxence ABRILE

7 janvier 2021 à 20:31:58

Mais je ne comprend pas vous me dites qu'il faut compiler mon scss pour produire du css que je charge dans mon HTML mais je le fait manuellement ou l'ordinateur/serveur s'en charge.

AbcAbc6

7 janvier 2021 à 20:38:07

Salut, dans un premier temps fait le manuellement. Quand tu connaitra la technique tu pourras te créer un script qui te le générera automatiquement par exemple par l'enregistrement de ton .scss.

Ce n'est pas le serveur qui s'occupe de cela;

Maxence ABRILE

7 janvier 2021 à 20:39:28

Ok comment je fais à le faire et j'ai vu qu'il fallait installer SASS alors que j'utilise SCSS il y a donc une différence ?

JacquotStéphane

9 janvier 2021 à 0:30:45

Bonsoir,

As tu lu les liens données par tes VDD et les docs ?

Que tu utilise Sass ou Libsass il faut charger les packages souhaités et créer une tache javascript dans un fichier Gulpfile (par exemple pour Gulp) et piper() pour compiler ton scss en css, donc ta feuille de style css a mettre en ligne et le scss en locale pour travailler.

Un extrait pour te montrer :

/* --------------------- Requires ------------------- */
var gulp = require('gulp');
var pump = require('pump');
var $ = {
  sass: require('gulp-sass'),
  autoprefixer: require('gulp-autoprefixer'),
  useref: require('gulp-useref'),
  uglify: require('gulp-uglify'),
  minify: require('gulp-uglifyjs'),
  gulpIf: require('gulp-if'),
  minifier: require("gulp-minify"),
  cleanCSS: require('gulp-clean-css'),
  browserSync: require('browser-sync').create()
}

/* ---------------- Configuration ------------------- */
var path = {
  css: 'app/css',
  scss: 'app/scss/**/*',
  html: 'app/*.html',
  js: 'app/**/*.js'
};

//-> sass SCSS -> css
gulp.task('sass', function(){

  return gulp.src(path.scss)
  .pipe($.sass())
  .pipe($.autoprefixer({
    browsers: ['last 2 versions'],
    cascade: true
  }))
  .pipe(gulp.dest(path.css))
  .pipe(gulp.dest('dist'))
  .pipe($.browserSync.stream())
})

/* ---------- default: Chainage -> Cmd Gulp  ------------ */
gulp.task('default' , ['sass'  , 'watch'])

-
Edité par JacquotStéphane 9 janvier 2021 à 0:36:14

Toops61

9 janvier 2021 à 17:04:38

Salut. En fait le SCSS permet d'aller plus loin que le CSS si j'ai bien compris (éviter des répétitions et simplifier quelques tâches) et ton logiciel (comme virtual studio code par exemple) compile (traduit) en CSS automatiquement car le navigateur ne comprend pas le SCSS mais seulement le HTML et CSS. Pareil tu peux pas intégrer le SASS/SCSS dans ton HTML car il ne sera pas compris d'où l'obligation de compiler.

SCSS et SASS c'est quasi pareil, le SCSS est plus courant MAIS pour simplifier on appelle ça du SASS mais c'est très souvent du SCSS. au final tu auras donc ton fichier .html puis ton fichier .css qui sera créé à partir du .scss ou .sass

J'espère que c'est clair pour toi, j'étais dans ton cas aussi mais regarde ce cours et ça devient clair et limpide.... https://openclassrooms.com/fr/courses/6106181-simplifiez-vous-le-css-avec-sass?status=published

PS : aucun rapport SCSS / PHP peut être que c'est le $ qui t'a fait penser ça ?

Toops61

monkey3d

9 janvier 2021 à 17:18:36

Toops61, Je pense que c'est ce que j'avais déjà dit plusieurs fois dans quelques posts ci-dessus mais l'enseignement c'est l'art de la répétition.

Ce qui serait bien aussi c'est qu'il réponde où il en est ?

re-bye.

JacquotStéphane

22 janvier 2021 à 23:50:29

Visiblement non, on peu clore le sujet

Toni-m

21 juin 2021 à 10:07:58

Bonjour, j'ai un problème de copilation avec Sass

je suis au projet 3 developpeur web, leçon 2 de la partie 3 et qui apprend comment installez Sass .

J'ai tout fait à la lettre, mon terminal réagit à chaque changement de code dans mon Scss mais dans mon css rien ne change,

pourtant j'ai changer mon script j'ai vérifier plusieurs fois, et toujours rien. Merci d'avance pour toutes vos réponses.

Toops61

21 juin 2021 à 10:19:05

Toni-m a écrit:

Bonjour, j'ai un problème de copilation avec Sass

je suis au projet 3 developpeur web, leçon 2 de la partie 3 et qui apprend comment installez Sass .

J'ai tout fait à la lettre, mon terminal réagit à chaque changement de code dans mon Scss mais dans mon css rien ne change,

pourtant j'ai changer mon script j'ai vérifier plusieurs fois, et toujours rien. Merci d'avance pour toutes vos réponses.

Salut. regarde si l'adresse dans ton fichier json pour compiler ton sass (SCSS) fonctionne et est à la bonne adresse. Dans "scripts" tu as une ligne comme ça normalement (plus ou moins) et c'est là que tu donnes le fichier source et le fichier cible : "sass": "sass --watch ./sass/main.scss:./public/css/style.css --style expanded"

-
Edité par Toops61 21 juin 2021 à 10:20:02

Toops61

AbcAbc6

21 juin 2021 à 10:22:52

@Toni-m Bonjour, merci de ne pas déterrer d'ancien sujet.

Déterrage

Citation des règles générales du forum :

Avant de poster un message, vérifiez la date du sujet dans lequel vous comptiez intervenir.

Si le dernier message sur le sujet date de plus de deux mois, mieux vaut ne pas répondre.
En effet, le déterrage d'un sujet nuit au bon fonctionnement du forum, et l'informatique pouvant grandement changer en quelques mois il n'est donc que rarement pertinent de déterrer un vieux sujet.

Au lieu de déterrer un sujet il est préférable :

soit de contacter directement le membre voulu par messagerie privée en cliquant sur son pseudonyme pour accéder à sa page profil, puis sur le lien "Ecrire un message"

soit de créer un nouveau sujet décrivant votre propre contexte

ne pas répondre à un déterrage et le signaler à la modération

Je ferme ce sujet. En cas de désaccord, me contacter par MP.

Problème de compilation SCSS

Déplacement vers un forum plus approprié

Mauvais titre

Déterrage

Supprimer

Modérer

Signaler le message aux modérateurs