Writing CSS as SASS

[footwear95]

Hello Everyone, I am trying to convert this code in Sass, but I am having trouble trying to figure out how to write the code from CSS to Sass. I tried to do some of the examples on the internet, but it confused me.

• {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  }

ul, li {
list-style-type: none;
}

a {
text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
font-weight: none;
}

// general

body {
font-family: 'Open Sans', sans-serif;
}

.app {
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr 3fr 5fr;
}

// renders the element off screen so that
// screen readers can still read the text.

.offscreen {
position: absolute;
left: -1000px;
}

// Navigation

.primary-list {
font-family: sans-serif;
background-color: #000;
height: 100vh;
padding-top: 1rem;
padding-bottom: 1rem;
padding-left: 2rem;
}

.primary-list__item {
padding: .5rem;
}

.primary-list__link {
letter-spacing: .05rem;
color: #888;
}

.primary-list__link--active,
.primary-list__link:hover {
color: #FFF;
}

// mail list

.secondary-list {
border-right: 1px solid #CCC;
height: 100vh;
overflow-y: auto;
}

.secondary-list__item {
padding: 2rem;
border-bottom: 1px solid #CCC;
display: flex;
flex-direction: column;
color: #999;
}

.secondary-list__item--active,
.secondary-list__item:hover {
box-shadow: 0px 10px 20px #DDD;
}

.secondary-list__row {
display: flex;
justify-content: space-between;
padding-bottom: 1rem;
}

.secondary-list__title {
color: #000;
font-weight: bold;
}

.secondary-list__aside {
font-style: italic;
}

// mail content

.content {
padding: 2rem;
}

.content__title {
font-size: 4rem;
width: 70%;
margin-bottom: 4rem;
}

.content p {
margin-bottom: 1.5rem;
line-height: 2rem;
}

[nex3]

This is a great question for the Sass StackOverflow community! We try to keep this issue tracker focused on bugs and feature requests that need the core team's attention in particular, while requests for support are usually better handled by the community at large.