如何将下面的CSS转换成SCSS格式?
How to convert the following CSS into SCSS format?
我正在使用我添加到灵活内容模板客户字段的新布局来处理 WordPress 页面。我找到了应该放置样式的 .scss 文件,但不确定如何将我的 CSS 转换为 .scss 格式。下面是CSS我要改成SCSS.
.hero-with-text-cta-hero {
background-color: #ececec;
}
.texts-and-cta {
position: absolute;
top: 2rem;
right: 4rem;
width: 40%;
text-align: right;
}
.texts-and-cta-col {
position:static !important;
}
.texts-and-cta h2 {
margin-left: 1rem;
margin-right: 1rem;
font-size: 1.8rem !important;
font-family: Roboto, sans-serif !important;
text-transform: none !important;
letter-spacing: normal !important;
font-weight: 400 !important;
color: #a6a2a3 !important;
}
@media (max-width: 959px) {
.texts-and-cta {
position: relative;
top: 0;
right: 0;
width: 100%;
text-align: center;
padding-top:1rem;
}
}
.hero-with-text-cta-hero h1 {
color: #666766 !important;
}
@media (min-width: 1280px) {
.hero-with-text-cta-hero h1 {
font-size: 4rem !important;
}
}
复制到.scss文件中即可,sass可以正常处理css
我正在使用我添加到灵活内容模板客户字段的新布局来处理 WordPress 页面。我找到了应该放置样式的 .scss 文件,但不确定如何将我的 CSS 转换为 .scss 格式。下面是CSS我要改成SCSS.
.hero-with-text-cta-hero {
background-color: #ececec;
}
.texts-and-cta {
position: absolute;
top: 2rem;
right: 4rem;
width: 40%;
text-align: right;
}
.texts-and-cta-col {
position:static !important;
}
.texts-and-cta h2 {
margin-left: 1rem;
margin-right: 1rem;
font-size: 1.8rem !important;
font-family: Roboto, sans-serif !important;
text-transform: none !important;
letter-spacing: normal !important;
font-weight: 400 !important;
color: #a6a2a3 !important;
}
@media (max-width: 959px) {
.texts-and-cta {
position: relative;
top: 0;
right: 0;
width: 100%;
text-align: center;
padding-top:1rem;
}
}
.hero-with-text-cta-hero h1 {
color: #666766 !important;
}
@media (min-width: 1280px) {
.hero-with-text-cta-hero h1 {
font-size: 4rem !important;
}
}
复制到.scss文件中即可,sass可以正常处理css