Sass – Partials

postat acum un an de Stefanescu Mihai in categorie Sass si Scss

In acest articol am sa va vorbesc despre partials. Cred ca ar trebuii sa incep prin a va explica ce sunt aceste partials si cum ne pot face viata mai usoara.

Puteti crea fisiere sass cu mici “bucati” (snippets) de cod CSS pe care le puteti include in fisierele voastre Sass. Probabil va intrebati de ce ati vrea sa aveti mai multe fisiere de sass si cu ce v-ar putea ajuta acest lucru. Pai pentru inceput, in acest mod va puteti modulariza codul astfel incat sa poata fi mai usor de inteles/lucrat cu el.

Hai sa presupunem ca lucram la un forum si avem mai multe pagini, de exemplu o pagina de profil. In primul rand avem nevoie de o imagine ce va tine locul unui avatar, si numele:

<!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>
<div class="profil">
	<img src="http://invata-programare.ro/wp-content/uploads/2015/08/10549927_817634704937611_8824031265052422061_o.jpg">
	<span>Stefanescu Mihai</span>
</div>
  </body>
</html>

Bineteles, pentru ca lucram la un site mare ce va avea o multime de reguli CSS probabil o sa vrem sa le saparam in fisiere diferite pentru a le organiza mult mai bine.

Pentru inceput trebuie sa facem un fisier scss nou, dar atentie, numele acestui fisier trebuie sa inceapa cu _, astfel incat sass va sti ca acel fisier nu va fi inclus in HTML ci in alt fisier scss.

Eu mi-am creat un fisier numit _profil.scss si am sa incep prin a schimba inaltimea si latimea imaginii mele de profil pentru ca acum este o imagine super mare de 2048px*1536px, deci in noul fisier scss vom avea:

.profil{
	img{
		width: 150px;
		height: 150px;
		border-radius: 100px
	}
}

Acum, am sa include acest fisier scss in fisierul style.scss folosind @import, deci noul meu fisier style.scss va arata in acest fel:

@import "profil";

Se poate observa foarte clar ca nu am mai inclus underscore-ul de la inceputul numele si nici extensia fisierului, pentru din cauza underscorului din fata numelui sass stie la ce fisier ma refer si stie exact ce sa faca cu el.

Acum, in acest fisier style.scss, dupa @import “”; putem sa continuam sa scirem cod in mod normal si nu ne va deranja cu absolut nimic.

Cred ca asta este tot ce va pot spune despre partials, dar daca aveti intrebari nu ezita-ti sa ma contactati.

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!