一贴看穿LESS一贴学会LESS
注释/*这是CSS里面的注释会被编译到CSS中*/
//这个注释是LESS专用的，所以不会出现到CSS中
变量
可变的一个量，比如a=b=c
1、LESS中变量的定义方式@
比如定义一个宽度@test_width:500px;@test_height:500px;
在运用的适合可以直接这样写
div{
width:@test_width;
height:@test_height;
}
2、混合写法
.border{
border: solid 1px #cccccc;
}
使用的时候直接嵌套
.div1{
.border;
}
这时.div1生成的值
.div1 {
border: solid 1px #cccccc;
}
2.1混合带参数(可以看作php中的函数)
.border(@border_color){
border:sloid 2px @border_color;
}
使用方法：
.div{
.border(#f60);
}
编译出的结果：
.div {
border: sloid 2px #ff6600;
}
2.2混合带参数并且有默认值
.border(@border_color:#f60){
border:sloid 2px @border_color;
}
使用方法：
不带参数调用
.div1{
.border();
}
带参数调用
.div{
.border(red);
}
编译出的结果：
不带参数调用的结果
.div1 {
border: sloid 2px #ff6600;
}
带参数调用的结果
.div {
border: sloid 2px #ff0000;
}
2.3混合带参数并且有默认值,常见案例例如定义圆角兼容
.border_radius(@radius_width:5px;){
-webkit-border-radius:@radius_width ;
-moz-border-radius:@radius_width ;
border-radius:@radius_width ;
}
使用的时候
.border{
.border_radius()
}
编译后的结果就是
.border {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
使用的时候也可以传值
.border{
.border_radius(50%)
}
编译后的结果就是
.border {
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
}
3.匹配模式
传值的时候定义一个字符，在使用的时候使用那个字符，就调用那条规则
.border(all,@w: 5px){
border-radius: @w;
}
.border(t_l,@w:5px){
border-top-left-radius: @w;
}
.border(t_r,@w:5px){
border-top-right-radius: @w;
}
.border(b-l,@w:5px){
border-bottom-left-radius: @w;
}
.border(b-r,@w:5px){
border-bottom-right-radius: @w;
}
默认携带参数：@_ 不管调用那一条规则都要把我加上，并且需要注意，@_的后面也要把匹配字符后面的变量或者是值带上！
.border(@_,@w:5px){
width: 50px;
height: 50px;
background: royalblue;
}
调用时只需要更上匹配字符就可以了
如下：我想让四条边都是圆角，就调用all
.border{
.border(all,50%);
}
结果：生成的值，就是调用.border(all,@w: 5px)... ... 的规则，并且携带上.border(@_,@w:5px)...
.border {
border-radius: 50%;
width: 50px;
height: 50px;
background: royalblue;
}
如下：我想让右上角的边是圆角，就调用t_r
.border{
.border(t_r,50%);
}
结果如下：
.border {
border-top-right-radius: 50%;
width: 50px;
height: 50px;
background: royalblue;
}
4.运算
所有的数字、颜色值、变量都可以使用运算。
注意：
A、运算之间要用空格隔开。
B、同时进行多运算时，需要涉及优先运算时在”()“括号中完成！
c、计算的时候可以不用都带上单位，但是你至少要有一个数值有单位
例如：
错误写法：
width:500px-300; 这时编译工具就会报错
正确写法：
width:500px - 300; 这时编译工具就不会报错
多值运算实例：
错误写法：
width: 500px - 200 * 2; 他的流程是先计算200*2=400，然后再用500-400，最终的的宽度值就是100px
正确写法：
width: (500px - 200) * 2;他的流程是先计算括号内的（500-200）=300，然后再用300-2，最终的的宽度值就是600px
单位实例：
错误写法：
width: 500 - 200 * 2; 他的计算结果就是100
正确写法：
width: 500 - 200 * 2px; 他的计算结果就是100px
width: 500 - 200px * 2; 他的计算结果也是100px
小例子1：颜色值计算
.wp {
width: 600px;
height: 100px;
background: #000000 + 20; 它是将颜色值拆分为 R G B 然后分别加上20 ，然后再返回一个对应的十六位进制的颜色值
}
.wp {
width: 600px;
height: 100px;
background: #141414; 计算后的返回值141414
}
小例子2：宽度值计算
HTML结构
<div class="wp">
<div class="div1"></div>
<div class="div2"></div>
</div>
LESS结构
@w:960px;
.wp{
width: @w;
}
.div1{
float: left;
width: 500px;
height: 300px;
background: green;
}
这时我让div2的宽度等于总宽度减去div1的宽度，然后再去减一个外边局（margin-left）的宽度，剩下的就是他的宽度
.div2{
float: right;
width: (@w - 500) - 10;
height: 300px;
margin-left: 10px;
background: firebrick;
}
最后生成后的结果：
.wp {
width: 960px;
}
.div1 {
float: left;
width: 500px;
height: 300px;
background: green;
}
.div2 {
float: right;
width: 450px;
height: 300px;
margin-left: 10px;
background: firebrick;
}
5.嵌套规则和上一层选择器&
简化开发的时候的一个代码书写量
传统写法：
.div1{
width: 300px;
height: 200px;
background: #ff2634;
}
.div1 img{
float: left;
width: 60px;
height: 30px;
padding: 1px;
margin: 0 10px 10px 0;
border: solid 1px #cccccc;
}
.div1 img:hover{
border-color: #00f100;
}
.div1 p{
font: 14px/24px 'Microsoft YaHei', 'Hiragino Sans GB', 'STHeiti', Tahoma, 'SimHei', sans-serif;
color: #FFF1E1;
}
简化写法，全部将它们写入.div{}里面，和我们的HTML嵌套是一样的规则
.div1{
width: 300px;
height: 200px;
background: #ff2634;
img{
float: left;
width: 60px;
height: 30px;
padding: 1px;
margin: 0 10px 10px 0;
border: solid 1px #cccccc;
}
img:hover{
border-color: #00f100;
}
p{
font: 14px/24px 'Microsoft YaHei', 'Hiragino Sans GB', 'STHeiti', Tahoma, 'SimHei', sans-serif;
color: #FFF1E1;
}
}
&上一层选择器简化：
.div1{
width: 300px;
height: 200px;
background: #ff2634;
img{
float: left;
width: 60px;
height: 30px;
padding: 1px;
margin: 0 10px 10px 0;
border: solid 1px #cccccc;
&:hover{ &:hover这时是在img选择器之内，那么此时&代表的就是上一级选择器img编译后完整结果就是.div1 img:hover { border-color: #00f100; }
border-color: #00f100;
}
p{
font: 14px/24px 'Microsoft YaHei', 'Hiragino Sans GB', 'STHeiti', Tahoma, 'SimHei', sans-serif;
color: #FFF1E1;
}
}
上面两种方式编译的结果都是一样的，如下
.div1 {
width: 300px;
height: 200px;
background: #ff2634;
}
.div1 img {
float: left;
width: 60px;
height: 30px;
padding: 1px;
margin: 0 10px 10px 0;
border: solid 1px #cccccc;
}
.div1 img:hover {
border-color: #00f100;
}
.div1 p {
font: 14px/24px 'Microsoft YaHei', 'Hiragino Sans GB', 'STHeiti', Tahoma, 'SimHei', sans-serif;
color: #FFF1E1;
}
6.@arguments 变量
说明：@arguments代表所有的可变参数
注意：
A、@arguments;代表所有可变参数是，参数的先后顺序就是你的（）括号内的参数的先后顺序
B、注意在使用的赋值，值得位置和个数也是一一对应的，只有一个值，把值赋值给第一个，两个值，赋值给第一个和第二个，三个值，分别赋值给第三个... ...以此类推，但是需要主要的是假如我想给第一个和第三个赋值，你不能写（值1，，值3），必须把原来的默认值写上去！
例如：
实例1
.border(@x:solid,@c:red){
border: 21px @arguments;
}
.div1{
.border()
}
生成样式如下
.div1 {
border: 21px solid #ff0000;
}
实例2
.border(@w:1px,@x:solid,@c:red){
border: @arguments;
}
.div1{
.border()
}
生成样式如下
.div1 {
border: 21px solid #ff0000;
}
注意在使用的赋值
.border(@c:red,@w,@x:solid){
border: @arguments;
}
.div1{
.border(blue,102px)
}
7.避免编译~ ‘ ”
将我们不需要进行编译的内容注释掉
例子：默认情况下会进行计算
.div1{
width: calc(960px - 100px); calc Css3中新增的计算
}
编译结果：
.div1 {
width: calc(860px); 结果已经帮我们编译了，但实际上我们不需要他帮我们编译，此时我们就可以使用避免编译
}
使用避免编译~''或~""使用波浪线单引号或者双引号将我们不需要编译的内容扩起来
.div1{
width: calc(~'960px - 100px');
}
结果：原样输出
.div1 {
width: calc(960px - 100px);
}
8.关键字 !important
作用：给所有引用的样式加上!important
小案例：
.divstyle(@p_w:30px,@m_w:10px){
padding: @p_w;
margin: @m_w;
}
.div1{
width: calc(~'960px - 100px');
.divstyle()!important;
}
输出结果末尾都会加上!important
.div1 {
width: calc(960px - 100px);
padding: 30px !important;
margin: 10px !important;
}
好吧LESS这里就带大家过一遍了，具体的全面的LESS视频课程，请继续关注DZ起点网，如有疑问请在有问必答提问！
有问必答传送门：http://www.dz7.com.cn/discuzf-2-1.html
{location}人小手一抖，钱钱到手！ LESS nice :lol:lol
页:
[1]