学习使用less

一、变量

声明变量用@

例：@width:100px;

        width:@width

二、混合

想要在哪里使用这个元素的样式就在哪里使用  “选择器（）”的方式使用

例：#one{font-size:28px}

        div{#one()}

三、嵌套

在css中给子代设置样式的时候还要在前面写父级，但是less中可以将子级直接嵌套在父级

例：

css

#header { color: black; }

#header .navigation { font-size: 12px; }

less

#header .logo { width: 300px; }

#header { color: black;

         .navigation { font-size: 12px; }

           

         .logo { width: 300px; }

}

四、运算

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

width:100px+200rem;

width:100px+10cm;

运算规则：

1.绝对单位和相对单位运算，以第一个的运算符单位为准

2.绝对单位和绝对单位（eg:cm）,以实际为准

五、转义

允许变量的属性值是字符串

例：@min:~'(min-width:786px)'

六、命名空间访问符

一个父级元素有多个子级，想要使用其中一个的样式就可以使用命名空间    使用方法：父级选择器名子级选择器名（）

例：#one{

        .button{

                color:'red'

        }

        .button2{color:blue

        }

}

#one.button()

七、映射

使用一个元素中的一个属性

例：#one{

        .button{

                color:'red'

                font-size:18px

        }

使用：#one.button[color]

八、作用域

访问变量声明的一些属性，会现在当前作用域查找，找不到再向父级查找

九、注释

//  单行注释

/**/ 多行注释