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.
Related
So this is my code below, for the following page (see screenshot):
I am trying to replace 'Replay course' with the words 'Access course'.
What am I doing wrong?
a.course-card__resume {
display: none;
}
a.course-card__resume:after {
content: 'Access Course';
}
You cannot change content solely using CSS, you need access to the HTML at least, or the ability to write JS if not.
See below for a CSS solution, although this will require you to edit your HTML to include another tag.
a span {
display:none;
}
a::after {
content:'Access Course';
}
<span>Replay Course</span>
Alternatively, if you have the ability to add JS code; see below.
document.getElementsByClassName("course-card__resume")[0].innerText = "Access Course";
Replay Course
You haven't provided your full code, so I can't be sure if this solution will work for you, but see below. It takes advantage of the visibility css rule, but also requires you to use absolute positioning.
a {
visibility:hidden;
position:relative;
}
a::after {
content:'Access Course';
visibility:visible;
position:absolute;
left:0;
}
Replay Course
Did you try the following?
a.course-card__resume:after {
content: 'Access Course';
display: block;
}
when you make the element disappear by display:none. The after element will not be displayed too, because it's dependency doesnt exist.
Maybe you want to try this:
a.course-card__resume {
visibility: hidden;
}
a.course-card__resume:after {
content: 'Access Course';
visibility: visible;
}
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();
}
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'm converting a long CSS file into SCSS and got stuck on the following piece of CSS which consists of the a child div that can have different parent divs:
.dark-bg li.accordion-item,
.image li.accordion-item,
.parallax li.accordion-item {
margin: 0;
}
Could that be convertible to SCSS?
Thank you.
Any CSS is valid SCSS. If you rely want to make more like SCSS, you could write:
.dark-bg, .image, .parallax {
li.accordion-item {
margin: 0;
}
}
Is this ok?
#mixin hasAccordion() {
& li.accordion-item {
margin: 0;
}
}
.dark-bg, .image, parallax {
#include hasAccordion;
}
I have this simplified Less script
.placeholder(#color: #333333) {
&::-webkit-input-placeholder { color: #color; }
}
input {
.placeholder();
}
.placeholder {
margin-top: 20px;
}
The output when I run this through my local compiler or winless online less compiler is
input {
margin-top: 20px;
}
input::-webkit-input-placeholder {
color: #333333;
}
.placeholder {
margin-top: 20px;
}
Insted of the desired output
input::-webkit-input-placeholder {
color: #333333;
}
.placeholder {
margin-top: 20px;
}
Is this a bug or am I missing something here?
By the result it looks to me like I can't have CSS-selectors with the same name as mixins with default values.
I'm running into this problem when compiling Bootstrap with my site specific code. In this particular case I can work around it, but as the project grows and I include other projects I can't imaging I have to keep track of any mixins with default values?
Edit: I see now that I should have read the manual and pretty much seen on the first page of the docs that everything can be treated as a mixin.
In Less, everything is technically a mixin irrespective of whether we write it with parantheses (as in with parameters) or without parantheses (as in like a CSS class selector). The only difference between the two is that when the parantheses are present, the properties present within it are not output unless called from within a selector block.
Quoting the Less Website:
It is legal to define multiple mixins with the same name and number of parameters. Less will use properties of all that can apply.
In this case, since the other mixin has a default value for its only parameter, both the properties can apply when called without any parameter and hence there is no way to avoid it from happening.
Workaround Solution: One possible solution to work-around this problem is to enclose all such conflicting rules within a parent selector (like body).
.placeholder(#color: #333333) {
&::-webkit-input-placeholder { color: #color; }
}
input {
.placeholder();
}
body{
.placeholder{
margin-top: 20px;
}
}
Compiled CSS:
input::-webkit-input-placeholder {
color: #333333;
}
body .placeholder {
margin-top: 20px;
}
Option 2: Extracted from the solution posted by seven-phases-max in the Less GitHub Issue thread.
For the particular use-case one of possible workarounds is to isolate conflicting classes in unnamed scope so they won't interfere with external names:
.placeholder(#color: #333333) {
&::-webkit-input-placeholder { color: #color; }
}
input {
.placeholder();
}
& { // unnamed namespace
.placeholder {
background: #ffffff;
}
} // ~ end of unnamed namespace
Note: The above is a straight copy/paste from the GitHub thread without any modifications so as to not tamper with the information.
#mixin placeholder(#color: #333333) {
&::-webkit-input-placeholder { color: #color; }
}
input {
#include placeholder();
}
.placeholder {
margin-top: 20px;
}
that should work.
So if i understood right, you just want to add 20px on top of the placeholder ? Add padding-top to input instead.
input {
padding-top: 20px;
}