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

This article introduces the knowledge of "@ extend of Sass and how to use inheritance". Many people will encounter this dilemma in the operation of actual cases, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

SASS is a dynamic style language, is an auxiliary tool to strengthen CSS, it in CSS grammar based on the addition of variables, nesting, mixing, import, function of advanced functions, these extensions make CSS more powerful and elegant, contribute to better management of style files, as well as more efficient development projects.

The @ extend directive tells Sass that the style of one selector inherits from another.

If one style is almost the same as another, with only a few differences, it is useful to use @ extend.

In the following Sass example, we created a basic button style. button-basic, and then we defined two button styles. button-report and. Button-submit, both of which inherit. Button-basic, their main difference is that the background color and font color, the other styles are the same.

Sass code: .button-basic {border: none; padding: 15px 30px; text-align: center; font-size: 16px; cursor: pointer;}. Button-report {@ extend. Button-basic; background-color: red;}. Button-submit {@ extend. Button-basic; background-color: green; color: white;}

Convert the above code to CSS code, as follows:

Css code: .button-basic, .button-report, .button-submit {border: none; padding: 15px 30px; text-align: center; font-size: 16px; cursor: pointer;}. Button-report {background-color: red;}. Button-submit {background-color: green; color: white;}

After using @ extend, we don't need to specify multiple classes class= "button-basic button-report" in the label of the HTML button, we just need to set the class.

@ extend is a good example of code reuse.

That's all for @ extend of Sass and how to use inheritance. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.