LESS+to+MCSS
此文已由作者郑海波授权网易云社区发布。
欢迎访问网易云社区,了解更多网易技术产品运营经验
一、前言
虽然首页没有开始做,昨天仍决定将[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[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; } ```
__另外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.`@extend`
mixin函数可以帮助我们实现代码片的复用,但是有个巨大的问题就是,mixin会让代码变得庞大(可以看看基于less的bootstrap的重复样式),当有明显的派生关系时,我们可以使用`@extend`,`@extend`是一个源于SASS的概念,它会将派生类的选择器添加到基础类之后。
``` .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); } ```
没有参数的`mixin`其实都可以用`@extend`来实现(但`@extend`一般用在有明显派生关系的ruleset),MCSS支持多重`@extend`以及嵌套`@extend`,具体请查看MCSS主页
3.`@abstract`
由于组件封装时,我们无法知道后续是否需要某个ruleset,`@abstract`这个@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会给你更精确的信息
![error图](https://github-camo.global.ssl.fastly.net/9b3c4a1accf639b9dffbc877275e3e6cca9360c7/687474703a2f2f6c65656c756f6c65652e6769746875622e696f2f6d6373732f696d672f6572726f722e706e67)
同时sourcemap v3格式开始被chrome的developer tool的支持,MCSS也支持(需开启MCSS sourcemap选项,并在chrome的开发者工具的实验特性)
![sourcemap](https://github-camo.global.ssl.fastly.net/8933d6c727f1461fbab5592eb48e0e3d778d324c/687474703a2f2f6c65656c756f6c65652e6769746875622e696f2f6d6373732f696d672f736d2e706e67)
5. MCSS命令行工具
相对于其他预处理器MCSS的命令行工具参数很简单,并且提供了代码的多种输出格式,以及自动编译的功能,基本上你已经无需其它工具的支持。具体请`npm install -g mcss` 并且`mcss -h` 一下
-----------------------------
四、结尾感言
LESS的成功来源于它的`简单`,成功的阐述了`82法则`,同时也起到了普及CSS预处理器的作用,事实上接触并且熟悉了LESS的那些概念之后,接受MCSS或者SCSS都是比较轻松的事情。
如果觉得LESS无法满足你的需求时
> __npm install -g mcss__ 尝试一下吧!
_同时MCSS是个易用的CSS Parser哦_
<br/>
免费领取验证码、内容安全、短信发送、直播点播体验包及云服务器等套餐
更多网易技术、产品、运营经验分享请点击。
相关文章:
【推荐】 使用 typescript ,提升 vue 项目的开发体验(1)
转载于:https://www.cnblogs.com/163yun/p/10063523.html
LESS+to+MCSS相关推荐
- css超过两行显示为..._这6种组织CSS的方式,可以帮助你解决CSS扩展维护难的问题...
译者 | 池盛星 译文 | https://zhuanlan.zhihu.com/p/28085207 作者 | Inessa Brown, 原文 | https://css-tricks.com/m ...
- 电梯为什么显示停止服务器,教你奥的斯服务器怎么看故障
OTIS电梯系统故障查看: 主板:LCB2.LMCB.ALMCB.HAMCB M-1-2-1 故障记录 清除:在故障记录菜单中蓝键+2,按提示确认即可. 驱动: M-3-2-1 当前电梯故障 M-3- ...
- S4 HANA物料凭证表MATDOC
S4 HANA物料凭证表MATDOC 在ECC中,物料凭证主要分为抬头表MKPF和行项目表MSEG来存储.另外,还有一套当前库存表(包括MARD.MSLB.MCHB等)和历史库存表(包括MARDH.M ...
- LinkedBlockingQueue源码解析(1)
此文已由作者赵计刚授权网易云社区发布. 欢迎访问网易云社区,了解更多网易技术产品运营经验. 1.对于LinkedBlockingQueue需要掌握以下几点 创建 入队(添加元素) 出队(删除元素) 2 ...
- 修改title样式_css常见样式命名规则
前言 也许你曾经看到过很多样式命名规则,也参考了我们制定的命名规范,但是大部分的具体样式还是不知道如何命名,主要思想或者标准是什么,也就是前面.m-panel-后面的应该如何命名,子模块与父模块依赖关 ...
- java程序重新执行一遍_我怎么在jsp里只执行其中一小段java代码,而不把整个页面都重新加载一遍?...
嗯,比如说第一个里是省份,第二个是市,根据省份的选择变化来变化市名,从数据库里选,怎么实现? 用xmlhttp来实现 查了一下还蛮难上手的,唯一的方法? 用iframe,我刚做完类似的项目,挺管用 请 ...
- 神经网络有什么理论支持? 本文作者:AI研习社 2017-11-08 18:30 导语:问:神经网络有什么理论支持? 答:目前为止(2017 年)没有什么特别靠谱的。 雷锋网按:本文原作者袁洋
神经网络有什么理论支持? 雷锋网按:本文原作者袁洋,本文原载于作者的知乎专栏--理论与机器学习.雷锋网已获得转载授权. 三秒钟理解本文主旨: 问:神经网络有什么理论支持? 答:目前为止(2017 年) ...
- SAP库存解析(MC.9)
凡是看库存报表可能会用到如下几个T-code: MMBE:MARD-LABST(Valuated stock with unrestricted use) MB52:MARD-LABST MB51:M ...
- 转:国外科技论文写作资源
这里是一些国外大学有关科技写作与报告的指南和课程摘要.我们还在不断收集中.http://www.sciencenet.cn/elsevier/content.aspx?id=122 1. Purdue ...
- grunt -- javascript自动化工具
grunt 是一个基于npm,node.js 用js编写的工具框架,可以自动完成一些重复性的任务(如合并文件,语法检查,压缩代码), grunt拥有庞大的插件库,可以满足各种自动化批处理需求,常用的插 ...
最新文章
- c++程序设计原理与实践_课程思政水资源系统优化原理与方法课程思政元素的探索...
- Java List与数组之间的转换
- oracle10g 克隆安装,克隆Oracle Home(10g2)
- MATLAB学习笔记(二) -- 矩阵和数组
- 通信原理matlab实验课程设计,通信原理matlab课程设计报告
- Ubuntu 修复windows启动项
- 深信服单点登入代理服务取AD
- 94. Binary Tree Inorder Traversal
- EXCEL 求解线性规划问题
- CAN FD解释-简单介绍
- 前端开发应知网站(强烈推荐!)
- 2021年特种设备气瓶充装(全国特种设备-P气瓶充装模拟考试题库一)安考星
- excel几个数相加等于某个数_EXCEL如何求出哪几个单元格里的数字之和等于某个特定值...
- 十一大排序算法的实现
- abc云支付php,凉秋易支付,免签约支付平台,彩虹易支付,abc云支付云钱包,云支付,云结算,支付接口,支付营销,易支付,微信支付,支付宝,QQ钱包,个人支付接口,免签支付接口...
- 你一年就工作一天还想请假......
- js实现好看的图案 加勒比海盗(php拍黄片)
- Flink实践:跨境电商 Shopee 的实时数仓之路
- v65i升级鸿蒙,华为智慧屏V65i,支持MEMC运动补偿
- android 更改字体_如何在Android中更改字体