Sass: Diferență între versiuni
Sari la navigare
Sari la căutare
| (Nu s-au afișat 19 versiuni intermediare efectuate de același utilizator) | |||
| Linia 2: | Linia 2: | ||
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. | 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= | =Utilizare= | ||
== | ==Pregătirea Visual Studio Code== | ||
Pentru folosirea [[Visual Studio Code]] (VSCode), este nevoie să se instaleze modulele: | |||
* Live Sass Compiler | * Live Sass Compiler | ||
* Live Server | * Live Server | ||
[[Fișier:Live Sass Compiler în VSC.png|none|1024px]] | [[Fișier:Live Sass Compiler în VSC.png|none|1024px]] | ||
[[Fișier:Live (Sass) Server.png|none|1024px| | |||
[[Fișier:Live (Sass) Server ok.png|none|1024px]] | |||
==Configurare VS Code== | |||
Pentru setarea directoarelor de proiect, trebuie editat fișierul de setări în VS Code: | |||
[[Fișier:Accesare setări.png|none|480px]] | |||
<syntaxhighlight lang="sass"> | |||
"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 | |||
</syntaxhighlight> | |||
Atenție la setarea: | |||
<syntaxhighlight lang="sass"> | |||
"liveSassCompile.settings.forceBaseDirectory": true | |||
</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
_Server_ok.png)
Configurare VS Code
Pentru setarea directoarelor de proiect, trebuie editat fișierul de setări în VS Code:
"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