I am trying to convert my css to less but the online tools are not showing any restructuring. The following snippet is not showing any reduced output.
.tax-included .tax-included-show { display: none;}
I seem to recall that this can be reduced further with operators but I can't get it working.
These did not work as expected
.tax-included {
&-show {
display: none;
}
}
.tax-included {
> &-show {
display: none;
}
}
Basically, I shouldn't need to type 'tax-included' two times.
Related
I have this css piece of code (which is generated from a less file, but I don't know anything about less and this code is a piece of a global css file which include all generated code from all less file).
I'm looking for the less equivalent to this piece of css code to find which file I need to modify.
input[type="checkbox"] {
display: none;
}
Thanks for your assistance.
You can't really reverse engineer Less, but this style rule could show up in a number of ways. For example:
Using the & operator:
input{
&[type="checkbox"] {
display: none;
}
}
A selector var:
#my-selector: input[type="checkbox"];
#{my-selector}{
display: none
}
A mix-in:
.dn() {
display: none;
}
input[type="checkbox"] {
.dn();
}
I'm a beginner using SCSS and I'm not sure how to rewrite my old CSS into something new using SCSS for a TypeScript project, right now I picked a few examples below to ask this question, if somebody could show the right way, I guess I can figure the rest of the code I have to rewrite.
The samples below summarize everything that I need to learn:
.sb-slider li > a {
outline: none;
}
.sb-slider li > a img {
border: none;
}
.sb-perspective > div {
position: absolute;
}
.sb-slider li.sb-current .sb-description {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
opacity: 1;
}
There are online conversion tools that are effective, but to learn it by hand, there's one simple rule to keep in mind - any time you see repetition, you know that you can create a nested block out of it. Otherwise, you should just write regular CSS.
For instance, you have 3 declarations in there that start with .sb-slider, so that can become a block. From there you're targeting li > a underneath .sb-slider twice, as well as something underneath that. This lends to SCSS's natural nesting structure, which works exactly how you think it would.
For the .sb-perspective > div declaration, you are only using that once and not repeating it, so there is no reason to make a block out of it. Putting all of that together, you get this:
.sb-slider {
li > a {
outline: none;
img {
border: none;
}
}
li.sb-current .sb-description {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
opacity: 1;
}
}
.sb-perspective > div {
position: absolute;
}
Learning SCSS from old CSS code - how to rewrite this?
SCSS is a superset of CSS. So you can just copy paste that into a SCSS file and it will just work 👍
I have converted the CSS code you mentioned to SCSS code for better understanding on how easily you can convert your code:
.sb-slider {
li {
& > a {
outline: none;
img {
border: none;
}
}
&.sb-current {
.sb-description {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
opacity: 1;
}
}
}
}
.sb-perspective {
& > div {
position: absolute;
}
}
If you notice, it follows the pattern that you have to create parent child relationship in the tags or classes which you are using. Keyword "&" represents that you are using the parent naming.
In the documentation, there is an example that looks like this:
Nav with a separator between header actions.
But I can't for the life of me figure out how the separator gets added and none of the code examples on the page show an example of it.
Any help would be appreciated, thank you.
I'm not sure which demo that is from (would be helpful to provide a link to make sure I can see what it is). However, some elements automatically add it instead of it being explicitly defined as a standalone element, such as the first .header .header-nav .nav-link element will use the ::before CSS selector to place that line. If you need to put something explicitly, then you'll have to add it yourself.
I hade the same problem upon seeing the provided examples. When reading the sources a divider is only defined for .header-nav elements (https://github.com/vmware/clarity/blob/master/src/clr-angular/layout/nav/_header.clarity.scss) and not for .header-actions.
However you could customize .header-actions .nav-link in the following way:
#import "../node_modules/#clr/ui/src/utils/components.clarity";
#import 'node_modules/#clr/ui/src/layout/nav/header.clarity';
.header-actions {
&:last-child {
& > .nav-link:last-child::after {
content: none;
}
}
.nav-link {
&:last-of-type {
position: relative;
}
&::after {
#include header-section-divider();
left:auto;
right:0;
}
&:last-of-type::after {
left: 0;
}
&.active:last-of-type::after {
content: none;
}
}
}
I have been trying to loop over a list and generate some css, however i am stuck with version 1.3.3 which doesn't have "extract" and "length" methods. Also the less compiler in use doesn't support javascript, so 'backtick' is also not working.
To give an example
// The list of strings
#items: ~"#item1", ~"#item2", ~"#item3"
.desired-mixin(#parent-name, #items ) {
#{parent-name}{
.some-class {
#{current_item} { display: block }
}
}
}
.desired-mixin(~".parent-name", #items);
// Generated css
.parent-name .some-class #item1 { display: block; }
.parent-name .some-class #item2 { display: block; }
.parent-name .some-class #item3 { display: block; }
Some pointers on this would be great, let me know if additional details are required.
I have 2 sets of menu items in my navigation bar.
Set 1 is labelled ".homemenuitem"
Set 2 is labelled ".othermenuitem"
I want to display homemenuitems on the home page and othermenuitems on every other page.
I was hoping to do this with CSS.
I started with the following
.home .othermenuitem {
display: none;
}
Which shows the correct menu on the home page, but I can't figure out how to hide the homemenuitems on every other page without using the unique page id (which will be a pain as the site grows).
Any help would be greatly appreciated.
Thanks
This is where the 'Cascading' part of 'Cascading Style Sheets' is your friend. More specific rules always override less specific ones, so if you do this:
.homemenuitems {
display: none;
}
.home .homemenuitems {
display: block; /* or 'inline' or 'inline-block', as necessary */
}
then the latter rule will override the former where it matches (on the home page), and otherwise, the first rule will always take effect.
Can you take the other way, making:
.homemenuitem {
display: none;
}
In every single page of your web, and only showing it on the home page id?
Thanks Michael, tweaked it a bit further and this is what worked for me, if anybody is looking for a similar situation.
.homemenuitem {
display: none;
}
.home .othermenuitem {
display: none;
}
.home .homemenuitem {
display: inline-block;
}
i have tried it on so many occasion , you can use this code .homemenuitem { display: none; } .home .othermenuitem { display: none; } .home .homemenuitem { display: inline-block; }