What does less mean in css
Editor to share with you what less means in css, I believe most people do not know much about it, so share this article for your reference, I hope you will learn a lot after reading this article, let's go to know it!
In css, less is a preprocessing language that extends the css language to make css easier to maintain and extend; less is also a preprocessor that enables customizable, manageable, and reusable stylesheets for websites so that they can be read through Web browsers.
The operating environment of this tutorial: windows10 system, CSS3&&HTML5 version, Dell G3 computer.
What does css's less mean?
Less is a CSS preprocessing language, which extends CSS language and adds features such as variables, Mixin, functions and so on, which makes CSS easier to maintain and expand.
LESS is a CSS preprocessor that enables customizable, manageable, and reusable stylesheets for websites. LESS is a dynamic stylesheet language that extends the functionality of CSS. LESS is also cross-browser friendly.
The CSS preprocessor is a scripting language that extends CSS and compiles it into regular CSS syntax so that it can be read through a Web browser. It provides functions such as variables, functions, mixins and operations, and can build dynamic CSS.
Less allows us to define variables, use nested declarations, define functions, and so on. Strictly speaking, Less consists of two parts: (1) the syntax of Less and (2) Less preprocessor. The browser only knows CSS after all, so the Less file needs to be compiled into CSS by the Less preprocessor.
Examples are as follows:
@ base: # f938abt.boxray shadow (@ style, @ c) when (iscolor (@ c)) {- webkit-box-shadow: @ style @ c; box-shadow: @ style @ c;}. Box-shadow (@ style, @ alpha: 50%) when (isnumber (@ alpha)) {. Box-shadow (@ style, rgba (0,0,0, @ alpha));} .box {color: saturate (@ base, 5%) Border-color: lighten (@ base, 30%); div {.box-shadow (0 5px, 30%)}}
The output to css code is as follows:
Box {color: # fe33ac; border-color: # fdcdea;}. Box div {- webkit-box-shadow: 0 5px rgba (0,0,0,0.3); box-shadow: 0 5px rgba (0,0,0,0.3);} above is all the content of the article "what does less in css mean?" Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!
