2021-04-09 入职第三天工作总结

 

1.公司用的scss与 less sass的区别

1.>>> 这个是权重MAX符

2.宏定义   @mixin

①比如垂直居中

 @mixin t-center{
 position: absolute;
 left: 50%;
 top: 50%;
 transform:translate(-50%,-50%)
}

②带参数的 mixin——假设封装一个flex样式：

@mixin df($fd,$jc,$ai,$as){
 display:flex;
 flex-direction:$fd;
 jusitify-content:$jc;
 align-items:$ai;
 align-self:$as;
}

③需要传参但不需要全部传参

@mixin df($fd:row,$jc:null,$ai:null,$as:null){
 display:flex;
 flex-direction:$fd;
 jusitify-content:$jc;
 align-items:$ai;
 align-self:$as;
}

SASS允许开发人员以嵌套的方式使用CSS，但是过度的使用嵌套会让产生的CSS难以维护

代码中的ul、li选择器都被嵌套在nav选择器当中使用，可读性更高

.opt-ul-wrapper {
  ul li {
    cursor: pointer;
  }
}

 

2.补了下  结构性伪类选择器—nth-last-child(n)

https://blog.csdn.net/xxssyyyyssxx/article/details/53127416?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161795110116780366588231%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=161795110116780366588231&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v29-2-53127416.pc_search_result_before_js&utm_term=.post%3Alast-child
（ps：

ul>li 子代 与 ul li 的区别 

Ⅱ、ul>li 子代选择器 仅仅下一级

Ⅰ、ul li 后代选择器 ——ul 里所有的 li 元素

）

公司代码实例——

not表示 改除了last-of-type 选中的ul以外所有的ul？

.opt-ul:not(:last-of-type) 

.opt-ul-wrapper {
  .opt-ul:not(:last-of-type) {
    padding: 8px 0;
    border-bottom: 1px solid #e8e8e8;
  }
}

 

代码规范

研发团队的代码规范是否有VS的插件与其冲突