#StackBounty: #css #sass SASS Source Map pointing to the wrong SASS file

Bounty: 50

I have 4 SASS files main.sass, _fonts.sass, _variables.sass, _home.sass.


@import 'fonts'
@import 'variables'
@import 'home'


    font-family: "FontAwesome"
    font-weight: normal
    font-style: normal
    src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?v=4.3.0")
    src: url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.eot?#iefix&v=4.3.0") format("embedded-opentype"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff2?v=4.3.0") format("woff2"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.woff?v=4.3.0") format("woff"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.ttf?v=4.3.0") format("truetype"), url("https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/fonts/fontawesome-webfont.svg?v=4.3.0#fontawesomeregular") format("svg")


$yellow: #fce001


    color: $yellow
    text-align: right

    color: $yellow
    text-align: center

        content: 'f0b0'
        font-family: FontAwesome
        font-style: normal
        font-weight: normal
        text-decoration: inherit
        position: absolute
        right: 20px
        display: inline-block
        font-size: 1.1em

Here’s my sample HTML

<!DOCTYPE html>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</body> </html>

I’m compiling my SASS file using this command: sass --watch main.sass:style.css

When I check my google chrome inspect element to container or another-container, its pointing to _variables.sass NOT _home.sass. _variables.sass only contain variables. I want it to point to _home.sass.

I managed to pinpoint what is causing the error, in the _home.sass in content: 'f0b0', if I remove this the source map is pointing to the correct line, why is this causing the error?

Get this bounty!!!

#StackBounty: #javascript #html #css #jquery-animate #css-animations How to rotate background image on scroll

Bounty: 50

I am trying to rotate background image while scrolling. The effect should look like cube. Sadly I could not find a way with css and jquery to make it look like in the video. On the gif, when scrolling down from gallery to next page, there is grill background which rotates and stretches by amount of page shown.

EDIT: Rotating animation has to look like this

What have I tried so far (unsuccessfully)


div class=”snippet”>

$(function() {
  var rotation = 0,
    scrollLoc = 0;
  $(window).scroll(function() {
    $("#galerie").text($(document).scrollTop() + "=ScrollTop,WinHeight=" + $(window).height());
    var newLoc = $(document).scrollTop();
    var diff = scrollLoc - newLoc;
    rotation += diff, scrollLoc = newLoc;
    var rotationStr = "rotateX(" + rotation / ($(window).height() * 2) + "turn)";
      "-webkit-transform": rotationStr,
      "-moz-transform": rotationStr,
      "transform": rotationStr,
      "background-size": -rotation
html {
  height: 100%;

body {
  background-color: #090909;

#home {
  height: 100%;
  position: relative;
  overflow: hidden;

#galerie {
  color: green;

#home:before {
  content: "";
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position: center bottom;
  background-color: grey;
  background-attachment: initial;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: -1;



Get this bounty!!!