Sass – Variabile

postat acum 2 ani de Stefanescu Mihai in categorie Sass si Scss

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:

Sunt un tanar programator din Bucuresti ce lucreaza in PHP/Mysql (MySqli/PDO), Laravel, CodeIgniter, MySQL, PostgreSQL, Wordpress, HTML5/CSS3, Sass, Photoshop si multe altele.
Google+ Community Facebook Group
Acest articol a fost mutat de pe vechea platforma.
Pentru orice eroare aparuta la mutare va rog sa ma contactati!