2021SC@SDUSC amis-低代码前端框架代码分析 一

2021SC@SDUSC amis-低代码前端框架代码分析 一

概述

amis是一个低代码前端框架。
本人首先分析布局，关于页面布局多为scss代码。
所以本人主要讲解scss代码部分，后续再分析其它类型代码。

代码分析

base 包里包含了三个scss代码

第一个_normalize.scss
源代码注释为英文，我改用中文来分析

html {
   
  line-height: 1.15;
   // line-height CSS 属性用于设置多行元素的空间量，如多行文本的间距。
  对于块级元素，它指定元素行盒（line boxes）的最小高度。
  
  -webkit-text-size-adjust: 100%; 
  //-webkit-text-size-adjust: 100%可以禁止字体变化,以适配移动设备
}

body {
   
  margin: 0;
  //设置外边距为0
}

h1 {
   
  font-size: 2em;
  margin: 0.67em 0;
 
}
//定义元素属性

hr {
   
  box-sizing: content-box; 
  height: 0; 
  overflow: visible;
}


pre {
   
  font-family: monospace, monospace; // 1
  font-size: 1em; // 2
}

a {
   
  background: transparent;
}
abbr[title] {
   
  border-bottom: none; // 1
  text-decoration: underline; // 2
  text-decoration: underline dotted; // 2
}


b,
strong {
   
  font-weight: