rem和 css编译器scss的基本使用

rem是相对于根元素，这样就意味着，我们只需要在根元素确定一个px字号，则可以来算出元素的宽高或者下载
在scss中设置函数这样就不用计算rem转化直接用设计图上面的尺数

@charset 'utf-8';
@import 'common/reset';/*引入默认清除样式，路劲只需要写当前文件所在的文件夹即可*/
@function r($px) {
    @return $px/100+rem;
}
h1 {
    font-size: r(30);
   
}

scss开启自动监听在该文件的根目录下开启监听，会监听到该目录下的所有css改变

//通过js来改变html根目录字体大小来动态适应不同屏幕
    	let htmlWidth=document.documentElement.clientWidth||document.body.clinetWidth;//获取屏幕宽度,有的浏览器不兼容需要通过body.clientWidth来获取
    	let htmlDom=document.getElementsByTagName("html")[0];
    	if(htmlWidth>750){
    		htmlWidth=750
    	}
    	htmlDom.style.fontSize=htmlWidth/20+"px";

scss的基本使用
把基本要用到的样式在再公共部分，下面的函数是移动使用的

@function r($px) {
   @return $px/100 + rem;
 }
 /*
 在scss中声明一个变量要美元符号开头($)然后语义化命名，
 在需要的页面直接引入相关的变量即可，后期维护效率会得到极大提高
 */
$baColor:#00bcd4;
$textColor:#212121;
$iconBgColor:#fff;
/*
常用到的样式。如多行，单行溢出省略这些需要用到的css样式，
可以写成如下例子，当我们需要用到的时候就可以直接引用
设置默认显示多少行
word-break: break-all; 解决纯数字或者英文不不省略的问题
*/
@mixin ellipsis-overflow($num:2){
    display: -webkit-box;
   -webkit-line-clamp: $num;
   -webkit-box-orient: vertical;
   overflow: hidden;
   word-break: break-all;
}

/*引入公共的scss，在需要的样式中引入相关的变量即可*/
@import "@/assets/styles/varibles.scss";
.icons {
  background: $iconBgColor;
        p {
          font-size: r(28);
          color: $textColor;
          @include ellipsis-overflow();/*@include ellipsis-overflow(1); 传个1进去就是1行显示*/
        }
}