Menu
Getting an error message when compiling my SCSS using the ruby compass gem.
run: /var/lib/gems/1.8/gems/compass-0.12.2/bin/compass compile out: unchanged sass/partial/grid.scss out: error sass/partial/catalog.scss (Line 5: Undefined variable: "$paragraphFont".) out: create css/generated/partial/catalog.css out: create css/generated/partial/base.css out: overwrite css/generated/screen.css My screen.scss imports partials like this:
@import "partial/base"; @import "partial/catalog"; In my base partial I have the $paragraphFont defined.
$paragraphFont: 'Lucida Sans', arial; $regularFontSize: 14px; And in catalog.scss I use it:
.product-view #price-block { p { font-weight: normal; font-family: $paragraphFont; .... } } Weird thing is that the css gets compiled just fine, and the $paragraphFont is populated correctly. So I don't know why the compiler is complaining at me about an error.
327
Sass variables and JavaScript. Sass is a pre-processing language, meaning it's turned into CSS before it ever is a part of a website. For that reason, accessing them from JavaScript in the same way as CSS custom properties — which are accessible in the DOM as computed styles — is not possible.
To convert the SASS variable to a CSS custom property you put curly brackets around it, and a hash in front. If you've used template literals in JavaScript it's the same thing, just with a # instead of a $ (because we already have $ in the variable name).
Sadly, there is not any way to "make Sass variables dynamic", because Sass itself is pre-compiled, while CSS is interpreted by the browser (dynamically) at runtime.
A Sass variable must be initialized with a value. To change the value, we simply replace the old value with a new one. A variable that's initialized inside a selector can only be used within that selector's scope. A variable that's initialized outside a selector can be used anywhere in the document.
You're generating files that don't need to be generated.
The catalog file is being compiled on its own. Since it is not importing base.scss, the variables are not set. Your screen.scss file generates as you expect because it is importing all of the necessary information.
What you want to do is rename your partials to begin with an underscore to prevent them from being compiled on their own:
200
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
