526互联

less-面试题

发布时间 2023-09-15 14:44:22作者: Yancy00

Less是什么?

  • less: （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 预处理扩展语言。
  • less可以定义变量 @width: 100px;可以使用嵌套样式语法
  • less可以封装样式函数,甚至"重载"函数.(匹配模式)
  • 还可以用mixin,在一个规则集中直接引用另一组样式规则.代码重用
  • less还有许多内置函数,(字符串函数,数学函数,颜色函数....)
    less只是开发时的中间语言,最终通过插件或者lessc命令将.less文件编译为.css文件使用
    less可以提高开发效率,以及提高代码的可读性,可维护性
.box { //样式嵌套
    width: 500px;
    padding: 20px;
    border: 1px solid #666;
    border-radius: 10px;

    // & 符号代表上一层的选择器. 父级
    &:hover {
        background-color: green;
        box-shadow: 0 0 20px black;
    }
}

// 混合 mixin
.bordersName {  
     border-radius: 5px;  
     -moz-border-radius: 5px;  
     -webkit-border-radius: 5px;  
  }
  #menu {  
     color: gray;  
     .bordersName;  
  }

.borderName(@px) {  // 封装样式函数
　　border - radius : @px;
}
.box5{ 
    .borderName(10px)  // 调用
}