Sass works in codepen but not on desktop

Ruby
1

Hello all run some very super simple sass (just getting started with it. it is not displaying correctly on my desktop. even tough the ruby command lines seems to be working fine, it lists, recgongizes the files in the appropriate dir & it flags errors and realizes when they have been corrected.

it is however displaying in the codepen

http://codepen.io/pdxSherpa/pen/bNxQvR

Any advice on how i could fix this (without switching to vagrant,puphet or a linux vm…)
thx
D

2

What is the outputted CSS in your local file test? E.g. what’s in the view-source?

Don’t use SASS :wink: .

3

yes. Would love not to use sass! sadly just want to get some extra experience in what is out there and trying to stay a bit current :smile:
(Seems i can’t copy & past the source.)
but i did that in the code pen. After you mentioned it i went and double checked the css link, updated it to
link rel="stylesheet" href="style.scss"
I have both a .css & .scss stylecheet. After the update i got this on my .css

/*# sourceMappingURL=style.css.map */
4

AFAIK your css files should be in .css (it gets run though the SASS engien to produce .css) so change it back to .css

What’s the view-source of the .css file? style.css?

5 
body {
  font-family: Helvetica, Arial, sans-serif; }
  body p {
    font-family: Times; }
  body p#mypara {
    font-family: "Courier New"; }

h1, h2 {
  color: navy; }

#mypara {
  font-size: 24px;
  border: 2px solid navy;
  padding: 15px 15px 15px 35px; }

#mypara:after {
  content: "with an appended string"; }

/*# sourceMappingURL=style.css.map */
6

Seems accurate to what the codepens scss should be outputting. What display issues are you having locally? The CSS should be producing the same result that you see in codepen.

Screenshots are welcome.

7

& this is the scss

$myColor1: navy;
$myColor2:#000080;
$myStringVar: "with an appended string";
$myFontSize: 24px;
$thinBorder: 2px solid $myColor1;
$paddingVar: 15px 15px 15px 35px;


body{
	font-family:Helvetica, Arial, sans-serif;
	p{
	font-family:Times;
	}
	p#mypara{
	font-family:"Courier New";
	}
}

h1, h2 {
color:$myColor1;
}

#mypara{
font-size:$myFontSize;
border: $thinBorder;
padding: $paddingVar;
}
#mypara:after{
content:$myStringVar
}

and this is the style.css.map


{
"version": 3,
"mappings": "AAQA,IAAI;EACH,WAAW,EAAC,4BAA4B;EACxC,MAAC;IACD,WAAW,EAAC,KAAK;EAEjB,aAAQ;IACR,WAAW,EAAC,aAAa;;AAI1B,MAAO;EACP,KAAK,EAnBM,IAAI;;AAsBf,OAAO;EACP,SAAS,EApBI,IAAI;EAqBjB,MAAM,EApBO,cAAmB;EAqBhC,OAAO,EApBM,mBAAmB;;AAsBhC,aAAa;EACb,OAAO,EA1BO,yBAAyB",
"sources": ["style.scss"],
"names": [],
"file": "style.css"
}

frankly the tutorial am following was not 100% clear as to how many files you are eventually supposed to have and there was no mention of a map.

8

The SASS you posted should be outputting the same CSS you posted in your previous post.

I’m still not entirely sure what your issue is here. Can you get this up on a server somewhere so we can actually see the differences your SASS is producing compared to codepen?

9

not right now actually. but will try later on today from another location. thank you though.
D

11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.