less在浏览器直接使用以及rem布局

less的语法

注释
- // 只在less中显示
- /**/ 会在编译好的css文件中显示

变量

定义变量用@

less中的写法

@ly_width:100px;
.box {
    width:@ly_width;
}

编译后在css中显示的是

.box {
    width:100px;
}

混合

不带参数的混合

先上less中的代码如果想在.one中应用.border的样式怎么办?

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border {
    border:1px solid red;
}
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
}

写成下面的样子

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border {
    border:1px solid red;
}
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .border;
}

编译后在css中显示的是
.border { border:1px solid red; } .one { width: 100px; height: 200px; background-color: #008000; border: 1px solid red; }

带参数的混合---不带默认值 (可以传多个参数,以逗号或者分号隔开,推荐用分号下面以一个参数为例)

less中的写法

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border(@border_width) {
    border:@border_width solid red;
}
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .border(1px);
}

编译后在css中显示的是

.one {
    width: 100px;
    height: 200px;
    background-color: #008000;
    border: 1px solid #ff0000;
}

带参数的混合---带默认值 (可以传多个参数下面以一个参数为例)

less中的写法

@ly_width:100px;
@ly_height:200px;
@ly_color:green;
.border(@border_width:3px;) {
    border:@border_width solid red;
}
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .border();
}

编译后在css中显示的是

.one {
    width: 100px;
    height: 200px;
    background-color: #008000;
    border: 3px solid #ff0000;
}

在解决css3兼容性时候经常用到

解决border-radius兼容

.border_radius (@radius: 5px) {
    -webkit-border-radius: @radius;
    -moz-border-radius: @radius;
    -ms-border-radius: @radius;
    -o-border-radius: @radius;
    border-radius: @radius;
}

匹配模式

可以理解成if 和上面的混合有些相似

less中的写法

//定义上,下,左,右边框的样式
.border(top;@border_width:5px;@border_color:red){
    border-top:@border_width solid @border_color;
}
.border(bottom;@border_width:5px;@border_color:red){
    border-bottom:@border_width solid @border_color;
}
.border(left;@border_width:5px;@border_color:red){
    border-left:@border_width solid @border_color;
}
.border(right;@border_width:5px;@border_color:red){
    border-right:@border_width solid @border_color;
}
//如果想写通用的样式 可以在下面的代码中写 格式是固定的 
.border(@_,@border_width:5px;@border_color:red){
    border-color:yellow;
}
.border_use1 {
    //选择和if差不多 如果是left就调用上面对应的
    .border(left);
}
.border_use2 {
    //选择和if差不多 如果是right就调用上面对应的
    .border(right);
}

编译后在css中显示的是

.border_use1 {
    border-left:5px solid #ff0000;
    border-color:yellow;
}
.border_use2 {
    border-right:5px solid #ff0000;
    border-color:yellow;
}

运算
- 运算提供了加,减,乘,除操作,还可以做属性值和颜色的运算...
  - less中的写法
```
@ly_width:100px;
.one {
    width:@ly_widht + 100;
}
```
  - 编译后在css中显示的是
```
.one {
    width:200px;
}
```

嵌套

可以在一个选择器中嵌套另一个选择器,代码看起来层次分明,提高代码可维护性

html结构

<div class="one">
    <div class="two"></div>
</div>

less中的写法

@ly_width:100px;
@ly_height:200px;
@ly_color:red;
.one {
    width:@ly_width;
    height:@ly_height;
    background-color:@ly_color;
    .two {
        background-color: green;
    }
}

编译后在css中显示的是

.one {
width: 100px;
height: 200px;
background-color: #ff0000;
}
.one .two {
  background-color: green;
}

@arguments变量

可以包含所有的变量,将变量一起处理

less中的写法

//和前面提到的混合一起举个栗子  
.border(@border_width;@border_style;@border_color){
    border:@arguments;
}
.one {
    .border(1px;solid;red);
}

编译后在css中显示的是

.one {
    border:1px solid #ff0000;
}

text.less代码引入到html中

@charset"utf-8";
@color:red;
@fontSize:16px;
@className:box;
/*注释：在css中可以访问*/
//注释：在css中不支持，不会编译在css文件中
//变量以@前缀
//js命名与js一样
a {
  color: @color;
  font-size:@fontSize ;
}
//变量名拼接，使用方法:@(变量)
.@{className} {
  color: @color;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/less" href="test.less">
<!--//与css一样引用，但需要注意一定要加type="text/less"，不然样式
不会被识别-->
    <script src="lib/less/less.js"></script>  <!--//通过less里
面的ajax向服务器请求数据，将less转换为css-->
    <script>less.watch();</script>   <!--//不用刷新直接出来样式-->
</head>
<body>
<a href="javascript:;">天下第一刀，蛮三刀天下第一刀，蛮三刀
    天下第一刀，蛮三刀天下第一刀，蛮三刀天下第一刀，蛮三刀
    天下第一刀，蛮三刀天下第一刀，蛮三刀天下第一刀，蛮三刀天下
第一刀，蛮三刀天下第一刀，蛮三刀天下第一刀，蛮三刀天下第一刀，
蛮三刀天下第一刀，蛮三刀天下第一刀，蛮三刀天下第一刀，蛮三刀
天下第一刀，蛮三刀天下第一刀，蛮三刀天下第一刀，蛮三刀天下第
一刀，蛮三刀天下第一刀，蛮三刀天下第一刀，蛮三刀
</a>
</body>
</html>

rem布局

流式布局
响应式布局媒体查询
伸缩布局 flex
共同点：只能做宽度的适配（排除图片，因为图片有宽高自适应）都不能对height进行百分比布局（等比缩放），只能给固定高度
rem布局----通过控制html上的文字大小去控制页面上所有以rem为单位的基准值控制尺寸
吧页面上所有px单位换为rem单位
怎么换算？-------预设一个基准值方便计算 100px = 1rem
换算公式：当前的rem基准值= 预设基准值/设计稿的宽*当前屏幕的宽
怎么去改变js换算，媒体查询
设备 320px 414px 640px
当前设备对应的基准值=预设/预设对应的屏幕尺寸*当前屏幕尺寸

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            padding: 0;
            margin: 0;
        }
        @media(min-width: 320px) {
            html{
                font-size: 50px;
            }
        }
        @media(min-width: 414px) {
            html{
                font-size: 64px;
            }
        }
        @media(min-width: 640px) {
            html{
                font-size: 100px;
            }
        }
        .rem{
            width: 100%;
            background-color: #e20c3a;
            height: 1rem;
            line-height: 1rem;
            font-size: 0.32rem;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="rem">rem</div>
</body>
</html>

less在浏览器直接使用以及rem布局

less的语法

text.less代码引入到html中

rem布局

猜你喜欢