- Stefanescu Mihai a postat in Paginare in PHP
- johhny a postat in Paginare in PHP
- Stefanescu Mihai a postat in Cum pot afisa eroarea cand utilizatorul a scris un username gresit sau o parola gresita?
- madalin a postat in Cum pot afisa eroarea cand utilizatorul a scris un username gresit sau o parola gresita?
- Stefanescu Mihai a postat in Featureuri site
Sass
Pentru acest articol mi-am pregatit un fisier index.html care arata in felul urmator:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Invata-Programare.ro - Tutorial SASS & SCSS</title>
<link href="style/style.css" rel="stylesheet">
</head>
<body>
<h1>Salut Invata-Programare.ro</h1>
<p>Salutare si bun venit la seria de tutotriale SASS & SCSS</p>
</body>
</html>
Din cate se poate observa nu am pus nici-un link catre un fisier scsss ci un link catre un fisier css. Stiu ca in articolul trecut am discutat decat despre crearea unui fisier scss, dar spre sfarsitul articolului v-am prezentat comanda sass –watch, care va compila fisierul scss si va genera un fisier css.
Din cate se poate observa pagina mea arata destul de simplu, am un heading si un paragraf:
Acum, am sa schimb culorile pentru heading si paragraf din sass folosind o variabila pentru heading si una pentru paragraf.
Pentru heading am scris aceasta variabila:
$culoare-heading: #345d91;
Iar pentru paragraf am scris aceasta variabila:
$culoare-paragraf: #ff9400;
Acum, oriunde doresc sa folosesc acea culoare pot folosi variabila creata mai sus.
Hai sa schimbam culoarea heading-ului:
h1{
color: $culoare-heading;
}
Facem acelasi lucru si pentru paragraf:
p{
color: $culoare-paragraf;
}
Nu uitati ca trebuie sa avem cmd-ul pornit cu comanda sass –watch pentru a compila fisierul scss, si daca ne uitam in consola acum putem observa urmatorul mesaj:
>>> Change detected to: style.scss
write style.css
write style.css.map
Ceea ce inseamna ca fisierul scss a fost compilat si a fost generat fisierul css ce in momentul de fata arata astfel:
h1 {
color: #345d91; }
p {
color: #ff9400; }
/*# sourceMappingURL=style.css.map */
si iata si rezultatul:
Comentarii
Inca nu au fost postate comentarii, fii primul care posteaza un comentariu!