Getting error when trying to compile SASS to CSS for website

Question

Hi everyone I am trying to compile my SASS file to CSS using Scout-app and it has been working fine up until now. I am receiving the following error upon saving to compile I have attached the code and variables below!

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

Can someone please assist me it would be much appreciated!

**`//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

Hi Tanay I am still getting an error? Invalid CSS after "@mixin h1-text {": expected "}", was "{" mixins.sass 1: //TEXT MIXINS 2: @mixin h1-text { 3: color: $red-text; — shaminder galla, Apr 04 '18 at 08:51
I think you have a problem with **`//TEXT MIXINS line.. it cannot parse it. — tanaydin, Apr 04 '18 at 08:54
Unfortunately I tried to remove the comment and after having done so the error is still occuring — shaminder galla, Apr 04 '18 at 08:55
Delete the `**`//TEXT MIXINS` and the ``**` at the end, and add a `;` after every declaration. — Derpanel, Apr 04 '18 at 09:00
Hi @MichaelB. it wont allow me to update the example code although the only difference is the first //TEXT MIXINS comment is deleted as well as adding ";" to the end of every line. — shaminder galla, Apr 04 '18 at 09:07
A mixin should look like this `@mixin cursor2 { cursor: $cursor-removal2; }` No more no less. It should work if you write it correctly. I copied your code and compiled it fine. — Derpanel, Apr 04 '18 at 09:11
@Derpanel precisely could it be something wrong with my compiler? scout-app? as I only wrote my mixins the same way as I always do... — shaminder galla, Apr 04 '18 at 09:15
You are doing something wrong. Start with a blank file, add just one variable `$color: red;` and compile. If that doesn't compile then change compiler. If it compiles, add a simple mixin - `@mixin red{ color: $color; }`. Keep adding stuff with this syntax, and see where the compiler fails. — Derpanel, Apr 04 '18 at 09:28
@Derpanel This is a problem with the mixins themselves as I have done what you stated and the document is compiling fine? — shaminder galla, Apr 04 '18 at 10:16
You are using the SCSS syntax with the SASS extension, that's the problem. Read Jeremy's answer for correct SASS syntax, or stick with your syntax but change the file extension to .scss. Read more here: https://stackoverflow.com/a/27209555/1523418 — Derpanel, Apr 05 '18 at 11:41

score 1 · Answer 1 · answered Apr 05 '18 at 09:47

I fixed your file for you.

Find it at the end of this post.

The main issue is that you mixed some CSS (from line 1 to 148) with the rest of your Sass file (148 to end of file). You can't just copy paste CSS into a Sass file. You have to adapt it.

Here were your issues:

Line 1 and 148, there was a **' strange thing (I think it's due to some copy-pasting), removed it.
Sass don't use semi-colons to end lines, I removed all of them
@mixin is a SCSS keyword, not a Sass keyword, you must use = instead, I replaced all your @mixin with =
Curly braces are not used in Sass, only indentation, I removed all {}

Now here is you file mixins.sass written in plain Sass syntax:

//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

Duh... I just realized he probably had the `.sass` extension on the file and not `.scss`... Nice one — Derpanel, Apr 05 '18 at 11:38
Thank you so much Jeremy... I cannot believe I made such a rookie mistake! I appreciate all your help! — shaminder galla, Apr 05 '18 at 13:20

score 0 · Accepted Answer · answered Apr 04 '18 at 09:10

0

Remove the { } ... you do not need those

@mixin something
  attribute: value

answered Apr 04 '18 at 09:10

Markus

214
3
6

Hi Markus thanks for the example although this did not work – shaminder galla Apr 04 '18 at 09:18
Are you shure i have just copy pasted your code and removed all { } ; and your comments. For me it worked. Before i have got similar errors. – Markus Apr 04 '18 at 09:25

Getting error when trying to compile SASS to CSS for website

2 Answers2