将 CSS 重写为 Sass 时遇到问题 - 嵌套和选择器组合

Question

我很难弄清楚如何将 CSS 编写为 SASS。我已经尝试嵌套代码并使用 & 符号来组合选择器，但我不知道我在做什么。

这是我试图重写为 SASS 的代码

{
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;
}

我想看看这段代码写成 SASS 的样子，也称为 SCSS

Answer 1

简短的回答是您需要做的就是将 CSS 扩展名更改为 SCSS 并编译它（任何有效的 CSS 也是有效的 SCSS）。

长答案是您可以通过多种方式做到这一点——我更喜欢使用 mixin 来控制渲染顺序。如果您刚刚开始，我建议您从研究嵌套、“&”（父选择器）和变量（这里是开始https://sass-lang.com/guide 和这里https://sass-lang.com/documentation 的地方）开始。

可能是这样的：

//  Variables
$color-white: #fff;
$color-black: #000;
$color-gray : #ccc;
$color-light-gray : #ddd;
$color-semi-dark-gray  : #999;
$color-dark-gray  : #888;

* {
    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: $color-black;
    height: 100vh;
    padding-top: 1rem;
    padding-bottom: 1rem;
    padding-left: 2rem;

    //  Nesting 
    //  .primary-list__item
    &__item {
        padding: .5rem;
    }

    //  .primary-list__link
    &__link {
        letter-spacing: .05rem;
        color: $color-dark-gray;

        //  .primary-list__link--active,
        //  .primary-list__link:hover
        &--active,
        &:hover {
            color: $color-white;
        }
    }
}

// mail list

.secondary-list {
    border-right: 1px solid $color-gray;
    height: 100vh;
    overflow-y: auto;


    //  .secondary-list__item
    &__item {
        padding: 2rem;
        border-bottom: 1px solid $color-gray;
        display: flex;
        flex-direction: column;
        color: $color-semi-dark-gray;
    }

    //  .secondary-list--active, 
    //  .secondary-list:hover  
    &--active,
    &:hover {
        box-shadow: 0px 10px 20px $color-light-gray;
    }

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

    //  .secondary-list__title
    &__title {
        color: $color-black;
        font-weight: bold;
    }

    //  .secondary-list__aside
    &__aside {
        font-style: italic;
    }
}

// mail content

.content {
    padding: 2rem;

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