I'm trying Zurb Foundation 5.
So, I've created a new project and try changing settings. When I changed, for example, $row-width: rem-calc(1170); in my-project/scss/settings.scss, it compiled (in my-project/stylesheets/app.css) into:
.row {
max-width: rem-calc(1170);
}
It seems like it doesn't know about rem-calc function.
How to make it calculate rem-calc properly?
Your function doesn't exist. You must declare it (or import it from another file) before you use it. Sass does not throw errors for non-existent functions because they have a similar syntax to CSS functions. So it assumes that if it isn't a Sass function that it must be a CSS function.
Related: Test whether a Sass function is defined
Related
I set a style property on body when the page loaded. Just like:
document
.getElementsByTagName("body")[0]
.style.setProperty("--is-app", isApp ? 1 : 2);
And in my .scss file, I write this:
$isApp: var(--is-app);
#if $isApp == 1 {
do something...
}
#else{
do something...
}
But it did't work as I want.
Is this because of that the scss is pre-processor not runtime one?
Finally I change it by using different class name.
But I wonder if I missed something in scss? Is it possible to make it work just by scss syntax?
Sass is compiled on the server before it's sent to the browser. When it's being compiled, there is no document and front-end javascript doesn't run, so --is-app isn't defined.
I'm in the process of building a sort of framework tool in 1.24.x SCSS and I'm having trouble figuring out how people will override the default values for variables. Here's a loose example:
// framework/_variable.scss
$variable-1: red !default;
// framework/_module.scss
#use "variable" as *;
#mixin mixin-one {
color: $variable-1;
}
// framework/index.scss
#forward "module";
// project.scss
#use "framework" as * with (
$variable-1: blue,
);
This gives me an error because $variable-1 has already been imported by framework/_module.scss and cannot be overridden by a new import. Is it possible to circumvent this so that users of the framework can override the variables of the framework with their projects own properties?
I know this is an old question now, but for anyone else still finding it, the solution is to forward the variables / config file in your manifest before the modules importing them:
// framework/index.scss
#forward "variable";
#forward "module";
That will allow the user to change defaults before they're imported by the rest of your module. Those values will carry over into subsequent imports.
I am trying to write a unit test where I want to verify that a ajax call has been made.
The code is simple :
it('test spycall',()=>{
spyOn($,"ajax");
//my method call which in turns use ajax
MyFunc();
expect($.ajax.calls.mostRecent().args[0]["url"].toEqual("myurl");
});
The error that I get :
Property 'calls' doesn't exist on type '{settings:jqueryAjaxSettings):jQueryXHR;(url:string, settings?:JQueryAjaxSettings}
$.ajax.calls, among others, is part of the Jasmine testing framework, not JQuery itself (As you know, Jasmine (or rather, Jasmine-Jquery, the plugin you're using) is adding certain debugging functions to JQuery's prototype in order to, well, be able to test ajax calls).
The bad part is that your .d.ts typescript definition file, the file that acts as an interface between typescript and pure JS libraries isn't aware of Jasmine's functions.
There are several ways you could approach fixing this, like
looking if someone has adjusted the JQuery .d.ts file for Jasmine's functions or
creating the new .d.ts file yourself by modifying the original one or, (what I would be doing)
overwriting the typescript definition by declaring $.ajax as any, or not including the typescript definition at all in your testing codebase and declaring $ as any.
There are 2 ways to get rid of the error:
// 1
expect(($.ajax as any).calls.mostRecent().args[0].url).toEqual("myurl");
// 2
let ajaxSpy = spyOn($,"ajax");
expect(ajaxSpy.calls.mostRecent().args[0].url).toEqual("myurl");
You can also use partial matching:
expect(($.ajax as any).calls.mostRecent().args).toEqual([
jasmine.objectContaining({url: "myurl"})
]);
I am trying to save a selector in SASS for easier referencing later, however I get a syntax error.
Here's what I'm trying to do:
$icon: [class*="icon"];
You need to convert it to a string if you want to use it as a variable:
$icon: '[class*="icon"]';
#{$icon} {
// stuff
}
I'm trying Zurb Foundation 5.
So, I've created a new project and try changing settings. When I changed, for example, $row-width: rem-calc(1170); in my-project/scss/settings.scss, it compiled (in my-project/stylesheets/app.css) into:
.row {
max-width: rem-calc(1170);
}
It seems like it doesn't know about rem-calc function.
How to make it calculate rem-calc properly?
Your function doesn't exist. You must declare it (or import it from another file) before you use it. Sass does not throw errors for non-existent functions because they have a similar syntax to CSS functions. So it assumes that if it isn't a Sass function that it must be a CSS function.
Related: Test whether a Sass function is defined