尝试将SASS编译为CSS以获取网站时出错

时间：2018-04-04 08:46:07

标签： html css sass compilation

大家好我正在尝试使用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

2 个答案:

答案 0 :(得分：1)

我为你修好了你的文件。

在这篇文章的最后找到它。

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

以下是您的问题：

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

    5. 现在，您可以使用简单的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

答案 1 :(得分：0)

删除{} ...你不需要那些

@mixin something
  attribute: value
相关问题
最新问题