less的简单学习

less

概览

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。

在浏览器环境中使用less

<link rel="stylesheet/less" type="text/css" href="styles.less" />
<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/3.11.1/less.min.js" ></script>

变量

@width: 100px;
@color: red;

.box{
	width:@width;
	height: 50px;
	color:@color;
}

编译成css为

.box{
	width: 100px;
	height: 50px;
	color: red;
}

混合

.boder{
    border: 1px solid red;
    box-shadow: 0 0 5px 5px blue;
}
.box{
    width: 100px;
    height: 100px;
    color: white;
    // 利用混入，将已经声明好的样式表混入
    .boder();
}

嵌套

<div class="box">
        盒子
        <div>
            外层
            <div>
                中间层
                <div>
                    内层
                </div>
            </div>
        </div>
    </div>

@width1: 100px;
@width2: 200px;
@height: 300px;
@color1:red;

.box{
    width: @width1;
    height: @height;
    background-color: @color1;

    & >div{
        width: 500px;
        height: 500px;
        background-color: cyan;

        &>div{
            width: 200px;
            height: 200px;
            background-color: green;

            &>div{
                width: 100px;
                height: 100px;
                background-color: palevioletred;
                margin: 10px;
            }
        }
    }
}

运算

算术运算符 + 、 - 、 * 、 / 可以对任何数字、颜色或变量进行运算。

如果可能的话，算术运算符在加、减或比较之前会进行单位换算。
计算的结果以最左侧操作数的单位类型为准。
如果单位换算无效或失去意义，则忽略单位。
无效的单位换算例如：px 到 cm 或 rad 到 % 的转换。

// 所有操作数被转换成相同的单位
@conversion-1: 5cm + 10mm; // 结果是 6cm
@incompatible-units: 2 + 5px - 3cm; // 结果是 4px
@base: 5%;
@filler: @base * 2; // 结果是 10%
@other: @base + @filler; // 结果是 15%

转义

转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~“anything” 或 ~‘anything’ 形式的内容都将按原样输出，除非 interpolation。

// 老版本的写法
// @768:~ "(min-width: 768px)";
// 新版本写法
@768: (min-width: 768px);

.box{
    @media @768 {
        width: 600px;
    }
}

函数

@boolean: boolean(2>0);
@num: range(1, 12, 1);

.box{
    width: if((2<1), 100px, 200px);
    height: if(@boolean, 100px, 200px);
}
each(@num, {
    .col-@{value} {
        width: 8.3% * @value;
    }
})

命名空间

出于组织结构或仅仅是为了提供一些封装的目的，希望对混合（mixins）进行分组。

先定义一些混合样式 :

#style() {
    .button{
        width: 200px;
        height: 100px;
        background-color: tomato;
        color: white;
    }
    .tab{
        width: 50px;
        height: 50px;
        background-color: orchid;
    }
    primary: bule;
}

再把 .tab 类混合到 div中 :

div{
    color: black;
    margin: 10px;
    background-color: palegreen;
    // 命名空间中样式的映射
    #style.tab();
}

映射

可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。

#colors() {
  primary: blue;
  secondary: green;
}
.button {
  color: #colors[primary];
  border: 1px solid #colors[secondary];
}

编译为 :

.button {
  color: blue;
  border: 1px solid green;
}