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/
Related
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.
I am looking for a way to reduce the repetition in my SASS. I have the following declaration, which is nested inside a selector.
Inside register.scss:
.btn-primary {
background-color: $brand-btn-primary;
color: #FFFFFF;
font-size: 16px;
line-height: 24px;
}
I would like to #extend that inside the selector in another SASS file but i'm unsure if that's possible.
admin.scss:
.btn-primary.upgrade-btn {
font-family: Helvetica;
background-color: $brand-btn-primary;
color: #FFFFFF;
font-size: 16px;
line-height: 24px;
border: 1px solid $brand-btn-primary;
min-width: 160px;
}
When I have attempted this I get the following error:
Error: complex selectors may not be extended.
Is there a way to do this?
You will need to remove the double class selector and extend using the method below.
.btn-primary {
background-color: $brand-btn-primary;
color: #ffffff;
font-size: 16px;
line-height: 24px;
}
.upgrade-btn {
#extend .btn-primary;
font-family: Helvetica;
border: 1px solid $brand-btn-primary;
min-width: 160px;
}
Please check out my fiddle:
http://jsfiddle.net/zzh0ym2m/1/
Once I click on a menu button "Home", "Settings", and so on, the font should be changing to white, but it doesn't. I cannot figure out where the error is located, after trying to change stuff around. It should be turning white:
.topmenu-selectedblue {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#78b1ff, #4881dc)
}
.topmenu-selectedred {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#ff8476, #dc5348)
}
.topmenu-selectedpurple {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#b479ff, #854ade)
}
.topmenu-selectedgreen {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#9dd592, #649f5a)
}
.topmenu-selectedorange {
color: #fff;
font-weight: 700;
background: -webkit-linear-gradient(#fdc652, #dba439)
}
It seems that this
.topmenu-ul > li a {
color: #e6e6e6;
font-size: .7rem;
line-height: 20px;
height: 20px;
display: block;
padding: 0 20px
}
is overriding any other settings.
So you need to address that..perhaps with
.topmenu-ul > [class*=topmenu-selected] > a{
color: #fff;
}
That said, there is some repetition and very specific selectors in your CSS that could be tidied up that might make it simpler.
JSFiddle Demo
In SCSS, properties with common prefix can be described as nested properties. Thus, as in the example,
.funky{
font: 2px/3px{
family: fantasy;
size: 30em;
weight: bold;
}
}
is compiled to:
.funky{
font: 2px/3px;
font-family: fantasy;
font-size: 30em;
font-weight: bold;
}
How do I do a similar thing with properties with common affix? How can I write a nested property that would be compiled to this:
.funky{
color: red;
background-color: green;
border-color: blue;
}
Sass has no construct for such a concept. You'll have to patch it or write a verbose mixin to do it.
#mixin color($background: null, $border: null, $font: null) {
background-color: $background;
border-color: $border;
color: $font;
}
.foo {
#include color($background: green, $font: red);
}
I have next CSS:
.button {
background-color: black;
border-radius: 4px;
color: white;
}
a.button {
text-decoration: none;
color: white;
}
I want to remake it with LESS, something like:
.button {
background-color: black;
border-radius: 4px;
color: white;
a& {
text-decoration: none;
color: white;
}
}
But it generates next (wrong) CSS:
.button {
background-color: black;
border-radius: 4px;
color: white;
}
/* unexpected space */
a .button {
text-decoration: none;
color: white;
}
How can I do it right?
This is totally a version issue. As #freejosh commented, it is resolved in latest releases of LESS. If you take your code above to http://less2css.org/ then it works fine (which is running LESS 1.3.3, though you can change the version to 1.3.0 and see that it no longer functions as you expect and puts the space in).
Since you state you are running lessc 1.3.0, you need to upgrade your LESS version.
These elements are not necessarily nested, and therefore LESS nesting doesn't apply.
It isn't beautiful, but it works! :)
.button {
background-color: black;
border-radius: 4px;
color: white;
}
a,b,other{
&.button{
.button;
text-decoration: none;
color: white;
}
}