less即学即用_学习笔记

首页免费课 less即学即用笔记

less即学即用

最热最新

慕九州3774293
1. 避免编译, 使用 ~'值' 或 ~"值"：
```
.test1 {
    width: ~'calc(300px -30px)';  
}
```
编译后css：
```
.test1 { width: cacl(300px - 30px); }
```
2. !important 使用后 main()内所有样式都会加上 !important
```
.test2 { . main() !important; }
```
查看全部

0 采集收起来源：避免编译、!important以及总结
2019-04-20

慕九州3774293

@arguments 代表所有传递进来的参数

.border (@w:1px, @s: solid, @c: red) {
    border: @arguments;
}

引用：

.test_border {
    .border(20px);
}

编译后css：

.test_border {
    border: 20px solid red;
}

查看全部

0 采集收起来源：@arguments变量

2019-04-20

慕九州3774293

嵌套越多，匹配次数越多，影响加载

& 代表上一层选择器

.list {
    li { ... }
    a {
        color: blue;
        &:hover { color: red; }
    }
    span { ... }
}

查看全部

0 采集收起来源：嵌套规则

2019-04-20

慕九州3774293 01:16
任何数字，颜色或变量都可以参加运算，只要有一个带单位即可
```
@w: 300px;
.box {
    width: @w - 10;
    height: (@w - 200) * 2;
    color: #ccc + 10;
}
```
查看全部

0 采集收起来源：运算
2019-04-20

慕九州3774293

兼容ie低版本（border-style: dashed）css三角

.triangle(top, @w:5px, @c:#ccc){...}
.triangle(bottom, @w:5px, @c:#ccc){...}
.triangle(left, @w:5px, @c:#ccc){...}
.triangle(right, @w:5px, @c:#ccc) {
    border-width: @w;
    border-color: transparent transparent transparent @c;
    border-style: dashed dashed dashed solid;
}

//@_ 变量，无论第一个传的参数是什么，都会匹配这个方法

.triangle(@_, @w:5px, @c:#ccc) {
    width: 0,
    height: 0,
    overflow: hidden;
}

引用：

.sanjiao { .triangle(right, 100px); }

编译后css：

.sanjiao {
   width: 0,
    height: 0,
    overflow: hidden;
    border-width: 100px;
    border-color: transparent transparent transparent #ccc;
    border-style: dashed dashed dashed solid;
}

查看全部

0 采集收起来源：匹配模式

2019-04-20

慕九州3774293
混合：
1. 不带参数(引用时可不带()括号)：
  声明， .bd_radius{}；引用，.box{ .bd_radius }
2. 带参数(引用时必须带()括号)：
  ① 声明，.bd_radius(@radius){ border-radius: @radius; }
  引用，.box{ .bd_radius(5px); }——必须带参数
  ② 声明，.bd_radius(@radius: 5px){ border-radius: @radius;}
  引用，.box{.bd_radius();} ——可不传参数，默认5px
查看全部

0 采集收起来源：混合
2019-04-20

慕九州3774293 02:54

//声明变量，以@开头，如：@变量名：值;
@w: 500px; 
@h: 300px;
.box {
    width: @w;
    height: @h;
}

查看全部

0 采集收起来源：变量

2019-04-20

慕九州3774293
LESS的注释：
1. /* 内容是被编译的，保留进.CSS文件中 */
2. // 内容不被编译，不出现在.CSS文件中
查看全部

0 采集收起来源：Less中的注释
2019-04-20
Hello_my_new_world 02:00

calc（）是在浏览器计算，不是在编译时计算，所以要避免编译 ~' '

查看全部

0 采集收起来源：避免编译、!important以及总结
2019-03-21
Hello_my_new_world 06:07

嵌套：
&代表上一层选择器

查看全部

0 采集收起来源：嵌套规则
2019-03-21
斜杠男人 12:00

less文件中导入css文件和less文件

查看全部

0 采集收起来源：less综合案例-细节
2019-02-27
iFlowers 02:38

what`s the less

查看全部

0 采集收起来源：less介绍-say hello
2019-02-02
qq_慕圣7517006

less:导入

查看全部

1 采集收起来源：less综合案例-细节
2019-01-27
qq_慕圣7517006

less:!important and 总结

查看全部

0 采集收起来源：避免编译、!important以及总结
2019-01-27
qq_慕圣7517006

less:@aruments

查看全部

0 采集收起来源：@arguments变量
2019-01-27

首页上一页 1 2 3 4 5 6 7 下一页尾页

0/150

提交

取消

该课程已下架

课程须知: 基础的HTML、CSS知识，最好能有一些基础的前端开发经验。

老师告诉你能学到什么？: 教程中介绍less作为css预处理语言的功能和特性，以及less的编译工具、变量的概念以及用法、如何使用嵌套写法来编写层叠样式、自带的函数以及用法，比如color函数、Math函数、讲解less如何编写不被编译的内容，以及在less中如何使用JavaScript表达式等等。

微信扫码，参与3人拼团

热搜

最近搜索清空

less即学即用