Shulou(Shulou.com)06/01 Report--

In this article Xiaobian for you to introduce in detail "what are the extended functions of SCSS", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "what are the extended functions of SCSS" can help you solve your doubts? the following is followed by Xiaobian's ideas to slowly deepen, together to learn new knowledge.

1. Nesting rule

We CSS cannot be nested, but SCSS allows nesting, and the inner style uses its outer selector as the parent selector. In other words:

.parent {

Color:red

.children {

Line-height: 40px

}

}

The representative CSS code is:

.parent {

Color:red

}

.parent .children {

Line-height: 40px

}

We can see that through the nesting function, we can make our code results clearer, the CSS structure easier to manage, and avoid repeatedly entering the parent selector.

two。 Parent selector &

It is convenient for us to use nested rules, but what should we do when we want to choose a parent selector? For example, when setting a hover style for an element.

In other words, the use is as follows:

.parent {

Color:red

&: hover .children

Background: pink

}

}

The CSS code represented is in the following form:

.parent {

Color:red

}

.parent: hover .children {

Background: pink

}

In the converted CSS file & will be replaced with a nested outer parent selector. But if there are multiple layers of nesting, the outermost parent selector is passed down layer by layer:

3. Property nesting

We often see that many attributes have the same prefix, such as text attributes, font-family, font-size, font-weight all use font as the prefix of attributes. For convenience, SASS allows attributes to be nested in namespaces.

For example:

.example {

Font: {

Family: Microsoft Yahei

Size: 30px

Weight: bold

}

}

The representative CSS code is:

.example {

Font-family: Microsoft Yahei

Font-size: 30px

Font-weight: bold

}

4. Placeholder selector foo

You must be familiar with placeholder selectors, but you must have heard of id selectors and class selectors. They are written as # or. So in fact, the placeholder selector is just a symbol.% represents our placeholder selector, but it must be called through the @ extend instruction.

But the specific usage can be ignored now, we will explain it in more detail later, now we just need to remember that when the placeholder selector is used alone, it will not be compiled into the CSS file.

After reading this, the article "what are the extended functions of SCSS" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.