What is the correct way to use the "%" operator in Sass?

Question

I’m making changes to a page that was made using Sass, and I’m still very beginner with the framework, and I came across the following code:

%cf {
    &:after {
        content: '';
        display: block;
        clear: both;
    }
}

I understand that this code was made so that I could use it further in other places, so that I didn’t have to keep repeating the code, but my question is: as I invoke this %cf to take advantage of it in other parts of my project?

Answer 1

% is made to create a "placeholder" of CSS, and to use it you need to make a @extend. See the official documentation of placeholder https://sass-lang.com/documentation/style-rules/placeholder-selectors

Here’s an example of how your code would look

%cf {
    &:after {
        content: '';
        display: block;
        clear: both;
    }
}

.box {
    @extend %cf;
    width:100px;
    background: red;
    etc...
}

The %cf will create a pseudo element CSS in class element .box and make a clearfix

Code output

.box:after {
    content: '';
    display: block;
    clear: both;
}