It won't compile it says:
Undefined variable: "$blue-logo-color."
In variables.scss I have:
$blue-logo-color: #3cabf5;
and in site.scss I have:
#import "variables.scss"
.blue-logo-color {
color: $blue-logo-color;
}
.blue-logo-background-color {
background-color: $blue-logo-color;
}
How can I make the WebCompiler include global scss/css files for the compiler? It also doesn't seem to recognize global includes from _Hosts.cshtml.
SCSS import statements require a semicolon
#import "variables.scss";
Related
I have a main.scss file that I want to import colors into from a _colors file.
I have defined a body color in the color file, when I try to import it, I see no changes in the webpage. They are both in the same scss folder but neither #include or #import seem to make a difference. I have tried with and without the underscore in my import statement, both single and double quotes and both import and include keywords. Please tell me what stupid mistake I am making that will rectify this problem as I have researched the problem and think I have been able to copy the examples with no success.
_colors.scss
body {
$background-color: maroon;
}
main.scss
#include 'colors';
Partials are used with #use directive. Then,
_colours.scss
body{
background-color: maroon;
}
style.scss
#use "_colours";
The reuse of code is done through the #mixin directive.
_colours.scss
#mixin body--background{
background-color:maroon;
}
style.scss
#use "_colours.scss" as so;
body{
#include so.body--background;
}
But, if you want to just define just colours use variables instead. Example below,
_colours.scss
$maroon=maroon;
$lightblue=//et cetera.
style.scss
#use "_colours";
body{
background-color:$maroon;
}
If you have a main.scss file which will be the file that gets compiled, and you want to import variables, mixins etc from another partial file, such as _colors.scss. You could do so by loading the members from the partial _colors.scss into main.scss with a #use at-rule. This allows loaded members from the module to be referenced with dot-notation throughout your main.scss stylesheet.
Let's say your _colors.scss file looked like this:
$bodyColor: maroon;
$someOtherColor: #f06;
/* adding a mixin for demo */
#mixin highlight($c, $bg) {
color: $c;
background: $bg;
}
/* some extra styles pertaining to _color.scss */
.some-styles {
color: $someOtherColor;
}
Note: The syntax for #use is #use <url> as <namespace>;.
You could load the variables/mixins etc into main.scss with a #use rule and reference the namespace throughout your program:
#use "./colors" as c;
body {
background-color: c.$bodyColor;
}
.highlighted {
#include c.highlight(#fff, #f06);
}
or without defining a namespace like:
#use "./colors" as *;
body {
background-color: $bodyColor;
}
.highlighted {
#include highlight(#fff, #f06);
}
You certainly can include a body {} declaration inside _colors.scss and load it the same way as discussed above, but I think your wanting to place the body style block inside main.scss and simply reference loaded variables from _color.scss. If you have a directory of many partials and want to load them into main.scss without writing separate #use rules for each load, then introduce a index file with #forward rules to load an entiry directory of partials into main.scss using a single #use rule.
I created a blank Ionic4 app and in the src/global.scss, I declare a variable $padding: 16px. I then tried to use the $padding in an element in home.page.scss as follows:
.highlight {
padding: $padding;
}
I expected it to output the following as it does in Ionic3:
.highlight {
padding: 16px;
}
Instead in Ionic4 I am getting an undefined variable on the $padding during the build process. Can we not use global SCSS variables within the page styles anymore or am I missing something obvious here?
You need to import the global.scss file in your page.scss file to get it work
#import '../../global.scss';
Since global.scss already include for the project. So the solution is that you make a new file common.scss and import it inside page.scss with
#import '../../common.scss';
And inside common.scss you can type
$padding: 16px
How do I get media queries to work in bootstrap? I have a SCSS file, I think I need to import something but I have no idea what.
Error message:
Scss compiler error: Error: no mixin named media-breakpoint-up
Path: homepage.scss
#include media-breakpoint-up(sm) {
h1.home-page {
font-size: 3rem;
}
}
You could #import the entire "bootstrap" scss, and then define the custom #include...
#import "bootstrap";
#include media-breakpoint-up(sm) {
h1.home-page {
font-size: 3rem;
}
}
or, you can import functions, variables and mixins (since this includes only what is needed for the mixin)...
#import "bootstrap/functions";
#import "bootstrap/variables";
#import "bootstrap/mixins";
/* change col style on sm only */
#include media-breakpoint-up(sm) {
h1.home-page {
font-size: 3rem;
}
}
#import "bootstrap";
It all depends on what other customizations you have.
https://codeply.com/go/3zTbKtczVd
Also see: How to extend/modify (customize) Bootstrap 4 with SASS
I'm writing my own static site generator in ruby and I'm in the process of adding Sass compiler to my code.
def compile_sass
# system 'sass _sass/styles.scss styles.css'
options = {
syntax: :scss,
style: :compressed
}
render = Sass::Engine.new(File.read('_sass/styles.scss'), options).render
File.write('style.css', render)
end
But problem occurs when the styles.scss file has #import in it. Causing
(sass):1: File to import not found or unreadable: variables. (Sass::SyntaxError)
Both SCSS files are located in _sass folder, main script in root, and compile_sass is located in _generator. But when I uncomment the system call and comment the rest, everything works as expected.
styles.scss
#import 'variables';
html {
background-color: red;
}
_variables.scss
body {
background-color: blue;
}
I tried almost everything, checked how to import stuff, looked at the documentation, but I can't find anything that would helped me find and define the problem.
Turns out I had to load all _sass/*.scss files into Sass::Engine like this:
Sass::Engine::DEFAULT_OPTIONS[:load_paths].tap do |load_paths|
load_paths << '_sass'
end
For example:
main.scss
#import "variables";
#import "page";
_variables.scss
$color-a: #FFFFFF;
_page.scss
div.test {
background: $color-a;
}
Or does variables have to be imported on every sheet that wants to use a variable from it?
Currently, I'm getting Error: Undefined variable: "$color-a"
Edit I should add that I'm using sassc to compile the files in a clojure project:
:sass {:sass-file "main.scss"
:source-maps false
:output-style "compressed"
:output-dir "css/"}}