Y a-t-il une différence entre SCSS et CSS

humanoid89
Les bases HTML/CSS

Bonjour à tous !

Je suis débutant et je suis en train d'apprendre le HTML et CSS pour me faire un site plus tard. Ma question peut paraître bête mais je voudrais savoir si il y a une différence entre SCSS et CSS niveau syntaxe.

Parce que je suis en train de suivre le tutoriel pour faire un menu responsive et le SCSS est utilisé, moi j'utilise le CSS et lorsque je fait une modification, rien ne se fait lorsque j'actualise la page. Je suis donc un peut bloqué.

Merci pour votre aide.

3 réponses

humanoid89
Auteur
Réponse acceptée

Le problème est résolu j'ai mal placé le dossier CSS. Désolé pour le dérangement et merci beaucoup pour ton aide.

Marxtai

Salut,

la grande majorité de la syntaxe devrait être identique, si on exlut les particularités du SCSS bien entendu (ex: imports, mixins). Tu fais tes modifications dans quel fichier, le fichier CSS ou SCSS? Ton fichier HTML appelle bien le fichier CSS et non SCSS? Tu utilises quel préprocesseur pour générer ton CSS?

Un peu plus d'informations ne feraient pas de mal!

humanoid89
Auteur

Bonjour Marxtai,

En effet j'aurais du donner un peu plus d'information.

Je fais mes modifications dans le ficher css appelé app.css. Oui le fichier HTML appelle bien le fichier CSS.

index.html

<!DOCTYPE html>
<html xmls="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
        <title>Menu responsive</title>
        <link href='http://fonts.googleapi.com/css?family=Roboto:400,700' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" type="text/css" href="css/app.css">
        <!--[if lt IE 9]>
            <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
    </head>
    <body>

        <header class="header">
            <a href="#" class="header__logo">Logo</a>
            <nav class="menu">
                <a href="#">Item 1</a>
                <a href="#">Item 2</a>
                <a href="#">Item 3</a>
                <a href="#">Item 4</a>
                <a href="#">Item 5</a>  
            </nav>
        </header>

        <div class="site-content">
            <div class="container">
             contenu du site   
            </div>          
        </div>
    </body>
</html>

app.css 

html, body{
    font-family: Roboto;
    font-size: 16px;
    line-height: 1.4;
    height: 100%;

    margin: 0;
    padding: 0;
}
a{ text-decoration: none; color:inherit; }
.header{
    position: fixed;
    left: 0;
    right: 0;
    height: 66px;

    line-height: 66px;
    color: #FFF;    
}

J'utilise notepad++ pour écrire mes codes.

Merci beaucoup !