Sass – Mostenirea

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

In acest articol am sa va vorbesc despre mostenire. Daca stiti programare orientata pe obiecte cu siguranta ati mai intalnit termenul si deja aveti idee despre ce am sa vorbesc in continuare, dar daca nu ati mai intalnit acest termen sau daca nu stiti exact la ce ma refer continuati sa cititi acest articol pentru ca am sa va explic intr-un mod simplu si usor de retinut.

Cand zic mostenire ma refer la cuvantul cheie extend ce ne permite sa includem anumite bucati de cod in interiorul altor proprietati CSS. Stiu, pribabil vi se pare ciudat si nici macar nu aveti idee unde ar fi acest lucru folositor.

Pai, pentru a va demonstra mai simplu la ce ne este folositor hai sa discutam pe un exemplu concret.

Presupunem ca avem un site pe care trebuie sa avem mai mult tipuri de butoane, toate au acelasi stil de baza, dar difera culorile/fontul/etc.

In primul rand am sa scriu codul de baza ce va exista la toate butoanele:

.buton{
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 10px 15px;
	margin: 10px;
	background: #efefef;
	text-decoration: none;
}

Acum, sa presupunem ca avem nevoie de un buton albastru care, ca si primul sa aiba border, border-radius, padding si margin…decat sa mai copiem inca o data aceste proprietati putem pur si simplu sa le mostenim de la primul buton:

.buton{
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 10px 15px;
	margin: 10px;
	background: #efefef;
	text-decoration: none;
}

.buton-albastru{
	@extend .buton;
	background: #5B85FF;
	color: #fff;
}

Si iata si rezultatul:

In cazul de fata probabil vi se pera destul de nefolositoare aceasta mostenire, dar ganditiva ca avem 10 tipuri de butoane, si ganiditi-va ca poate pe viitor poate va fi necesar sa schimbam border-radius-ul la toate…

.buton{
	border: 1px solid #ccc;
	border-radius: 4px;
	padding: 10px 15px;
	margin: 10px;
	background: #efefef;
	text-decoration: none;
}

.buton-albastru{
	@extend .buton;
	background: #5B85FF;
	color: #fff;
}

.buton-verde{
	@extend .buton;
	background: #32AE41;
	color: #fff;
}

.buton-rosu{
	@extend .buton;
	background: #D74242;
	color: #fff;
}

.buton-galben{
	@extend .buton;
	background: #F0C406;
	color: #fff;
}

Cred ca asta este tot ce va pot spune despre mostenire in Sass/Scss, dar daca aveti vre-o nelamurire sau vre-o problema ma puteti intreba si am sa va ajut ce mare placere.

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!