I copied and pasted this CSS to codepen The Code.
When I used it for my ASP.NET Core 6 MVC app it doesn't work. If I don't use the variables and just colors it works just fine. Is there something I missed that does not allow CSS variables to work?
//the code
:root {
--fb: rgb(16,148,244);
--tw: rgb(93,168,221);
--gg: rgb(234,67,53);
--lin: rgb(10,102,194);
--white: #ffffff;
--fFamily: "Courier New", monospace;
}
button{
font-family:var(--fFamily);
}
.fb-icon {
color: var(--white);
background-color: var(--fb);
}
.fb-icon:hover {
color: var(--fb);
background-color: var(--white);
}
.google-icon {
color: var(--white);
background: var(--gg);
}
.google-icon:hover {
color: var(--gg);
background-color: var(--white);
}
.twitter-icon {
color: var(--white);
background-color: var(--tw);
}
.twitter-icon:hover {
color: var(--tw);
background-color: var(--white);
}
.linkedin-icon {
color: var(--white);
background-color: var(--lin);
}
.linkedin-icon:hover {
color: var(--lin);
background-color: var(--white);
}
I create a new Asp.net 6 MVC application, and use the following code, it seems that no matter using or not using the CSS variables, the code works well on my side:
<div class="text-center">
<h1 class="display-4">Welcome</h1>
<p>Learn about building Web apps with ASP.NET Core.</p>
<button class="fb-icon"> Facebook </button>
<button class="twitter-icon"> Twitter </button>
<button class="google-icon"> Google </button>
<button class="linkedin-icon"> LinkedIn </button>
</div>
<style>
:root {
--fb: rgb(16,148,244);
--tw: rgb(93,168,221);
--gg: rgb(234,67,53);
--lin: rgb(10,102,194);
--white: #ffffff;
--height: 35px;
--fFamily: "Courier New", monospace;
}
button{
height:var(--height);
font-weight: 700;
font-family:var(--fFamily);
font-size: large;
}
.fb-icon {
color: var(--white);
background-color: var(--fb);
}
.fb-icon:hover
{
color: var(--fb);
background-color: var(--white);
}
.google-icon {
color: var(--white);
background: var(--gg);
}
.google-icon:hover
{
color: var(--gg);
background-color: var(--white);
}
.twitter-icon {
color: var(--white);
background-color: var(--tw);
}
.twitter-icon:hover
{
color: var(--tw);
background-color: var(--white);
}
.linkedin-icon {
color: var(--white);
background-color: var(--lin);
}
.linkedin-icon:hover
{
color: var(--lin);
background-color: var(--white);
}
</style>
#*without using css variables*#
#*<style>
button{
height:35px;
font-weight: 700;
font-family:"Courier New", monospace;
font-size: large;
}
.fb-icon {
color: #ffffff;
background-color: rgb(16,148,244);
}
.fb-icon:hover {
color: rgb(16,148,244);
background-color: #ffffff;
}
.google-icon {
color: #ffffff;
background: rgb(234,67,53);
}
.google-icon:hover {
color: rgb(234,67,53);
background-color: #ffffff;
}
.twitter-icon {
color: #ffffff;
background-color: rgb(93,168,221);
}
.twitter-icon:hover {
color: rgb(93,168,221);
background-color: #ffffff;
}
.linkedin-icon {
color: #ffffff;
background-color: rgb(10,102,194);
}
.linkedin-icon:hover {
color: rgb(10,102,194);
background-color: #ffffff;
}
</style>
*#
The result as below:
When build your application, is there any warning or error? Whether you are using _layout or not. In my application, there is no warning and error and I'm using the _layout page. You can check it.
Besides, you can also copy the above code to your application and check it. If still not working, try to create a new MVC application and test the above code in the Index page.
Update:
As mentioned in the comments, I could reproduce the problem: if using the CSS isolation (add a css file with the same name as the view), the CSS variables not working. You could submit a feedback about this problem to Asp.net core Github.
As a temporary workaround, you can use the CSS isolation without CSS variables, Or if you want to use the CSS variables, you can add the CSS style in the site.css file (in the wwwroot/css folder) or add the CSS style in the <style> tag in the view page.
Related
I am using React-Bootstrap. I have created two different components so far, Register, and Navigation. Each component has it's own CSS style sheet. I created Navigation first, then Register. Navigation looked and worked as intended. However, when I add the Register CSS, now Navigation is taking some of the styles from Register. How do I prevent this? I thought by having two separate style sheets for each component I wouldn't have to worry about them overriding each other. Is there something I need to do or add so they will remain separate from each other? My App.css file is empty besides a font-face property. And there is no other CSS. I have used Bootstrap in the past, but not React-Bootstrap, so I may be missing something simple.
REGISTER.CSS
#font-face {
font-family: "Mulish-Regular";
src: url("../assets/fonts/static/Mulish-Regular.ttf");
}
div.card-body,
.flex-column.nav,
a {
color: #212529 !important;
}
h5.card-header,
button.btn.btn-primary {
color: rgba(255, 255, 255, 0.9);
background-color: #2d3155;
}
button.btn-primary {
margin: 1em;
}
a:hover,
a:focus {
background: white !important;
color: blue !important;
}
p.card-text > a {
color: blue;
}
NAVIGATION.CSS
#font-face {
font-family: "Mulish-Regular";
src: url("../assets/fonts/static/Mulish-Regular.ttf");
}
.flex-column.nav,
a {
font-family: "Mulish-Regular";
color: rgba(255, 255, 255, 0.8) !important;
background-color: #2d3155;
}
div.col-2 {
padding-left: 0 !important;
margin: 0;
}
img {
background-color: white;
width: 100%;
padding: 0.5em;
}
a > span {
padding: 0.5em;
}
a.nav-link {
border-bottom: 1px solid rgba(255, 255, 255, 0.5);
text-decoration: none !important;
}
span.contactText {
font-weight: 600;
margin-right: 0.3em;
}
section {
padding-left: 1em;
margin-top: 1.5em;
}
section > p {
font-size: 14px;
}
a.nav-link:hover {
background-color: #282a41;
}
This question already has answers here:
SCSS: parent hover selector
(2 answers)
Closed 2 years ago.
I can't figure out why my .notes-list__item__contents isn't getting a white color on .note-list__item:hover... What am I doing wrong with my selector? I couldn't find similar case in the docs.
.notes-list {
list-style-type: none;
margin: 0;
padding: 0;
&__item {
padding: 30px;
background-color: $secondary-color;
border-radius: 15px;
margin-bottom: 15px;
&:hover {
background-color: $accent-color;
color: #fff;
&__contents { color: #fff; }
}
&__title {
font-size: 1.125rem;
font-weight: 600;
}
&__contents {
margin-top: 20px;
color: $text-color;
font-weight: 500;
}
}
}
<li className="notes-list__item">
<div className="notes-list__item__title">Title</div>
<div className="notes-list__item__contents">
Some contents
</div>
</li>
Having this doesn't feel quite scss
&:hover {
.notes-list__item__contents { color: #fff; }
}
So i checked your output css and its resulting in below css
.notes-list__item:hover__contents {
color: #fff;
}
As you can see its suffixing contents after the hover pseudo element.
you have to write like this in case of nested hover
&:hover &{
background-color: green;
color: #fff;
&__contents { color: #fff; }
}
This will generate below CSS
.notes-list__item:hover .notes-list__item__contents {
color: #fff;
}
My dev environment is working great, but when I tried building the app, some of the styles are missing. Here is an example
<style lang="scss">
.badge {
display: inline-block;
padding: 5px 15px;
border-radius: 25px;
font-size: 0.75em;
#apply tw-bg-border tw-text-primary tw-font-bold;
&--danger {
color: white;
#apply tw-bg-danger-alt;
}
&--info {
color: white;
#apply tw-bg-info;
}
&--warning {
color: white;
#apply tw-bg-warning;
}
}
.badge--success {
color: white;
#apply tw-bg-success-alt;
}
</style>
I need to move .badge--success outside for it to work, but all other CSS modifiers are not working.
I would like to contain all relevant styles for a selector within a single code block, so that it can be easily referenced.
In my application, a selectors effective styles will be altered dramatically depending on the context in which it sits. For instance, let's assume this CSS:
.container.theme-dark .message
{
font-size: 16px;
background-color: black;
color: white;
}
.container.theme-light .message
{
font-size: 16px;
background-color: white;
color: black;
}
Then, imagine I have the following HTML:
<div>
<div class="container theme-dark">
<div class="message">Hello World</div>
</div>
<div class="container theme-light">
<div class="message">Hello World</div>
</div>
</div>
Right now with SCSS, I would create the relevant CSS like this:
.container
{
&.theme-dark
{
.message
{
background-color: black;
color: white;
}
}
&.theme-light
{
.message
{
background-color: white;
color: black;
}
}
.message
{
font-size: 16px;
}
}
I want to be able to generate that CSS using SCSS, with all of the relevant information for the .message element in one place. For instance (using a made-up $ operator that would do what I'm trying to accomplish):
.container
{
.message
{
font-size: 16px;
$.theme-light
{
background-color: white;
color: black;
}
$.theme-dark
{
background-color: black;
color: white;
}
}
}
Any ideas?
I'm thinking this might work, and is like what you're saying? (It would help me currently if you labeled each example as "Ideal CSS output", "Current SCSS, too many .message blocks", and "Ideal SCSS format")
.container
{
#at-root .message
{
font-size: 16px;
.theme-light &
{
background-color: white;
color: black;
}
.theme-dark &
{
background-color: black;
color: white;
}
}
}
With the #at-root there, it will generate .theme-light .message, which might be too permissive for some usages, so not the ideal solution...
https://codepen.io/anon/pen/ZMxjEq
Basically & gets replaced with the full tree-path, so .container .message, which without #at-root, will generate .theme-light .container .message, which does not work with the structure. Perhaps also consider this, which makes a reasonable compromise I would say:
.container
{
.message
{
font-size: 16px;
}
#at-root .message
{
.theme-dark
{
...
}
.theme-light
{
...
}
}
}
It's apparently a kind of hacky solution, but apparently works
This page might have some better guidance as well
This organization can be achieved if you use sass programatically:
$themes: light dark;
.container {
#for $i from 1 through length($themes) {
&.theme-#{nth($themes,$i)} {
.message {
font-size: 16px;
#if nth($themes,$i) == light {
background-color: white;
color: black;
} #else if nth($themes,$i) == dark {
background-color: black;
color: white;
}
}
}
}
}
This generates:
.container.theme-light .message {
font-size: 16px;
background-color: white;
color: black;
}
.container.theme-dark .message {
font-size: 16px;
background-color: black;
color: white;
}
The nested looping automatically groups the details at each level in the same block of code. This also scales to multiple levels of nesting. The critical point is that at inner loops you can reference the selectors of outer loops.
I eventually found this GitHub:
https://github.com/imkremen/sass-parent-append/blob/master/parrent-append.scss
Which I have adapted into this solution:
#function str-to-list($string, $separator: ' ', $startAt: 1)
{
$workStr: str-slice($string, $startAt);
$list: ();
$indexOfFirstSpace: str-index($workStr, $separator);
#if ($indexOfFirstSpace == null)
{
$list: ($workStr);
}
#else
{
$list: (str-slice($workStr, 1, $indexOfFirstSpace - 1));
$list: join($list, str-to-list($workStr, $startAt: $indexOfFirstSpace + 1));
}
#return $list;
}
#function getBase($appendix)
{
$parentSelector: str-to-list(#{&});
$pos: (length($parentSelector) - 1);
$selector: set-nth($parentSelector, $pos, nth($parentSelector, $pos) + $appendix);
#return $selector;
}
#mixin base($appendix)
{
#at-root #{getBase($appendix)}
{
#content;
}
}
Which I can then use like this:
.container
{
.message
{
font-size: 16px;
}
#include base(".theme-light")
{
background-color: white;
color: black;
}
#include base(".theme-dark")
{
background-color: black;
color: white;
}
}
which compiles into this:
.container .message
{
font-size: 16px;
}
.container.theme-light .message
{
background-color: white;
color: black;
}
.container.theme-dark .message
{
background-color: black;
color: white;
}
So, this is the example of "LESS" code
.my_class{
color: #000;
font: 12px/12px Arial;
&_comething_else{ color: #f00; }
}
which will be compiled into this:
.my_class{
color: #000;
font: 12px/12px Arial;
}
.my_class_something_else{
color: #f00;
}
Classes ".my_class" and "_something_else" were joined,
but with SCSS this code will be compiled into this:
.my_class{
color: #000;
font: 12px/12px Arial;
}
.my_class _something_else{
color: #f00;
}
where is whitespace after ".my_class" before underscore in "_something_else"
So, is there any way to do this LESS trick in SCSS?
Thanks.
I found a solution. It's more uglier than in LESS but works:
$ns: ".my_class";
.my_class{
color: #000;
font: 12px/12px Arial;
#{$ns}_comething_else{ color: #f00; }
}
will be compiled into
.my_class{
color: #000;
font: 12px/12px Arial;
}
.my_class .my_class_comething_else{
color: #f00;
}
Even if it's still not possible to join class names in SASS(3.2.6) I noticed that you can do it over at jsFiddle.
Here is the code I've used:
.elem {
&__child {
border: solid red;
&-text {
color: blue;
}
}
}
Check out the examle http://jsfiddle.net/nicolasmn/6cvFZ/