Menu
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>
<div class="container">
container
</div>
<div class="another-container">
another-container
</div>
</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?
845
To use variables across multiple files in SASS is carried out by @import rule of SASS. @import rule which import Sass and CSS stylesheets for providing variables, @mixins and functions. Such that combine all stylesheets together for compiled css. It also imports URL such as frameworks like Bootstrap etc..
What is a CSS map file? It is a JSON format file that links the CSS file to its source files, normally, files written in preprocessors (i.e., Less, Sass, Stylus, etc.), this is in order do a live debug to the source files from the web browser.
Add the following to the <head> tag of your HTML file. The extension we installed will compile the SASS file index. scss into CSS and store the compiled code in a new CSS file, also called index. css .
Browsers do not understand Sass, in order for browsers to understand the Sass code we write, we have to convert it into regular CSS code. We do this by running Sass compiler which converts our Sass code to into regular CSS code.
Try using gulp-sass and gulp-sourcemaps package with below gulpfile.js to render the sass file with source-map
var gulp = require('gulp');
var sass = require('gulp-sass');
var sourcemaps = require('gulp-sourcemaps');
gulp.task('default', function() {
gulp.src('*.sass')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('css'));
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
