网站建设 管理 会议纪要,seo工作流程图,wordpress影视网站,网站联盟广告名词解释此文已由作者郑海波授权网易云社区发布。欢迎访问网易云社区#xff0c;了解更多网易技术产品运营经验一、前言虽然首页没有开始做#xff0c;昨天仍决定将[MCSS](https://github.com/NetEaseWD/mcss)从身边的基友们开始向杭研推广了#xff0c;从开始做这个直到现在推广遇到…此文已由作者郑海波授权网易云社区发布。欢迎访问网易云社区了解更多网易技术产品运营经验一、前言虽然首页没有开始做昨天仍决定将[MCSS](https://github.com/NetEaseWD/mcss)从身边的基友们开始向杭研推广了从开始做这个直到现在推广遇到最多的问题是 __不是有LESS了吗__这个问题回答了很多遍了但是觉得回答的都不够好所以觉得写一篇文章解释一下。其实很多答案也都可以从基于MCSS封装的函数库[mass](https://github.com/leeluolee/mass)中得到解答本文针对MCSS的例子都可以在这个[Try-Page](http://leeluolee.github.io/mcss/)中进行尝试。!-- more --------------------- 二、LESS特性在MCSS中的对应首先解答下LESS的特性在MCSS中的对应这几乎也囊括了在实际生产使用时的80%的功能(实际生产并不包含基础类库封装)1. 嵌套MCSS与LESS等其它预处理器的嵌套规则完全一致支持占位符例如:.m-home{display: block;div, ul{ div{margin-top: 20px;}border: 2px solid #ccc; a{color: #fff;:hover{text-decoration: none;}~ span{display: block;}}}
}
MCSS同时支持另一个占位符%与类似但它不包含顶级的选择器比如有时候我们需要在.ms-form的扩展类.ms-form-stack中修改某层节点的样式这时我们不需要重新重复一次书写例如
.ms-form{input[typetext],input[typepassword],input[typeemail],input[typeurl],select{display: inline-block;.ms-form-stack %{display: block;}}// other ruleset
}
__outport__css
.ms-form input[typetext],
.ms-form input[typepassword],
.ms-form input[typeemail],
.ms-form input[typeurl],
select{display:inline-block;
}
.ms-form-stack input[typetext],
.ms-form-stack input[typepassword],
.ms-form-stack input[typeemail],
.ms-form-stack input[typeurl],
select{display:block;
}
__另外MCSS也可以进行media的条件嵌套__ 2. 变量 变量是CSS Preprocessor的最基本功能LESS的变量占用了CSS规范中的[at-keyword](http://dev.w3.org/csswg/css-syntax/#at-rule-diagram) (例如name)并以:作为分隔, 例如name: 10px;而在MCSS中变量的声明是以为dollar-name(如$name)作为标志 $name 10px;__WHY?__1. __避免冲突__ LESS由于占用, 达到了在词法上与css一致成就了它看起来最像CSS的美誉事实上从语法角度讲LESS可以说是最不规范的因为它占用了at-keyword, 在css中at-keyword是作为[at-rule](http://dev.w3.org/csswg/css-syntax/#at-rule-diagram)开始的标志 这就有潜在冲突的可能性并且也不利于未来功能的扩展(mcss中所有的功能扩展都是通过自定义atrule) 2. __赋值符扩展__: 除了MCSS中有另外两种赋值符号 1. ?: 赋值操作只在变量不存在时进行例如: $effect-outport true;$effect-outport ? false; 此时第二个赋值无效 2. ^: 它可以将赋值定义在全局作用域MCSS与LESS一样有作用域所以有时候需要跳脱作用域限制时这个赋值符就起作用了 $global 10px;p{$global ^ 20px;}以上两个赋值符其实都在函数封装时会常用到。###3. mixin函数
LESS中的mixin跟ruleset是一致的不过可以带上操作,例如.size(width, height){width: width
}
//使用时
p{
.size(20px, 40px);
}
而在MCSS中函数可以达到同样效果。首先了解下MCSS中函数的书写方式与LESS的mixin一样一个函数可以有参数也可以没有同时在MCSS中函数是一种值类型同样可以通过赋值操作进行定义例如:
// 带参数
size(width, $height){height?width; // ? 操作符的作用场景一height: $height;width: $width;
}
// 不带参数
$clearfix {*zoom: 1;:before, :after {display: table;content: ;line-height: 0;}:after {clear: both;}
}
使用时候你可以用类似的括号来调用也可以用所谓的隐式调用, 比如:
body{$clearfix(); //正常调用$size: 5px; //设置宽高的隐式调用
}
__输出__
body{*zoom:1;height:5px;width:5px;
}
body:before,body:after{display:table;content:;line-height:0;
}
body:after{clear:both;
}__需要注意的是MCSS中的函数是一种真正的值类型它可以被传递进函数也可以被函数返回(或用^操作符定义在全局)并保留作用域——所谓闭包__这不仅仅是个语法糖使得MCSS拥有其它预处理器没有封装能力。比较近的例子可以查看MCSS的官方函数库[mass的effect.mcss](https://github.com/leeluolee/mass#effect)利用它你可以封装出类似$swing的函数并且可以传入参数进行效果调整。
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;
}
这个不仅仅是LESS是所有其它预处理器没有的能力 4. 颜色函数mcss支持hsl以及hsla的色值格式最终会被输出为rgba或者#ccc与LESS不同的是MCSS不提供类似lighten等动词的函数统一为rgb概念中的red、green、 blue 和 hsl概念中 的hue、saturation、lightness 以及alpha 这7个通道的调节函数名分别为r-adjust,g-adjust,b-adjust,h-adjust,s-adjust,l-adjust,a-adjust 全部支持相对和绝对调节比如LESS中lighten、darken其实就是lightness的相对调节
color1: lighten(#ccc, 10%);
color2: darken(#ccc, 10%);
在MCSS其实就是
$color1 l-adjust(#ccc, 10%); //往亮调
$color2 l-adjust(#ccc, -10%); // 往暗调节
所以MCSS的色值函数需要你对hsl颜色格式有一定的了解(前端开发应该这是必备的基础概念吧) 5. 操作符MCSS支持所有LESS的操作符(或者说其实MCSS支持JS中的二元以及以下的所有操作符并且优先级与JS完全一致) 三、一些LESS所欠缺的能力 1.逻辑控制for、if、elseif、else由于LESS占用了at-keyword所以很难提供类似的语言功能。LESS提供一个在选择器上的扩展when但是能力仍然有限。 2.extendmixin函数可以帮助我们实现代码片的复用但是有个巨大的问题就是mixin会让代码变得庞大(可以看看基于less的bootstrap的重复样式)当有明显的派生关系时我们可以使用extendextend是一个源于SASS的概念它会将派生类的选择器添加到基础类之后。
.u-ipt {padding: 5px 10px;box-shadow: inset 1px 1px 3px rgba(0,0,0,0.3);
}
.m-form{input[typetext],input[typepassword]{extend .u-ipt;}
}__Outport__.u-ipt,
.m-form input[typetext],
.m-form input[typepassword]padding:5px 10px;box-shadow:inset 1px 1px 3px rgba(0,0,0,0.3);
}
没有参数的mixin其实都可以用extend来实现(但extend一般用在有明显派生关系的ruleset)MCSS支持多重extend以及嵌套extend具体请查看MCSS主页3.abstract由于组件封装时我们无法知道后续是否需要某个rulesetabstract这个atrule的作用是将一个或多个ruleset标记为不输出但是仍然可以被派生。
//标记一个ruleset
abstract btn{left: 10px
}
//标记一整个块
abstract {.btn{}.fbtn{}
}
你也可以抽象一整个文件, 它是import 的抽象版
abstract ui.mcss;
比如在团队开发时ui.mcss已经被公有样式base.mcss import了(即会被所有页面所共用)但是后续的页面中仍然需要使用ui.mcss的变量、函数或者ruleset此时abstract出现了;__ui.mcss__
// btn的mixin函数
$btn {padding: 10px
}
// ui中的ruleset
.u-btn{
}
__base.mcss__使用import 会引入ui.mcss中的样式
import ui.mcss__page1.mcss__使用absctract你不会引入任何样式 __但是你仍然可以使用文件中的变量、函数和派生ui.mcss中的ruleset__
abstract ui.mcss;
.u-btn-2{extend .u-btn; // 仍然可以extend$btn(); // 仍然可以使用变量、函数
}
这样可以解决团队开发中的问题。一套代码完全取决于import、abstract和media三者的调用会有不同的表现。 4.更好的出错信息以及sourcemap 在出现语法错误时MCSS会给你更精确的信息同时sourcemap v3格式开始被chrome的developer tool的支持MCSS也支持(需开启MCSS sourcemap选项并在chrome的开发者工具的实验特性)5. MCSS命令行工具 相对于其他预处理器MCSS的命令行工具参数很简单并且提供了代码的多种输出格式以及自动编译的功能基本上你已经无需其它工具的支持。具体请npm install -g mcss 并且mcss -h 一下----------------------------- 四、结尾感言 LESS的成功来源于它的简单成功的阐述了82法则同时也起到了普及CSS预处理器的作用事实上接触并且熟悉了LESS的那些概念之后接受MCSS或者SCSS都是比较轻松的事情。如果觉得LESS无法满足你的需求时 __npm install -g mcss__ 尝试一下吧_同时MCSS是个易用的CSS Parser哦_br/免费领取验证码、内容安全、短信发送、直播点播体验包及云服务器等套餐更多网易技术、产品、运营经验分享请点击。相关文章【推荐】 流式处理框架storm浅析下篇【推荐】 细嚼慢咽 Mongoose 5转载于:https://www.cnblogs.com/zyfd/p/10063524.html
