慕课笔记--[课程]Less即学即问
来源:互联网 发布:北京用友软件代理商 编辑:程序博客网 时间:2024/05/22 08:18
一、less简介
Less类似于Jquery,是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。
二、koala 安装及使用
参见:http://blog.csdn.net/aaa333qwe/article/details/77427142
编译工具:Koala
也可以使用Node.js或者浏览器端进行编译
声明文档头:@charset "utf-8"
将编写好的less文件拖到Koala中,进行编译,编译后生成css文件,然后将css文件再引入的HTML页面当中
编写还是在less文件中编写
三、less中的注释
less文件里面的注释有两种。
/**/会被编译到css文件里边
//不会被编译到css文件里边
四、变量
在LESS中使用
@width:100px;
的形式定义变量,
而在SASS中使用的是
$with:100px;
五、less混合
1、带参数的混合
.box{
background-color:#fff;
.border; //引用border样式
}
.border{
border:1px solid red;
}
2、带参数的混合
.box{
background-color:#fff;
.border_02(5px);
}
.border_02(@border_width){
border:@border_width solid yellow;
}
3、默认混合(不传入参数则走默认值,传入参数则走传进来的这个值)
.border_03(@border_width:10px){
border:@border_width solid green;
}
.div1{
.border_03();//走的是默认值,即10px的边框
}
.div2{
.border_03(15px);//走的是传递进来的参数,即15px的边框
}
六、匹配模式
匹配模式就是先把各种情况写好,在类名后面传入参数,需要时直接调用,传入@_代表不管哪种情况都要带上这段代码。
1、demo1
匹配模式(类似if)
.triangle(top,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent transparent @c transparent;
border-style: dashed dashed solid dashed;
}
.triangle(bottom,@w:5px,@c:#ccc){
border-width:@w;
border-color:@c transparent transparent transparent;
border-style: solid dashed dashed dashed;
}
.triangle(left,@w:5px,@c:#ccc){
border-width:@w;
border-color:transparent @c transparent transparent;
border-style: dashed solid dashed dashed;
}
.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;
}
.sanjiao1{
.triangle(right,10px);
}
2、demo2
.pos(a){
position:absolute
}
.pos(f){
position:fixed;
}
.box{
.pos(f);
}
七、运算
1、可以进行加减乘除运算,只要有一个带像素的即可, 符号两边需要空格
2、运算示例:
@test_01:300px;
.box_02{width:@test_01 + 20;//如果变量或其它是带单位的,后面相加的数字可以不用加单位}
.box_02(width:(@test_01 - 20)* 5;//如果要先减在乘,就用个括号包起来)
.box_02(color: #ccc - 10) ;/*less会把颜色转成 255 的数值,然后进行计算,输出颜色值对应的颜色,工作中很少用到*/
八、嵌套规则
less嵌套
li{
a{
&:hover{// &代表上一层选择器}
}
}
九、@arguments
@arguments包含了所有传递进来的参数。
如果你不想单独处理每一个参数的话就可以像这样写:
@border(@w:30px,@c:red,@s:solid){
border:@w @c @s
}
.border_arg(@w:30px,@c:red,@ww:solid){
border:@arguments;//包含所有参数
}
.test_arguments{
.border_arg(40px);
}
十、Less-避免编译与!important关键字
1、Less-避免编译
-有时候我们需要输出一些不正确的CSS语法或者使用一些less不认识的专有语法
-要输出这样的值我们可以在字符串前加上~
例如:.test_03{
width:~'calc(300px-30px)'; //(原封不动的输出,避免编译)
//对于滤镜等less不认识的语法,避免报错。
} //用双引号也可
2、!important关键字
-会为所有混合所带来的样式,添加上!important
!important拥有样式的最高优先级一般调试的时候才会用
十一、
- 慕课笔记--[课程]Less即学即问
- less笔记-less概要
- less笔记
- less笔记
- python 慕课课程笔记(一)
- 慕课笔记--[课程]Sass入门篇
- 慕课笔记--[课程]Sass进阶篇
- 慕课笔记--[课程]React入门
- Less学习笔记
- less学习笔记
- less学习笔记
- Less学习笔记
- LESS学习笔记(下)
- LESS框架笔记
- Less自学笔记
- less笔记-变量
- less 学习笔记入门
- less学习笔记
- 79. Word Search
- 静态链接库和动态链接库的区别及优缺点
- Arduino智能小车——拼装篇
- Servlet之forward、sendRedirect、 include区别与使用
- Struts中继承接口SessionAware来实现session中的map集合
- 慕课笔记--[课程]Less即学即问
- python基础语法
- Eclipse超级完美汉化教程
- 桥接模式
- C语言结构体内存对齐的问题
- STM32用IAR调试出现Error[Pe020]: identifier "FILE" is undefined 解决方法
- urllib
- Mysql JDBC 的简单操作
- Vue-Webpack简单脚手架搭建