Anordnung der Schaltflächen auf der Site mit Sass

Sehr oft stellen unsere Lieblingsdesigner Schaltflächen in Layouts in verschiedenen Größen und Größen her, von denen einige wiederholt werden, andere nicht. Es wäre schön, ein System zum schnellen Hinzufügen und Bearbeiten dieser Schaltflächen zu organisieren, bei dem sass @ extend hilfreich sein kann. Ich werde eine kleine Illustration der Schaltflächen in einem typischen Projekt geben.



Wie nicht zu tun


Der HTML-Code für unsere Schaltflächen bleibt im gesamten Artikel unverändert:


Das erste, was dem Layout-Designer einfällt, ist, die Stile für die Schaltflächen sofort in die Klassen unserer Elemente zu schreiben.

SCSS:

.about_butt {
	display: block;
	height:50px;
	line-height: 50px;
	text-align: center;
	font-family: 'intro';
	font-size: 12px;
}

Wir haben Stile für unsere Hauptklasse geschrieben, jetzt werden wir die Modifikationen nach Farbe vornehmen (für Farbe werden Variablen zur Vereinfachung verwendet):

.about_butt {
	display: block;
	height: 50px;
	line-height: 50px;
	text-align: center;
	font-family: 'intro';
	font-size: 12px;
	&.blue_mod {
		background: $blue_1;
		color: $white;
		transition: background .3s ease;
		&:hover, &:focus {
			text-decoration: none;
		}
		&:hover {
			background: lighten($blue_1, 5%);
		}
	}
	&.red_mod {
		background: $red_1;
		color: $white;
		transition: background .3s ease;
		&:hover, &:focus {
			text-decoration: none;
		}
		&:hover {
			background: lighten($red_2, 5%);
		}
	}
	&.yellow_mod {
		background: $yellow_1;
		color: $white;
		transition: background .3s ease;
		&:hover, &:focus {
			text-decoration: none;
		}
	}
}

Bisher ist alles einfach und klar, aber auf der nächsten Seite erscheint diese Schaltfläche:



Diese Schaltfläche hat die gleichen Abmessungen wie die vorherigen, aber ein anderes Design. Brechen wir das DRY-Prinzip und kopieren wir die Stile dafür von unseren vorherigen Schaltflächen:

.news_more_butt {
	display: block;
	height:50px;
	line-height: 50px;
	text-align: center;
	font-family: 'intro';
	font-size: 12px;
}

Wir haben uns für die Größen entschieden, fügen wir das Design hinzu:

.news_more_butt {
	color:$black_2;
	background: transparent;
	box-shadow:inset 0 0 0 2rem $gray_4;
	transition:all .3s ease;
	&:hover,&:focus {
		text-decoration: none;
	}
	&:hover {
		background: $gray_4;
		color:$white;
	}
}

Nun, ein paar Stile, um unsere Schaltfläche zu platzieren:

.news_more_butt {
	width: 186px;
	margin: 20px auto;
}

Gehen Sie weiter und auf der anderen Seite treffen wir den folgenden Button:



Das Design ist gleich geblieben, aber der Button und die Schriftgröße haben sich geändert. Und hier haben wir zwei Möglichkeiten:

  1. Kopieren Sie weiterhin Stile für verschiedene Schaltflächen und weisen Sie ihnen eindeutige Klassen zu
  2. Erstelle spezielle Klassen für die Dekoration und füge sie unseren Tags hinzu

Die Nachteile jedes dieser Ansätze liegen auf der Hand. Im ersten Fall kopieren wir zu viel Code, und wenn Sie etwas ändern müssen, müssen Sie es an mehreren Stellen ändern. Im zweiten fügen wir Präsentationsklassen hinzu, was auch nicht sehr gut ist (Bootstrap-Liebhaber würden sich dagegen wehren).
Es gibt jedoch einen dritten Weg - sass @extend (obwohl dies in jedem Präprozessor implementiert werden kann).

Dritter Weg


Ich habe Unreinheiten in einer separaten scss-Datei - buttons.scss, das ist sehr praktisch. Wir werden sie in Größen (+ Typografie) und Farbschemata unterteilen. Wir werden Klassen für Größen schreiben:

%butt_size_1 {
	display: block;
	height:50px;
	line-height: 50px;
	text-align: center;
	font-family: 'intro';
	font-size: 12px;
}
%butt_size_2 {
	display: block;
	height:70px;
	line-height: 70px;
	text-align: center;
	font-family: 'intro';
	font-size: 16px;
}

Großartig, und jetzt die Farbschemata:

%butt_gray_1 {
	color: $black_2;
	background: transparent;
	box-shadow: inset 0 0 0 2rem $gray_4;
	transition: all .3s ease;
	&:hover, &:focus {
		text-decoration: none;
	}
	&:hover {
		background: $gray_4;
		color: $white;
	}
}
%butt_blue_1 {
	background: $blue_1;
	color: $white;
	transition: all .3s ease;
	&:hover, &:focus {
		text-decoration: none;
	}
	&:hover {
		background: lighten($blue_1, 5%);
	}
}
%butt_red_1 {
	background: $red_2;
	color: $white;
	transition: all .3s ease;
	&:hover, &:focus {
		text-decoration: none;
	}
	&:hover {
		background: lighten($red_2, 5%);
	}
}
%butt_yellow_1 {
	background: $yellow_1;
	color: $white;
	transition: all .3s ease;
	&:hover, &:focus {
		text-decoration: none;
	}
	&:hover {
		background: lighten($yellow_1, 5%);
	}
}
%butt_green_1 {
	background: $green_1;
	color: $white;
	transition: all .3s ease;
	&:hover, &:focus {
		text-decoration: none;
	}
	&:hover {
		background: lighten($green_1, 5%);
	}
}

Wir haben also ein flexibles System für die Organisation unserer Buttons. Jetzt sieht unser SCSS so aus:

.about_butt {
	@extend %butt_size_1;
	&.blue_mod {
		@extend %butt_blue_1;
	}
	&.red_mod {
		@extend %butt_red_1;
	}
	&.yellow_mod {
		@extend %butt_yellow_1;
	}
}
.news_more_butt {
	@extend %butt_size_1;
	@extend %butt_gray_1;
	width: 186px;
	margin: 20px auto;
}
.show_news_butt {
	@extend %butt_size_2;
	@extend %butt_gray_1;
	display: inline-block;
}

Wenn ein neues Farbschema angezeigt wird, erstellen wir einfach eine @ -Erweiterung und verwenden diese, wenn sich die aktuelle ändert - wir beschwören den Designer direkt an einer Stelle.

Wichtige Punkte


  • Wir verwenden ruhige Klassen, keine Mixins (weniger als das resultierende CSS)
  • Wenn Sie eine einseitige Site mit einer kleinen Anzahl von Schaltflächen haben, ist dieses System redundant
  • In der stillen Klassenanzeige: Block wird deklariert, dann kann er in der Selektorregel umgeschrieben werden


PS: Dieses System wurde von Andrey Boyko entwickelt , wofür vielen Dank an ihn!

Jetzt auch beliebt: