Sass: Diferență între versiuni

De la YO3ITI
Sari la navigare Sari la căutare
 
(Nu s-au afișat 6 versiuni intermediare efectuate de același utilizator)
Linia 3: Linia 3:
=Utilizare=
=Utilizare=
==Pregătirea Visual Studio Code==
==Pregătirea Visual Studio Code==
Pentru folosirea Visual Studio Code (VSCode), este nevoie să se instaleze modulele:
Pentru folosirea [[Visual Studio Code]] (VSCode), este nevoie să se instaleze modulele:
* Live Sass Compiler
* Live Sass Compiler
* Live Server
* Live Server
Linia 46: Linia 46:
     ],
     ],
     "liveServer.settings.donotShowInfoMsg": true
     "liveServer.settings.donotShowInfoMsg": true
</syntaxhighlight>
Atenție la setarea:
<syntaxhighlight lang="sass">
    "liveSassCompile.settings.forceBaseDirectory": true
</syntaxhighlight>
</syntaxhighlight>

Versiunea curentă din 10 august 2024 13:00

Introducere

Sass sau "Syntactically Awesome Style Sheets" e o extensie CSS. Pe măsură ce directivele pentru stiluri (CSS stylesheets) au devenit din ce în ce mai mari, mai complexe și mai dificil de administrat, a fost simțită nevoia unei platforme care să adreseze toate aceste probleme. Sass oferă posibilitatea de a utiliza funcționalități care nu există în CSS precum variabilele, reguli imbricate (nested rules), mixine, moștenire, funcții native și altele.

Utilizare

Pregătirea Visual Studio Code

Pentru folosirea Visual Studio Code (VSCode), este nevoie să se instaleze modulele:

  • Live Sass Compiler
  • Live Server


Eroare la generarea previzualizării: Fișier lipsă


Configurare VS Code

Pentru setarea directoarelor de proiect, trebuie editat fișierul de setări în VS Code:


Eroare la generarea previzualizării: Fișier lipsă
    "explorer.confirmDelete": false,
    "[python]": {
        "editor.formatOnType": true
    },
    "security.workspace.trust.untrustedFiles": "open",
    "cmake.configureOnOpen": true,
    "arduino.useArduinoCli": true,
    "git.openRepositoryInParentFolders": "never",
    "liveSassCompile.settings.formats": [
        

        {
            "format": "expanded",
            "extensionName": ".css",
            "savePath": "/styles/css",
            "savePathReplacementPairs": null
        },
        {
            "format": "compressed",
            "extensionName": ".min.css",
            "savePath": "/styles/css/minified"

        }
    ],
    "liveServer.settings.donotShowInfoMsg": true

Atenție la setarea:

    "liveSassCompile.settings.forceBaseDirectory": true