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. 定义变量

   $color1:#aeaeae;
   .div1{
       background-color:$color1;
   }
   // ---------编译后
   .div1 {
       background-color: #aeaeae;
   }
   /*# sourceMappingURL=test.css.map */

2. 希望某个在子选择器中定义的变量能够成为全局变量，可以使用!global关键字

   #main {
       $width: 5em !global;
       width: $width;
   }
   
   #sidebar {
       width: $width;
   }

3. 嵌套引用在其他编程语言中即是字符串插值，需要用#{}进行包裹：

   $left:left;
   .div1{
       border-#{$left}-width:5px;
   }

4. Sass中也是支持对于变量进行简单的计算

   $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. 嵌套

   .div1{
       .span1{
           height: 12px;
       }
       .div2{
           width: 16px;
       }
   }
   // 属性也可以嵌套，比如border-color属性
   // border后面必须加上冒号
   p {
       border: {
           color: red;
       }
   }

2. 父元素引用

   .div1{
       &:hover{
           cursor: hand;
       }
   }

(4). 代码重用

1. 继承, SASS允许一个选择器，继承另一个选择器。比如，现有class1：

   .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

   @import "_test1.scss";
   @import "_test2.scss";
   @import "_test3.scss";

2. Mixin&Include

   // 使用@mixin命令，定义一个代码块
   @mixin left {
       float: left;
       margin-left: 10px;
   }
   // 使用@include命令，调用这个mixin
   div {
       @include left;
   }

3. 参数与缺省值

// 边距设置
@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. 流程控制

// 条件语句
// @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. 定义函数

　　@function double($n) {
　　　　@return $n * 2;
　　}

　　#sidebar {
　　　　width: double(5px);
　　}

2. 颜色函数, SASS提供了一些内置的颜色函数，以便生成系列颜色。

　　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). 兼容各个规范

(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
  }
}))

<!-- 浏览器环境 -->
<script src="./test.js"></script>
<script>
    test.say()
</script>

// node环境
const test = require('./test')

test.say()