Menu icon Foundation

Coder | Marikina

Fan of Foundation Framework! <3

My Posts

  • 13
    Replies
  • Sass syntax error on Rails

    By Neil Gardose

    Foundation Sass

    I'm having a sass syntax error on my project. Here's the errors Invalid CSS after "...odules, $name) ": expected "}", was "!global;" & app/assets/stylesheets/foundation_and_overrides.scss:13 I don't know what to do, I've update my gemfile an... (continued)

    Last Reply by Karl Ward almost 5 years ago



My Comments

Neil Gardose commented on Michael Degli-Angeli's post almost 5 years

I've modify the _function.scss and remove the !global. Now it's working but I still don't know if this is the right way and not make any errors in the future.
http://foundation.zurb.com/forum/posts/19222-sass-syntax-error-on-rails

Neil Gardose commented on Neil Gardose's post almost 5 years

I found a solution but I don't know if this is the right one but it works anyway,
I checked the path of my foundation gem by using bundle command
"bundle show foundation-rails"
Go to the path and find "_function.scss"
Remove the "-global" on line 13.

Run server and no Sass::SyntaxError occur.

Neil Gardose commented on Michael Degli-Angeli's post almost 5 years

Hello. I'm new to foundation and I'm using rails. I'm using foundation and sass via bundler and I don't know how to access _function.scss in my project. Can anyone help me? Thanks. I'm using ubuntu for my os.

Neil Gardose commented on Neil Gardose's post about 5 years

Here's my newest code dealing with background scaling. It also scale on it's heighta and also add interchange feature of foundation.

<section data-interchange=" [<%= image_path('lifestyle-hero-sm.jpg') %>, (small)],
                        [<%= image_path('bonfire-lg.jpeg') %>, (large)]"
                        class = "homepage-hero" >
  <!-- TODO: Generate hero content and marketing -->
</section>
.homepage-hero {
  background: no-repeat center center;
  background-attachment: scroll;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  padding: 160px 20px 20px 0;
} 

Neil Gardose commented on Neil Gardose's post about 5 years

UPDATE:

#sample-id {
  background: url(../images/sample.jpg) #202020 no-repeat;
  background-size: cover;
  max-height: 100%;
  max-width: 100%;

  @media #{$small-only} {
    background-position: center;
  }
}

Neil Gardose commented on Neil Gardose's post about 5 years

Oh okay. I did found a solution. All I did was to add this on scss code. And the scale works perfectly! :)

#sample-id {
  background: url(../images/sample.jpg) #202020 no-repeat;
  background-size: cover;
  max-height: 100%;
  max-width: 100%;
}

Posts Followed

No Content

Following

    No Content

Followers

My Posts

My Comments

You commented on Michael Degli-Angeli's post almost 5 years

I've modify the _function.scss and remove the !global. Now it's working but I still don't know if this is the right way and not make any errors in the future.
http://foundation.zurb.com/forum/posts/19222-sass-syntax-error-on-rails

You commented on Neil Gardose's post almost 5 years

I found a solution but I don't know if this is the right one but it works anyway,
I checked the path of my foundation gem by using bundle command
"bundle show foundation-rails"
Go to the path and find "_function.scss"
Remove the "-global" on line 13.

Run server and no Sass::SyntaxError occur.

You commented on Michael Degli-Angeli's post almost 5 years

Hello. I'm new to foundation and I'm using rails. I'm using foundation and sass via bundler and I don't know how to access _function.scss in my project. Can anyone help me? Thanks. I'm using ubuntu for my os.

You commented on Neil Gardose's post about 5 years

Here's my newest code dealing with background scaling. It also scale on it's heighta and also add interchange feature of foundation.

<section data-interchange=" [<%= image_path('lifestyle-hero-sm.jpg') %>, (small)],
                        [<%= image_path('bonfire-lg.jpeg') %>, (large)]"
                        class = "homepage-hero" >
  <!-- TODO: Generate hero content and marketing -->
</section>
.homepage-hero {
  background: no-repeat center center;
  background-attachment: scroll;
  -webkit-background-size: cover;
     -moz-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  min-width: 100%;
  min-height: 100%;
  padding: 160px 20px 20px 0;
} 

You commented on Neil Gardose's post about 5 years

UPDATE:

#sample-id {
  background: url(../images/sample.jpg) #202020 no-repeat;
  background-size: cover;
  max-height: 100%;
  max-width: 100%;

  @media #{$small-only} {
    background-position: center;
  }
}

You commented on Neil Gardose's post about 5 years

Oh okay. I did found a solution. All I did was to add this on scss code. And the scale works perfectly! :)

#sample-id {
  background: url(../images/sample.jpg) #202020 no-repeat;
  background-size: cover;
  max-height: 100%;
  max-width: 100%;
}

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content