less 详解

  • how to compile

in opentok-rtc project ,  use grunt to compile less into css .

Grunt 是一个插件化的打包工具, 比如编译 less的插件就是  grunt-contrib-less,  安装方法是 :

安装之后还需要 Gruntfile.js 做配置文件 ,

Grunt的 get start 网址: https://gruntjs.com/getting-started

配置文件例子 : https://gruntjs.com/sample-gruntfile

从 opentok截取出来的一个简单的Gruntfile.js 例子 , 这里只用到了编译 less的插件

之后执行  grunt  clientBuild 即可把 less 文件 编译为 css ,clientBuild  是自定义的任务名


  • How to add bower lib

在 opentok-rtc项目中, 还包括了 bower lib的引用 ,

in Gruntfile.js , it figure out where to find source less  and where to store dest css  ,  by  :

  • use which less lib ?   in tokbox-rtc . it use bower lib

npm install bower –save

之后新建 bower.json

bower install

  • opentok-rtc  room page css 分析

a)

这个是 image  , 代码为:

以data 开头的是 html5 新增的自定义属性, 可以是 data-whatever ,  具体定义见 icons.less

b)

这个是相当于radio的按钮, 可通过点击 enable 或者 not ,   用 js 实现 ,给 click 事件加 eventlistener , 从而在 class 加 activate 或者 去掉 , 示例代码:

 

 

 

 

 

  • 参考文章 :

all  css selector explains

https://www.w3schools.com/cssref/css_selectors.asp