enjoy

[Riunshow]

现场

websocket

docker 与 传统server 优劣势

部署 运维 发布等

scss/less等等高级特性

#### (1). 编译scss文件为css文件 ``` sass --style compressed test.scss test.css 即可生成压缩版的css文件，并且命名为test.css --style 后面可以有四个参数可选，分别为expanded、nested、compact、compressed ``` #### (2). 变量 1. 定义变量 ```scss $color1:#aeaeae; .div1{ background-color:$color1; } // ---------编译后 .div1 { background-color: #aeaeae; } /*# sourceMappingURL=test.css.map */ ``` 2. 希望某个在子选择器中定义的变量能够成为全局变量，可以使用!global关键字 ```scss #main { $width: 5em !global; width: $width; } #sidebar { width: $width; } ``` 3. 嵌套引用在其他编程语言中即是字符串插值，需要用#{}进行包裹： ```scss $left:left; .div1{ border-#{$left}-width:5px; } ``` 4. Sass中也是支持对于变量进行简单的计算 ```scss $left:20px; .div1{ margin-left:$left+12px; } p { // Plain CSS, no division font: 10px/8px; $width: 1000px; // Uses a variable, does division width: $width/2; // Uses a function, does division width: round(1.5)/2; // Uses parentheses, does division height: (500px/2); // Uses +, does division margin-left: 5px + 8px/2px; // In a list, parentheses don't count font: (italic bold 10px/8px); } ``` #### (3). 选择器 1. 嵌套 ```scss .div1{ .span1{ height: 12px; } .div2{ width: 16px; } } // 属性也可以嵌套，比如border-color属性 // border后面必须加上冒号 p { border: { color: red; } } ``` 2. 父元素引用 ```scss .div1{ &:hover{ cursor: hand; } } ``` #### (4). 代码重用 1. 继承, SASS允许一个选择器，继承另一个选择器。比如，现有class1： ```scss .class1{ font-size:19px; } .class2{ @extend .class1; color:black; } // 如果在class2后面有设置了class1的属性，那么也会影响class2 // Scss也是递归编译的 .class1{ font-size:19px; } .class2{ @extend .class1; color:black; } .class1{ font-weight:bold; } ``` #### (5). 引用外部css文件 1. 导入import ```scss @import "_test1.scss"; @import "_test2.scss"; @import "_test3.scss"; ``` 2. Mixin&Include ```scss // 使用@mixin命令，定义一个代码块 @mixin left { float: left; margin-left: 10px; } // 使用@include命令，调用这个mixin div { @include left; } ``` 3. 参数与缺省值 ```scss // 边距设置 @mixin common($value1,$value2,$defaultValue:12px){ display:block; margin-left:$value1; margin-right:$value2; padding:$defaultValue; } .class1{ font-size:16px; @include common(12px,13px,15px); } .class2{ font-size:16px; @include common(12px,13px); } // 浏览器前缀设置设置 // 一个mixin的实例，用来生成浏览器前缀 @mixin rounded($vert, $horz, $radius: 10px) { border-#{$vert}-#{$horz}-radius: $radius; -moz-border-radius-#{$vert}#{$horz}: $radius; -webkit-border-#{$vert}-#{$horz}-radius: $radius; } // 使用 #navbar li { @include rounded(top, left); } #footer { @include rounded(top, left, 5px); } ``` #### (6). 编程式方法 1. 流程控制 ```scss // 条件语句 // @if @else p { @if 1 + 1 == 2 { border: 1px solid; } @if 5 < 3 { border: 2px dotted; } } @if lightness($color) > 30% { 　　background-color: #000; } @else { 　　background-color: #fff; } // 循环语句 // for 　　@for $i from 1 to 10 { 　　　　.border-#{$i} { 　　　　　　border: #{$i}px solid blue; 　　　　} 　　} // while 　　$i: 6; 　　@while $i > 0 { 　　　　.item-#{$i} { width: 2em * $i; } 　　　　$i: $i - 2; 　　} // each 　　@each $member in a, b, c, d { 　　　　.#{$member} { 　　　　　　background-image: url("/image/#{$member}.jpg"); 　　　　} 　　} ``` #### (7). 函数 1. 定义函数 ```scss 　　@function double($n) { 　　　　@return $n * 2; 　　} 　　#sidebar { 　　　　width: double(5px); 　　} ``` 2. 颜色函数, SASS提供了一些内置的颜色函数，以便生成系列颜色。 ```scss 　　lighten(#cc3, 10%) // #d6d65c 　　darken(#cc3, 10%) // #a3a329 　　grayscale(#cc3) // #808080 　　complement(#cc3) // #33c ``` 3. 其他一些内建函数 ####

---

css in js

#### (1). ####

---

css modules 如 vue style scoped 原理

#### (1). ####

---

tc39 提案相关, stage x 新语法

#### (1). ####

---

不同标准的js,打成npm包后 引入的时候 怎么兼容

#### (1). 兼容各个规范 ```js (function (global, factory) { if (typeof exports === 'object' && typeof module !== 'undefined') { // CommonJS、CMD规范检查 module.exports = factory() } else if (typeof define === 'function' && define.amd) { // AMD规范检查 define(factory) } else { // 浏览器注册全局对象 global.test = factory() } })(this, (function () { function say() { console.log('hello') } return { say } })) ``` ```html ``` ```js // node环境 const test = require('./test') test.say() ``` ####