Skip to content
Submitted 3 months ago

Sass Social Links Card

#sass/scss
P
Scott•310
@ldg
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Social links profile
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I feel like I'm getting better at setting up Sass and working with it.

What challenges did you encounter, and how did you overcome them?

When starting this project I used the Figma style guide to set up css custom properties based on the style guide. This worked great, but I found trying to set up falues to use for the font shorthand didn't seem to work. I'm not sure why, I thought initially that I had set the font shorthand properties in the wrong order, with the font family first. However even after correcting the order of the properties it still didn't work.

I eventually just wrote the font styles the long way, listing each separate property / value in the declaration.

Please log in to post a comment

Log in with GitHub

Community feedback

  • P
    kephalosk•280
    @kephalosk

    solid solution. :) You can improve your s/css-styling by avoiding nested css-classes.

    .soc-card {
	background-color: var(--grey-800);
	color: var(--white);
	text-align: center;
	width: u.rem(327);
	border-radius: 12px;

	&__avatar {
		width: u.rem(88);
		height: u.rem(88);
		border-radius: 50%;
		margin-top: var(--space-300);
	}
...
}

    With your code, you are implying that soc-card__avatar inherits the properties from soc-card, but that is not true. Your Code gets cleaner and more readable if you separate them, e.g.:

    .soc-card {
	background-color: var(--grey-800);
	color: var(--white);
	text-align: center;
	width: u.rem(327);
	border-radius: 12px;
}

.soc-card__avatar {
	width: u.rem(88);
	height: u.rem(88);
	border-radius: 50%;
	margin-top: var(--space-300);
}
    Marked as helpful

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord