This article has been authorized by the author Zheng Haibo NetEase cloud community.
Welcome to visit NetEase Cloud Community to learn more about NetEase’s technical product operation experience
One, foreword
Home page hasn’t started to do as it is, yesterday decided to (MCSS) (https://github.com/NetEaseWD/mcss) from the gay friends began to hang around to grind a promotion, from start to do the promotion until now most of the problems are:
> < p style = “max-width: 100%; clear: both; __
I have answered this question many times, but I feel that the answer is not good enough, so I think TO write an article to explain it. Many of the answers can also function library based on MCSS encapsulation [mass] (https://github.com/leeluolee/mass) is solved, MCSS examples, the author of this paper can be in this [Try – Page] (http://leeluolee.github.io/mcss/).
<! — more –>
——————-
2. The corresponding of LESS features in MCSS
First of all, let’s explain the corresponding of LESS features in MCSS, which includes almost 80% of the functions used in actual production (actual production does not include the basic class library package).
1. The nested
MCSS has exactly the same nesting rules as other preprocessors such as LESS, supporting ‘&’ placeholders such as:
` ` `
.m-home{
display: block;
div, ul{
+ div{
margin-top: 20px;
}
border: 2px solid #ccc;
> a{
color: #fff;&:hover{ text-decoration: none; } ~ span{ display: block; }}}}Copy the codeMCSS also supports another placeholder ‘%’, which is similar to ‘&’, but does not contain a top-level selector
For example, sometimes we need to change the style of a layer node in the.ms-form extension ‘.ms-form-stack ‘without having to repeat the writing, for example
```
.ms-form{
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
select{
display: inline-block;
.ms-form-stack %{
display: block;
}
}
// other ruleset
}
```
__outport__
```css
.ms-form input[type="text"],
.ms-form input[type="password"],
.ms-form input[type="email"],
.ms-form input[type="url"],
select{
display:inline-block;
}
.ms-form-stack input[type="text"],
.ms-form-stack input[type="password"],
.ms-form-stack input[type="email"],
.ms-form-stack input[type="url"], select{ display:block; } ` ` `Copy the codeIn addition, MCSS can also perform ‘@media’ conditional nesting __
2. The variable
Variables are the most basic function of CSS Preprocessor, LESS variable occupies in the CSS specification [the at – keyword] (http://dev.w3.org/csswg/css-syntax/#at-rule-diagram) (for example ` @ name `) with ` : ` as space, for example
` ` `
@name: 10px;
` ` `
In MCSS, variables are declared as’ dollar-name ‘(e.g.’ $name ‘)
` ` `
$name = 10px;
` ` `
__WHY? __
1. __ Avoid conflict __ :
LESS, with its use of ‘@’, has achieved the reputation of being lexicographically consistent with CSS and looking the most like CSS. In fact, syntactically speaking, LESS is arguably the least normative. Because it takes up ` @ the at – keyword `, @ the at – keyword in CSS is as a rule `] [` @ the at – a sign of (http://dev.w3.org/csswg/css-syntax/#at-rule-diagram), This opens up the possibility of potential conflicts and prevents future extensions (all extensions in MCSS are custom @atrule).
2. __ assignment extends __:
In addition to ‘=’, there are two other assignment symbols in MCSS:
1. `? = ‘: assignment only occurs when the variable does not exist, for example:
` ` `
$effect-outport = true;
$effect-outport ? =false; ` ` `Copy the codeThe second assignment is invalid
2. ‘^=’ : it can define assignments in the global scope. MCSS is scoped just like LESS, so sometimes this assignment comes into play when you need to jump out of scope
` ` `
$global = 10px;
p{
$global^= 20px; } ` ` `Copy the codeBoth of these assignments are commonly used in function encapsulation.
# # # 3. Mixin functionSize (@width, @height){width: @width} // use p{.size(20px, 40px); } ` ` `Copy the codeIn MCSS, functions can do the same. First of all, let’s understand how functions are written in MCSS. Like mixin of LESS, a function can have parameters or no parameters. At the same time, in MCSS, a function is a value type, which can also be defined by assignment operations, for example:
// size=(width,$height){ height? =width; / /? = height;$height;
width: $width; } // No arguments$clearfix = {
*zoom: 1;
&:before, &:after {
display: table;
content: ""; line-height: 0; } &:after { clear: both; }} ` ` `Copy the codeWhen used, you can use similar parentheses, or you can use so-called ‘implicit calls’, such as:
```
body{
$clearfix(a); // Normal call$size: 5px; // Set the width and height of the implicit call} ' 'Copy the codeOutput (
```
body{
*zoom:1;
height:5px;
width:5px;
}
body:before,body:after{
display:table;
content:""; line-height:0; } body:after{ clear:both; } ` `Copy the code__ Note that functions in MCSS are true value types. They can be passed in or returned by functions (or defined globally with the ‘^=’ operator), preserving scope — closure __. This is not just a syntactic candy that gives MCSS the ability to wrap things that no other preprocessor can! . Closer to example can view the MCSS official function library [the mass effect. The MCSS] (https://github.com/leeluolee/mass#effect), use it, you can encapsulate a similar ` $swing ` function, and can undertake incoming parameters adjustment effect.
```
@import 'https://rawgithub.com/leeluolee/mass/master/mass/effect.mcss';
$swing(24deg); ``` __Outport__ ```css body{ -webkit-backface-visibility:hidden; } .animated{ -webkit-animation-duration:1s; -moz-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; animation-fill-mode:both; } @-webkit-keyframes swing{ 20%,40%,60%,80%,100%{ -webkit-transform-origin:top center; } 20%{ -webkit-transform:rotate(24deg); } 40%{ -webkit-transform:rotate(-16deg); } 60%{ -webkit-transform:rotate(8deg); } 80%{ -webkit-transform:rotate(-8deg); } 100%{ -webkit-transform:rotate(0deg); } } @-moz-keyframes swing{ 20%{ -moz-transform:rotate(24deg); } 40%{ -moz-transform:rotate(-16deg); } 60%{ -moz-transform:rotate(8deg); } 80%{ -moz-transform:rotate(-8deg); } 100%{ -moz-transform:rotate(0deg); } } @-o-keyframes swing{ 20%{ -o-transform:rotate(24deg); } -o-transform:rotate(-16deg); } 60%{ -o-transform:rotate(8deg); } 80%{ -o-transform:rotate(-8deg); } 100%{ -o-transform:rotate(0deg); } } @keyframes swing{ 20%{ transform:rotate(24deg); } 40%{ transform:rotate(-16deg); } 60%{ transform:rotate(8deg); } 80%{ transform:rotate(-8deg); } 100%{ transform:rotate(0deg); } } .animated.swing{ -webkit-animation-name:swing; -moz-animation-name:swing; animation-name:swing; -webkit-transform-origin:top center; -moz-transform-origin:top center; -ms-transform-origin:top center; -o-transform-origin:top center; transform-origin:top center; } ` ` `Copy the codeThis is not just LESS, it’s a capability that no other preprocessor has!
4. Color function
MCSS supports HSL and HSLA color value formats, which will eventually be output as RGBA or ‘# CCC’
Different from LESS, MCSS does not provide functions like ‘lighten’ and other verbs, but is unified in the regulation of seven channels including red, green and blue in RGB and Hue, saturation, lightness and alpha in HSL. The functions named ‘r-adjust’, ‘g-adjust’, ‘b-adjust’, ‘h-adjust’, ‘s-adjust’, ‘L-adjust’, and ‘a-adjust’ all support relative and absolute adjustment
For example, ‘lighten’ and ‘darken’ in LESS are the relative adjustment of lightness
```
@color1: lighten(#ccc, 10%);
@color2: darken(#ccc, 10%);` ` `Copy the codeAt MCSS it is
` ` `$color1 = l-adjust(#ccc, 10%); / / to brighter
$color2 = l-adjust(#ccc, -10%); // Make it darker` ` `Copy the codeSo MCSS color function requires you to have some understanding of HSL color format (this should be a basic concept of front-end development)
5. The operator
MCSS supports all LESS operators (or, in fact, MCSS supports binary JS operators and all of the following, with the same priority as JS)
The ability of LESS
1. Logical control ‘@for’, ‘@if’, ‘@elseIf’, and ‘@else’
Since LESS takes up the ‘@at-keyword’, it is difficult to provide similar language functionality. LESS provides an extension ‘when’ on the selector, but still has limited capabilities.
2.`@extend`
Mixins can help us reuse pieces of code, but the big problem with mixins is that they can make code big (see the repetitive style of bootstrap based on less). When there are obvious derivations, we can use ‘@extend’, ‘@extend’ is a concept derived from SASS that adds a selector from a derived class to the base class.
```
.u-ipt {
padding: 5px 10px;
box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3);
}
.m-form{
input[type="text"],
input[type="password"]{
@extend .u-ipt;
}
}
```
__Outport__
```
.u-ipt,
.m-form input[type="text"],
.m-form input[type="password"] padding:5px 10px; Box-shadow :inset 1px 1px 3px rgba(0,0,0,0.3); } ` ` `Copy the codeMixins with no arguments can be implemented with @extend (though @extend is typically used in rulesets with obvious derivations). MCSS supports multiple ‘@extend’ and nested ‘@extend’ on the MCSS homepage
3.`@abstract`
Since there is no way to know if a ruleset will be needed later when the component is encapsulated, the @abstract @atrule serves to mark one or more rulesets as non-output, but can still be derived.
Ruleset @abstract BTN {left: 10px} // Mark an entire block @abstract {.btn{}.fbtn{}} ' 'Copy the codeYou can also abstract an entire file, which is an abstract version of ‘@import’
```
@abstract 'ui.mcss'; ` ` `Copy the codeFor example, at team development time, ‘ui. MCSS’ has been imported with the common style ‘base. MCSS’ (which will be shared by all pages), but subsequent pages still need to use uI. MCSS variables, functions, or ruleset when ‘@abstract’ appears. __ui.mcss__
// BTN mixin function$btn// Ruleset. u-btn{} ' 'Copy the code__base.mcss__
Using ‘@import’ introduces styles from ‘uI.mcss’
```
@import ui.mcss
```Copy the code__page1.mcss__
With ‘@absctract’ you do not introduce any styles, __ but you can still use variables in the file, functions and ruleset__ in the derivation ‘ui.mcss’
```
@abstract 'ui.mcss'; .u-btn-2{ @extend .u-btn; // still @extend$btn(a); // You can still use variables, functions} ' 'Copy the codeThis can solve problems in team development. A set of code depends entirely on how calls to ‘@import’, ‘@abstract’, and ‘@media’ behave.
4. Better error messages and sourcemap
MCSS will give you more accurate information in case of syntax errors
! [error figure] (HTTP: / / https://github-camo.global.ssl.fastly.net/9b3c4a1accf639b9dffbc877275e3e6cca9360c7/687474703a2f2f6c65656c756f6c 65652e6769746875622e696f2f6d6373732f696d672f6572726f722e706e67)
At the same time, the Sourcemap V3 format is starting to be supported by Chrome Developer Tool, as well as MCSS (need to turn on the MCSS Sourcemap option and experiment with features in Chrome’s developer tools).
! [sourcemap](https://github-camo.global.ssl.fastly.net/8933d6c727f1461fbab5592eb48e0e3d778d324c/687474703a2f2f6c65656c756 f6c65652e6769746875622e696f2f6d6373732f696d672f736d2e706e67)
5. MCSS command-line tool
Compared to other preprocessors, MCSS command line tools are simple, and provide multiple output formats for code, as well as automatic compilation, so you basically don’t need any other tools. ‘NPM install -g MCSS’ and ‘MCSS -h’
—————————–
Four, closing remarks
The success of LESS comes from its’ simple ‘, the success of the ’82 law’, but also played a role in the popularity of CSS preprocessor, in fact, contact and familiar with the concepts of LESS, accept MCSS or SCSS are relatively easy things.
If you feel LESS can’t meet your needs
> __npm install -g McSs__ Try it!
MCSS is also an easy-to-use CSS Parser
<br/>
Free access to verification code, content security, SMS, live on demand experience package and cloud server packages
For more information about NetEase’s technology, products and operating experience, please click here.
Web animators and technology developers, how to collaborate accurately and efficiently to achieve dynamic effects. Aspects of quality evaluation — talk about the quality evaluation of software before it goes live