Sass – Mostenirea

Stefanescu Mihai 2 years ago 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.

Programator de ~8 ani, am lucrat la proiecte din mai multe industrstrii, de la eCommerce la telecomunicatii la automatizari. In acest timp am folosi diferite tehnologii, de la PHP, MySQL, PostgreSql, RabbitMq, Redis, Memcached si altele.


Get in touch
Pentru nelamuriri, dubii, comentarii si chestii de pe suflet ne putem auzi pe Discord, Reddit sau poti deschide o discutie noua pe forum

Club-ul este dedicat membrilor si ofera access la mai multe zone ale website-ului.
Login Register

🔖 Bookmarks
✨ Pentru a sustine aceasta comunitate am sa te rog sa te autentifici sau sa te inregistrezi!

🌪️ Discord
Back to top
Folosim cookie-uri pentru a oferi functionalitatile critice ale aplicatiei Invata-Programare. Folosim cookie-uri si pentru a analiza traficul, pentru care e nevoie de consimtamantul dvs. explicit.