这是我参与「第五届青训营 」伴学笔记创作活动的第 11 天
方法的命名空间
作用：让代码更加规范
例：
.card{
background: #723232;
.d(@w:300px){
width:@w;
#a (@h: 300px){
height:@h;//可以使用上一层传进来的方法
}
}
}
#wrap{
#card >.d >#a(100px);//父元素不能加括号
}
#main{
#card .d();
}
#con{
//不得单独使用命名空间的方法
//.d()如果前面没有引入命名空间#card，将会报错
#card;//等价于#card（）；
.d(20px);//必须先引入#card
م}
#wrap{ height:100px;
}
#main{
width:300px;
#con{
width:20px;
}
要点：
1、在CSS 中 > 选择器，选择的是儿子元素，就是必须与父元素有直接血源的元素。
2、在引入命令空间时，如使用 > 选择器，父元素不能加括号。
3、不得单独使用命名空间的方法 必须先引入命名空间，才能使用其中方法。
4、子方法可以使用上一层传进来的方法
方法的条件筛选
less没有ifelse，可是它有when、whennot以及and
whennot 的意思是“当某物不是某种情况时”，他主要用来生成复杂的条件模式。例如：当A不是B的情况时，可以使用"whennot A is B"。
#card{
//when &&
border(@width,@color,@style) when(@width>100px) and(@color=#999){
border:@style @color @width;
}
//whennot 相当于取反!
.background(@color) when not (@color>=#222){
background: @color;
}
//逗号分隔符方法 相当于||
.font(@size:20px) when (@size>50px),(@size<100px){
font-size:@ size;
}
}
#main {
#card>.border(200px, #999, solid);
#card>.background(#111);
#card>.font (70px);
}
注意点：
比较运算有：
、 >=、 =、 <=、 <。
=代表的是等于
除去关键字 true以外的值都被视为false：
数量不定的参数
如果你希望你的方法接受数量不定的参数，你可以使用...，犹如 ES6 的扩展运算符。
. boxShadow(...){
box-shadow:@arguments;
}
textShadow(@a,...){
text-shadow:@arguments;
}
#main{
.boxShadow(1px, 4px, 30px, red);
.textShadow (1p×, 4p×, 30px, red);
}
方法使用important！
使用方法 非常简单，在方法名后 加上关键字即可。
.border{
border:solid 1px red;
margin:50px;
}
#main{
.border()！important;
/*生成后的 CsS
#main{
border:solid 1px red !important;
margin:50px !important;
}
循环方法
@theme-colors: {
primary: @primary;
success: @success;
info: @info;
warning: @warning;
danger: @danger;
};
each(@theme-colors,{
.rabbit-tag-@{key} {
color: @value;
background-color: rgba(@value, 0.2);
border: 1px solid rgba(@value, 0.35);
.rabbit-tag-close-icon {
&:hover {
color: darken(@value, 10%);
}
}
}
}
)
循环遍历主题颜色，对每一个class名以rabbit-tag为前缀的元素添加样式。
为其中的图标添加hover事件，改变颜色为主题颜色的变暗10%。
属性拼接方法
+_代表的是空格；+ 代表的是逗号。
生成的css：
继承
extend关键字
extend 是 Less 的一个伪类。它可继承所匹配声明中的全部样式。
.animation{
transition: all .3s ease-out;
}
.hide{
transform: scale(0);
}
}
#main{
&:extend(.animation);
}
#con{
&:extend(.animation .hide);
}
.animatn,#main{
transition: all .3s ease-out;
}
.animation .hide , #con{
transform: scale(0);
}
全局搜索替换
使用选择器匹配到的全部声明。
#main{
width: 200px;
}
#main {
&:after {
content:"Less is good!";
}
}
#wrap:extend(#main al1){}
#main,#warp{
width: 200px;
}
#main:after, #wrap:after {
content: "Less is good!";
}
减少代码重复性
从表面看来，extend与方法最大的差别，就是 extend 是同个选择器共用同一个声明，而 方法 是使用自己的声
明，这无疑增加了代码的重复性。
如：
继承的使用要点
1.选择器和扩展之间 是允许有空格的：pre:hover：extend（div pre）。
2·可以有多个扩展：pre:hover:extend（div pre）：extend（.bucket tr）-注意这与pre:hover:extend（div pre，.bucket tr）一样。
3，这是不可以的，扩展必须在最后：pre:hover:extend（div pre）.nth-child（odd）。
4，如果一个规则集包含多个选择器，所有选择器都可以使用extend关键字。
导入
@import关键字
导入less文件可省略后缀
关键字：@import
#main{
font-size:15px;
}
@import "style";
@import的位置可以任意放置
reference关键字
Less中最强大的特性使用引入的Less文件，但不会编译它。
@import (reference) "bootstrap. less";
once关键字
@import语句的默认行为。这表明相同的文件只会被导入一次，而随后的导入文件的重复代码都不会解析。
@import (once) "foo. less";
@import (once) "foo. less"; //this statement will be ignored
multiple关键字
使用@import（multiple）允许导入多个同名文件。
条件表达式
带条件的混合(前面有提过)
比较运算符：>，>=，=，=<，<
格式：when（）{}
.mixin(@a) when(lightness(@a) >= 50% ) {
background-color: black;
}
.mixin(@a) when(lightness(@a) < 50% ) {
background-color: white;
}
.mixin(@a) {
color:@a;
}
. class1 {
. mixin(#ddd);
}
.class2 {
.mixin(#555);
}
.class1{
background: black;
color:#ddd;
}
.class2 {
background: white;
color:#555;
}
类型检测函数
检测值的类型，由less提供的函数，一般搭配when使用
iscolor
isnumber
isstring
iskeyword
isurl
. mixin(@a: # fff; @b: 0) when(isnumber(@b)) {
color: @a;
font-size: @b;
}
.mixin(@a; @b: black) when(iscolor(@b)) {
font-size: @a;
color: @b;
}
单位检测函数
检测一个值除了数字是否是一个特定的单位
ispixel
ispercentage
isem
isunit
.mixin(@a) when(ispixel(@a)) {
width: @a;
}
.mixin(@a) when(ispercentage(@a)) {
width: @a;
}
.class1 {
.mixin(960px);
}
.class2 {
.mixin(95%);
}
.class1 {
width: 960px;
}
.class2{
width: 95%;
}
函数
函数库
less中封装了非常多函数库，例如颜色定义、颜色操作、颜色混合、字符串处理等等。
例如color（）：用于解析颜色，将代表颜色的字符串转换为颜色值。
body {
color: color("#f60");
background: color("red");
}
body {
color: #ff6600;
background: #ffo000;
}
例如convert（）：将数字从一种类型（单位）转换为另一种类型
长度单位：m，cm，mm，in，pt，px，pc
时间单位：s，ms
角度单位：rad（弧度），deg（度），grad（梯度），tum（圆）
body {
width: convert(20cm, px);
}
body {
width: 755.90551181px;
}
less还有很多函数，需要自己去官网看文档了解
