less(Leaner Style Sheets)

npm懒得写哈哈哈哈

<link rel="stylesheet/less" type="text/css" href="styles.less" /> <script src="https://cdn.jsdelivr.net/npm/less" ></script> 

• 使用@前缀声明变量

.box { 
             .left { 
                 ...     } } 

• 代表当前选择器的父级(官方解释)
• (代表当前选择器)

// css中 .link:hover{ 
        }  // less中 .link { 
             &:hover { 
             } } 

算数操作可以操作任何数字、颜色或变量

不常用(有点笨)

• 不同单位之间的算数运算，单位最多左侧的单位为准

.box { 
             width:10px   20px;     color: #ff0   #aff; } 

• 建议使用混合选择器class选择器
• 混合时也应使用class

// a.less文件 .w150 { 
             width: 150px; }  // b.css文件 .box { 
             height:100px;     color: #f00;
    .w150();
}

// a.less文件
// @width:5px 表示默认值是5px .main_border(@width:5px, @bcolor:red) { 
        
    border: @width, solid, @bcolor;
}

// b.css文件 .box { 
        
    width: 10px;
    height: 100px;
    .main_border(1px, orange)
}

// a.less .main { 
        
    width: 100px;
    height: 200px;
}

// b.css // 只想用.main的width属性 .box { 
        
    width: .main()[width];
    height: 200px;
}

以下案列弥补了less中不能定义函数的缺陷

.pxToRem(@px) {
    result:(@px / 10) * 1rem
}
.box {
    width: .pxToRem(100)[result]
}

// a.less .main { 
        
    border: 1px solid #ccc;
}

// b.css .box { 
        
    width:100px;
    &:extend(.main)
}

• 在查找一个变量时，首先在本地查找变量和混合（mixins）
• 如果找不到，则从父级作用域继承