1、Less 语法
1、变量
@变量名:值;
2、运算符
,-,*,/
3、混合
.border{ border:1px solid #ddd ; }
#main{
.border;
}
带参数的混合
.border(@color){
border-color:@color;
}
#main{
.border(#ddd);
}
#top{
.border(#000);
}
====================================
1、Less 语法
1、嵌套
允许在一个选择器中 嵌入声明 另一个选择器,以便完成后代 或 子代结构的选择器声明
选择器1{
... ...
选择器2{
... ...
}
>选择器3{
... ...
}
}
ex:
#top{
color:red;
border-color:#e4393c;
div.topic{
height:30px;
line-height:1;
span.border{
}
}
>a:hover{
text-decoration:none;
}
}
#top{
color:red;
border-color:#e4393c;
}
#top div.topic{
height:30px;
line-height:1;
}
#top > a:hover{
text-decoration:none;
}
2、函数
函数:在Less中表示的是一段独立的功能
1、lighten()
颜色减淡函数
ex:
color:lighten(#e4393c,30%);
2、darken()
颜色加深函数
ex:
color:darken(#e4393c,50%);
3、img-width("URL")
计算指定图像的真实宽度
4、img-height("URL")
计算指定图像的真实高度
5、ceil(number)
向上取整,得到的是比number大的最小整数
ex:
ceil(58.5); 结果为:59
6、floor(number)
向下取整,得到的是比number小的最大整数
ex:
floor(58.5);结果为:58
3、文件导入
允许将其他的Less文件导入到当前的Less文件中
语法:
@import "xxxx.less";
2、Bootstrap定制
按自己的需求修改bootstrap的源码,以便达成要的效果
Bootstrap的源码结构:
1、Core variables and mixins
整个Bootstrap中要用到的所有的变量的声明 和 混合
2、Reset and dependencies
重写 以及 依赖的 文件
3、Core CSS
核心的CSS内容 - 全局CSS样式声明
4、Components
所有的组件 less
一个 组件 针对一个 less 文件
5、Components & Javascript
插件
6、Utility Classes
工具类