I am new to Pug! been trying to create a simple mixin for nav-item and also am using Gulp 4 for compiling with Gulp-pug package! It keeps on showing error 'PUG:MIXIN_WITHOUT_BODY' I googled it but nothing. Tell what's wrong in it? is it a syntax error ?
mixin nav-item(name, link)
li.nav-item
a.nav-link(href=link)= name
The content of mixins must be indented one level beneath the line that starts with "mixin". Otherwise the mixin declaration is empty.
Write your mixin declaration like this instead:
mixin nav-item(name, link)
li.nav-item
a.nav-link(href=link)= name
Related
I am wondering how can I can include a different sass file (theme) based on a certain class?
Now we got 3 apps which all have an unique css class for its styling (.app1 {.background-color: red;})
Now i want to include sass framework and seperate all the css/sass per app label. In order to achieve this we define a base.scss. In this scss we want to reach this:
if .app1 then execute app1.scss
else if .app2 then execute app2.scss
else if .app3 then executr app3.scss
else empty
Anyone an idea?
Use a namespace and apply it as a class to the root element. Wrap SASS statements in the appropriate namespaces. You can separate them into different files (partials) and combine them when they get compiled.
// in file _app1.scss
.app1 {
// rules you want applied in the "app1" case
}
// in file _app2.scss
.app2 {
// rules you want applied in the "app2" case
}
...
If you separate files into _app1.scss, _app2.scss, etc. then base.scss will include:
#import 'app1';
#import 'app2';
...
This combines the partial files into one when you compile. (You don't have to separate them, but it might be cleaner to do so.) Then, you do something like <body class="app1">... to use the app1 namespace, and only rules from _app1.scss will apply.
I use SCSS with Webpack. I have a div I want to fill with background image. When I hardcode it in HTML:
<div class="plus-icon"
style="background-image: url('graphics/plus-icon.png');">
</div>
everything is ok, but when I try to set it via SCSS like that:
.plus-icon {
background-image: url('graphics/plus-icon.png');
}
I got such errors:
Uncaught Error: Cannot find module "./graphics/plus-icon.png"
> webpackMissingModule #
/* ... */
./~/css-loader!./~/sass-loader!./src/stylesheets/main.scss
Module not found: Error: Cannot resolve 'file' or 'directory'
./graphics/plus-icon.png in /home/karol/GitProjects/monterail-test/src/stylesheets
resolve file
/home/karol/GitProjects/monterail-test/src/stylesheets/graphics/plus-icon.png
doesn't exist
/* ... */
As we can see, Webpack tries to load my PNG too early and interprets given path wrongly.
How can I fix it?
You need to make it relative to the path of the SCSS file, not relative to your HTML file.
I am creating a small personal project mainly with HTML and CSS, but I am new in this and have some problems. I want to use the W3.CSS framework but I don't want to explicitly use it in the html files (like <div class="w3-container">...) because I might want to use something else later and don't want to refactor every file. Googling I learned about less mixins I had the idea of using my own style.less file and from there import w3.css and inherit, for example, .w3-container class for header tags, which I believe cannot be done with only CSS. Anyway, what I am trying to do is:
#import "w3.css";
header {
.w3-container;
}
Both files, "style.less" and "w3.css", are on the same folder and I use the following command to try and compile it:
lessc style.less style.css
Which outputs the error:
NameError: .w3-container is undefined in <path to style.css> on line 3, column 2
I am probably not using less how it's supposed to be. I looked at other questions, for example this one but couldn't do it. I also noticed that my node.js and npm were really outdated: node: v0.12.4, latest: v5.11.0 npm: 2.10.1, latest: 3.8.7 but that wasn't it.
Why doesn't it work?
What other way can I avoid explicitly using classes such as "w3-container"?
Thanks.
Question part 1
With regards to the error:
NameError: .w3-container is undefined in on line 3, column 2
You've used .w3-container as a mixin, but the mixin hasn't been defined. You'd need to define the mixin like so:
#import "w3.css";
.w3-container() {
/*Styles to apply to the mixin would go here*/
}
header {
.w3-container;
}
However it doesn't sound like using a mixin was actually your goal.
Question part 2
With regards to your comment:
What other way can I avoid explicitly using classes such as "w3-container"
LESS compiles down to CSS, so there's no magic that LESS can provide in terms of selectors (such as aliasing W3.css), other than providing some extended functionality to reduce repetition and make your code more maintainable. If you don't want to add new CSS classes, your options are limited to using valid CSS selectors using a higher specificity. The example below is based on path. If w3.css contains:
header {
color: blue;
}
Then to target a header in a section you could use the more specific selector (in LESS):
section {
header {
color: orange;
}
}
This will compile to the CSS:
section header {
color: orange;
}
Question part 3
When you're trying to target an instance of an element of a particular class, it is important to prefix the class with & and include brackets for defining the properties to style like so:
header {
&.w3-container {
color: orange;
}
}
This will compile to the following CSS:
header.w3-container { color: orange; }
If you use .w3-container; by itself, LESS will assume you want to use a mixin here, and will throw the error from Question part 1 since there is no mixin defined with the name .w3-container.
#import (less) "w3.css";
header {
.w3-container;
}
I got an error when i put a nested ng-show attributes for custom directive,
one attribute in the markup of the directive and the second inside the root element of the directive template.
My real scenario are complex so i will simplify it to this example:
Suppose i have my-custom-directive below which already contains ng-show:
<my-custom-directive ng-show="someValue >= 5"></my-custom-directive>
And then the template of 'my-custom-directive' look like this:
<div ng-show="options != null">My Custom Directive</div>
Those multiple ng-show together cause an error.
if i remove one of them or move the inner ng-show at least one level deeper in it's dom tree the error gone (it's happen when it's location is on the root template element).
this error tested on angular v1.4.8.
Is this angular bug? or there is a reasonable explanation for this behavior?
here is the Plunker example:
http://embed.plnkr.co/ZTZVcfc5bfmjPo9t0Isw
Thank you in advance,
Menachem
Because the directive has replace: trueit is trying to merge the two ng-show values together resulting in an error. The simplest solution I believe is to just do replace: false
Or you can inject the value via isolate scope and use a single ng-show value within the directive. I believe this is considered the cleaner solution.
Example: http://plnkr.co/edit/5oc8c1Hrz8N1F2klCio7?p=info
scope: {
someValue: '=someValue'
}
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