#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.

main.sass

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

_fonts.sass

@font-face
    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")

_variables.sass

$yellow: #fce001

_home.sass

.container
    color: $yellow
    text-align: right

.another-container
    color: $yellow
    text-align: center

    &:after
        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>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>hello</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
    
container
another-container
</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.

@update
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)";
    $("#home").css({
      "-webkit-transform": rotationStr,
      "-moz-transform": rotationStr,
      "transform": rotationStr,
      "background-size": -rotation
    });
  });
})
body,
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;
}
https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js

<body>
  
TestText
</div>


























































































</body>


Get this bounty!!!