html - 尝试将网站的 SASS 编译为 CSS 时出错

Question

大家好，我正在尝试使用 Scout-app 将我的 SASS 文件编译为 CSS，到目前为止它一直运行良好。我在保存编译时收到以下错误，我附上了下面的代码和变量!

Error: Invalid CSS after "@mixin h1-text {": expected "}", was "{"↵        on line 2 of ../../../Documents/bootstrap_practice/SASS/mixins.sass↵>> @mixin h1-text { {↵   ----------------^↵"

有人可以帮助我，将不胜感激!

**`//TEXT MIXINS
@mixin h1-text {
  color: $red-text
  font-family: $font-stack
  font-size: $font-size
  font-weight: $font-weight-nav
  letter-spacing: $h1-letter-spacing
  text-align: $alignment
  border: $border-original
  border-radius: $border-radius
}
@mixin h1-hover {
  color: $orange-text
  background-color: $navbar-background
  border: $border-original2
}
@mixin h2-text {
  color: $orange-text
  font-family: $font-stack
  font-size: $font-size
  font-weight: $font-weight-nav
  letter-spacing: $h2-letter-spacing
  text-align: $alignment
  border: $border-original2
  border-radius: $border-radius
}
@mixin h2-hover {
  color: $red-text
  background-color: $navbar-background
  border: $border-original
}
@mixin h3-text {
  color: $darkred-text
  font-family: $font-stack
  font-size: $h3-font-size
  font-weight: $font-weight-main
  text-align: $alignment
}
//MAIN TEXT BORDER MIXIN
@mixin border1-main {
  border: $border-modified
  border-radius: $border-radius2
  margin-top: 100px
  margin-bottom: 150px
}
//DIV MIXINS
@mixin div {
  width: $div-width
  margin: $div-align
}
@mixin div2 {
  width: $div-width2
  margin: $div-align
}
//NAVBAR MIXINS
@mixin navbar-main {
  overflow: hidden
  background-color: $navbar-background
}
@mixin navbar-fade-in {
  opacity: 1;
  transition: opacity .25s ease-in-out;
  -moz-transition: opacity .25s ease-in-out;
  -webkit-transition: opacity .25s ease-in-out;
}
@mixin navbar-a {
  float: left
  dispaly: block
  color: $darkred-text
  font-family: $font-stack
  text-align: center
  padding: 14px
  letter-spacing: $navbar-letter-spacing
  text-decoration: none
}
@mixin navbar-a-hover {
  background-color: $background
  color: $red-text
}
@mixin content-navbar {
  padding: 16px
}
@mixin sticky {
  position: fixed
  top: 0
  width: 100%
}
@mixin sticky-content {
  padding-top: 60px
}
//SOCIAL BAR MIXINS
@mixin icon-bar {
  position: fixed
  top: 50%
  -webkit-transform: translateY (-50%)
  -ms-transform: translateY (-50%)
  transform: translateY (-50%)
}
@mixin icon-bar-a {
  display: block
  text-align: center
  padding: 16px
  transition: all 0.5s ease
  color: $white
  font-size: 15px
}
@mixin icon-bar-a-hover {
  background-color: $navbar-background
  color: #000
}
@mixin facebook {
  background: $facebook
  color: $white
}
@mixin twitter {
  background: $twiter
  color: $white
}
@mixin google {
  background: $google
  color: $white
}
@mixin linkedin {
  background: $linkedin
  color: $white
}
@mixin youtube {
  background: $youtube
  color: $white
}
//FOOTER MIXIN
@mixin footer-main {
  position: fixed
  left: 0
  bottom: 0
  width: 100%
  background-color: $footer-background
  color: $white
  text-align: center
}
//CURSOR EDIT MIXIN
@mixin cursor1 {
  cursor: $cursor-removal
}
@mixin cursor2 {
  cursor: $cursor-removal2
}
`**

//text-colors
$red-text: #FF0000
$darkred-text: #C60505
$orange-text: #FF5733
$white: white

//background color
$background: #ECFFFE
$navbar-background: #E1F1F0
$footer-background: #E1F1F0

//social bar
$facebook: #3B5998
$twitter: #55ACEE
$google: #DD4B39
$linkedin: #007BB5
$youtube: #BB0000

//typography
$font-stack:    source-sans-pro, "Helvetica Neue", Helvetica, Arial, sans-serif
$font-stack-hover: "monospace"
$font-size: 30px
$h3-font-size: 25px
$h3-font-size-2: 20px
$font-weight-nav: 500
$font-weight-main: 400
$alignment: center
$h1-letter-spacing: 3px
$h2-letter-spacing: 3px
$navbar-letter-spacing: 2px

//borders
$border-original: 3px solid $red-text
$border-original2: 3px solid $orange-text
$border-modified: 2px solid $navbar-background
$border-radius: 30px
$border-radius2: 10px


//cursor
$cursor-removal: pointer
$cursor-removal2: default

//divs
$div-width: 400px
$div-width2: 800px
$div-align: auto

Answer 1

我为你修复了你的文件。

在这篇文章的末尾找到它。

主要问题是您将一些 CSS(从第 1 行到第 148 行)与 Sass 文件的其余部分(从第 148 行到文件末尾)混合在一起。您不能只是将 CSS 复制粘贴到 Sass 文件中。你必须适应它。

这是您的问题:

1. 第1行和第148行，有一个**'奇怪的东西(我认为这是由于一些复制粘贴)，将其删除。
2. Sass 不使用分号来结束行，我删除了所有分号
3. @mixin 是 SCSS 关键字，不是 Sass 关键字，你必须使用 = 代替，我将你所有的 @mixin 替换为 =
4. Sass 中不使用大括号，只使用缩进，我删除了所有 {}

现在这是用普通 Sass 语法编写的 mixins.sass 文件:

//TEXT MIXINS
=h1-text
  color: $red-text
  font-family: $font-stack
  font-size: $font-size
  font-weight: $font-weight-nav
  letter-spacing: $h1-letter-spacing
  text-align: $alignment
  border: $border-original
  border-radius: $border-radius

=h1-hover
  color: $orange-text
  background-color: $navbar-background
  border: $border-original2

=h2-text
  color: $orange-text
  font-family: $font-stack
  font-size: $font-size
  font-weight: $font-weight-nav
  letter-spacing: $h2-letter-spacing
  text-align: $alignment
  border: $border-original2
  border-radius: $border-radius

=h2-hover
  color: $red-text
  background-color: $navbar-background
  border: $border-original

=h3-text
  color: $darkred-text
  font-family: $font-stack
  font-size: $h3-font-size
  font-weight: $font-weight-main
  text-align: $alignment

//MAIN TEXT BORDER MIXIN
=border1-main
  border: $border-modified
  border-radius: $border-radius2
  margin-top: 100px
  margin-bottom: 150px

//DIV MIXINS
=div
  width: $div-width
  margin: $div-align

=div2
  width: $div-width2
  margin: $div-align

//NAVBAR MIXINS
=navbar-main
  overflow: hidden
  background-color: $navbar-background

=navbar-fade-in
  opacity: 1
  transition: opacity .25s ease-in-out
  -moz-transition: opacity .25s ease-in-out
  -webkit-transition: opacity .25s ease-in-out

=navbar-a
  float: left
  dispaly: block
  color: $darkred-text
  font-family: $font-stack
  text-align: center
  padding: 14px
  letter-spacing: $navbar-letter-spacing
  text-decoration: none

=navbar-a-hover
  background-color: $background
  color: $red-text

=content-navbar
  padding: 16px

=sticky
  position: fixed
  top: 0
  width: 100%

=sticky-content
  padding-top: 60px

//SOCIAL BAR MIXINS
=icon-bar
  position: fixed
  top: 50%
  -webkit-transform: translateY (-50%)
  -ms-transform: translateY (-50%)
  transform: translateY (-50%)

=icon-bar-a
  display: block
  text-align: center
  padding: 16px
  transition: all 0.5s ease
  color: $white
  font-size: 15px

=icon-bar-a-hover
  background-color: $navbar-background
  color: #000

=facebook
  background: $facebook
  color: $white

=twitter
  background: $twiter
  color: $white

=google
  background: $google
  color: $white

=linkedin
  background: $linkedin
  color: $white

=youtube
  background: $youtube
  color: $white

//FOOTER MIXIN
=footer-main
  position: fixed
  left: 0
  bottom: 0
  width: 100%
  background-color: $footer-background
  color: $white
  text-align: center

//CURSOR EDIT MIXIN
=cursor1
  cursor: $cursor-removal

=cursor2
  cursor: $cursor-removal2

//text-colors
$red-text: #FF0000
$darkred-text: #C60505
$orange-text: #FF5733
$white: white

//background color
$background: #ECFFFE
$navbar-background: #E1F1F0
$footer-background: #E1F1F0

//social bar
$facebook: #3B5998
$twitter: #55ACEE
$google: #DD4B39
$linkedin: #007BB5
$youtube: #BB0000

//typography
$font-stack:    source-sans-pro, "Helvetica Neue", Helvetica, Arial, sans-serif
$font-stack-hover: "monospace"
$font-size: 30px
$h3-font-size: 25px
$h3-font-size-2: 20px
$font-weight-nav: 500
$font-weight-main: 400
$alignment: center
$h1-letter-spacing: 3px
$h2-letter-spacing: 3px
$navbar-letter-spacing: 2px

//borders
$border-original: 3px solid $red-text
$border-original2: 3px solid $orange-text
$border-modified: 2px solid $navbar-background
$border-radius: 30px
$border-radius2: 10px


//cursor
$cursor-removal: pointer
$cursor-removal2: default

//divs
$div-width: 400px
$div-width2: 800px
$div-align: auto