I have a custom icon font (generated with Icomoon).
body {
--pseudo-element-content: '\e900';
div::before {
font-family: 'CustomFont';
content: var(--pseudo-element-content);
}
}
However, when doing this, my pseudo element doesn't appear in my browser (as if it didn't have any content). It looks like my css variable has the icon value interpreted and not its code.
If I change it to
div::before {
font-family: 'CustomFont';
content: '\e900';
}
it works like a charm. I tried a few tricks (string concat, adding ' and escaping them) but it didn't work.
I've tried it and it work with another character (see the snippet).
It seems that you don't have that font on your OS and the browser can't render it.
body {
--pseudo-element-content: "\016E";
}
div::before {
font-family: "CustomFont";
content: var(--pseudo-element-content);
}
<div><-- </div>
CSS variables are placed in the rules, not at the top level:
selector {
padding: 100px;
--some-var: 'abcdef'
}
Variables are inherited like the ordinary CSS rules.
If you want the variable to be visible everywhere, add it to html (or :root):
html {
--pseudo-element-content: '\e900';
}
Answer to edited question:
You are trying to place the styles inside each over, which is not supported in CSS. Perhaps, originally code was for CSS preprocessor - SASS.
The fix:
body {
--pseudo-element-content: '\e900';
}
div::before {
font-family: 'CustomFont';
content: var(--pseudo-element-content);
}
Related
Let’s say I have a few utility classes:
.primary-text {
color: blue;
}
.danger-text {
color: red;
}
.display-400 {
width: 400px;
}
.max-width-100 {
max-width: 100%;
}
Do classes like this require the !important keyword?
If you have some other CSS files that are loaded before this file, you have three ways to force your CSS content to load:
add !important
add your CSS file link tag at the end of another link tag
find a more accurate selector for your tag like this:
span.primary-text {
color: blue;
}
This code has higher priority.
But if you don't use any other CSS file that contains these selectors with the same properties, you don’t need to use !important.
So,
I have appended a home class to body like so:
document.body.classList.add("home")
I want to select appContainer a child element of body class by doing
html body.home #appContainer { ..... }
This works without CSS Modules but was wondering how I can do it with CSS modules. Thanks
You need to use wrap the class that you want to be global into :global(). If your selector uses an element you must write it directly after the element with no space in between, like element:global(.class) which translates into element.class.
Therefore, in your case html body:global(.home) #appContainer is the answer.
For anyone else that comes across this issue, I am using postcss-preset-env and I had to do this:
Worked ✅
.toolTipTest :global .rc-tooltip-arrow {
color: blue;
}
This did not work ❌
.toolTipTest:global(.rc-tooltip-arrow) {
color: blue;
}
And neither did this ❌
.toolTipTest:global(.rc-tooltip-arrow) {
color: blue;
}
// Neither Did this
.toolTipTest {
&:global(.rc-tooltip-arrow) {
color: blue;
}
}
Whenever I try to compile Sass code to CSS with either the terminal or the program Koala I get this error message:
Error: Invalid CSS after "body ": expected selector, was "{"
on line 5 of style.sass
Use --trace for backtrace
Here's the piece of code the error seems to be referring to:
body {
background {
color: $background-color
}
}
How can I fix my code to make it compile correctly?
The way your selector reads is that it is looking for the <body> element, and then a <background> element (which isn't a thing that exists in HTML, to my knowledge), and then you are setting the text inside that element to the color in your var $background-color. I think either one of two things:
Either you meant for background to be a class or id, like .background, in which case your code becomes:
body {
.background {
color: $background-color;
}
}
Or, more likely, you are very tired and just got your wires crossed, and mean to be setting the background-color property like this:
body {
background-color: $background-color;
}
Please note that you were also missing an ending semi-colon, which I added.
You cloud try adding a colon after background.
body {
background: {
color: $background-color;
}
}
Sass, unlike Scss, uses indentation instead of curly braces.
body {
background {
color: $background-color;
}
}
becomes
body
background
color: $background-color
Though, I'm quite sure you mean to have background as a property instead of a selector.
body
background-color: $background-color
background must be class name or id or simply background css property.
body {
.background {
color: $background-color;
}
}
body {
#background {
color: $background-color;
}
}
body {
background : $background-color;
}
Yesterday I decided to try Polymer 1.0 and I'm already facing difficulties when trying to styling the paper-toolbar.
The documentation says that the background colour can be changed by using:
--paper-toolbar-background
But how can I use it on CSS?
I tried the following:
paper-toolbar {
--paper-toolbar-background: #e5e5e5;
}
Also this:
paper-toolbar {
--paper-toolbar {
background: #e5e5e5;
}
}
But neither worked. What is the correct way to do it?
Thanks.
If you are styling it on your main page, then you have to apply styles using <style is='custom-style'>. This is to make Custom CSS Properties work.
Applying is relatively easy. paper-toolbar provides 2 custom properties and one mixin. --paper-toolbar-background is a property that changes the background color of the toolbar while --paper-toolbar-color changes its foreground color. --paper-toolbar is a mixin applied to the toolbar.
To use these properties is just the same as applying styles in your elements. As an example
<style is="custom-style">
paper-toolbar {
--paper-toolbar-background: #00f; /* changes the background to blue*/
--paper-toolbar-color: #0f0; /* changes the foreground color to green */
--paper-toolbar: {
font-size: 40px; /* Change default font size */
}; /* Notice the semicolon here */
}
</style>
I couldn't find a solution to this problem either until recently. I have two toolbars and I didn't want to change the CSS for all toolbars just the header toolbar.
To change the CSS for every toolbar, in your external css file add the following:
paper-toolbar.paper-toolbar-0 {
background: orange;
color: red;
}
However, that doesn't address the problem. To change a single paper toolbar based on a class like the following:
<paper-toolbar class="header">
...
</paper-toolbar>
The above uses the class called "header" so in my CSS I added:
paper-toolbar.header {
background: orange;
color: red;
}
... and it worked! Yay! That means with this you should be able to override any CSS of any of the other elements doing the same thing. This is completely untested but I think it should work like:
<elementName>.<classname> {
...
}
Hope this all helps!
How can we know if any website is using Sass and Compass for CSS?
That's a though one, but I would take a look at the CSS files, IF the developers forgot about changing the output, you'll be able to spot the file names and line numbers of the source files.
If not, look for uncommon patterns in the CSS output, for instance SASS makes nesting very easy to do, so a selector could look like this in the CSS (you would never hand-write this long selectors)
div#wrapper div#container ul#myId li a { color: blue; }
div#wrapper div#container ul#myId li.sass a { color: red; }
But would be look like this in SASS source file (no repetition, easy to getaway with)
div#wrapper {
div#container {
ul#myId {
li {
a { color: blue; }
&.sass {
a { color: red; }
}
}
}
}
}
Also, look for lengthy class combinations, those come from using the #extend directive, that would look like this:
.button, .button1, .button-submit, .button-add-to-cart, .button-signup, .button-register {
display: inline-block;
}
Another good idea is to look in the source of CSS3 generated buttons, usually developers only care for Firefox, Safari, Chrome and IE, but a SASS generated output will be REALLY verbose with a lot of vendor prefixes, including ones for Opera.
Good luck!
if the developer forgot to compile for production or minify the .css, than you should still be able to see the automatically inserted comments that point back to the original source, like:
/* line 22, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-0.12.2/frameworks/compass/stylesheets/compass/reset/_utilities.scss */
.selector {
bla: 123;
}
or
/* line 5, sass/large/_common.scss */
.selector {
bla: 123;
}