在将 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)。

长答案是你可以用很多方式做到这一点——我更喜欢 mixins 来控制渲染顺序。如果你刚刚开始，我建议你从查看嵌套、'&'(父选择器)和变量(这里是 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;
}
}