less的语法
1.注释语法
1.1 /**/ (多行注释)
这种注释是css的注释,编译以后,会保留显示在css文件中.
1.2 // (单行注释)
// 这种代码注释css并不识别,编译后会隐藏,不会显示在css文件中.
2.变量
在less中,可以使用变量,来统一设置一类可以重复使用的值,方便后期CSS代码维护.
2.1普通变量的使用
使用@符号定义变量,
语法:
@变量名:变量值;
注意:变量值一定要符合CSS属性值的规范.
在CSS选择器中后面是用变量;如:属性的名称:@变量
// 定义变量
@bgcolor: #58a;
// 使用变量
.box{
color: @bgcolor;
border: 1px solid @bgcolor;
}
2.2在字符串中使用变量
如果需要变量名和其他字符串拼接,使用一下语法
“@{变量名}字符串”
@images: "../img";
body{
background: url("@{images}/1.png");
}
2.3 选择器使用变量
语法
@{变量名}{
}
@dashan: #wrap;
@{dashan}{
color:red;
}
2.4属性变量
语法
选择器{
@{变量名}:值;
}
@ccc: color;
.wrap{
@{ccc}: red;
}
2.5导入其他的less
语法
@变量名: 地址;
@import" @{变量名}";
@src: "./header.less";
@inport "@{src}";
注意,就是将其他的less 引入到自己的less中,最后统一编译成一个css文件.
2.6变量作用域
每个元素的css样式的{}都是一个独立的作用域,按照js函数作用域来理解.
语法
@color: red;
.wrap{
color: @color; //.wrap自己作用域内没有color变量,所以用上一次作用域中的变量.
}
.box{
@color: @58a;
color: @color; //因为.box自己作用域中有同名变量,就会先用自己作用域内变量的值.
}
注意变量会被预解析
就是使用后定义也没关系
// 先使用变量
.wrap{
color: @color;
}
// 后定义变量
@color: red;
2.7变量的计算
变量的值可以参与运算
@width: 300px;
.box{
width: @width - 100;//px可写可不写
height: @width;
background-color: red;
}
3.混合
Mixins 类似函数,在定义后,可以通过名称调用.(支持动态传参).
混合可以将一个定义好的class A 轻松 的引入到另一个class B 中,从而简单实现class B继承class A 中的所有属性,我们还可以带参数地调用,就像使用函数一样.
3.1 什么是Mixins混合
简单理解就是函数,可以封装CSS代码,在别的选择器中调用,提高代码的重用性和可维护性.
3.2定义混入
语法:
- 无参数混入定义
.混入名(){
封装的css代码
}- 有参数混入
.混入名(@参数:默认值){
封装的css代码
}
// 混入定义
.style(@color: #58a, @size: 16px){
background-color: @color;
font-size: @size;
}
3.3调用混入
语法:
选择器{
混入名(@参数)
}
// 使用混入
.style(@color: #58a, @size: 16px){
background-color: @color;
font-size: @size;
}
.box p{
.style(blue, 50px);
}
3.4 如果混入没有参数可以不用加括号
.wrapProp(){
width:200px;
height:200px;
border:1px solid red;
}
.wrap{
.wrapProp() // 加括号 可以执行mixin
}
.box{
background: skyblue;
.wrapProp; // 没有参数不加括号也可以执行mixin
width:100px;
}
如果mixin需要动态传参数, 则必须加括号传参(建议不管穿不传参都加上括号).
.wrapProp(@wi,@height,@color){
width:@wi;
height:@height;
border:1px solid @color;
}
@width:200px;
@height:200px;
@color:red;
.wrap{
.wrapProp(@width,@height,@color);
}
.box{
background: skyblue;
.wrapProp(300px,100px,blue);
// width:100px;
}
3.5 less可以直接继承其他选择器中的样式
.wrap{
width:200px;
height:200px;
}
.box{
.wrap; // 这里将会继承.wrap的样式
color:red;
}
// Mixin里除了可以写样式,选择器, 还可以写变量
.mixin() {
@width: 100%;
@height: 200px;
}
.caller {
.mixin();
width: @width;
height: @height;
}
// Mixins 里除了返回变量,还可以返回Mixins
#box(@color){
.wrap(){
width:500px;
height:100px;
background:@color;
}
}
.box{
#box(red); // 执行第一个Mixin是为了能够使用里面的Mixin
.wrap(); // 第二个执行Mixin里面的Mixin
}
3.6可以在Mixin中使用选择器
.hover(@color){
&:hover{
background:@color;
}
}
.wrap{
width: 100px;
height: 100px;
background: red;
// &:hover{
// background:skyblue;
// }
.hover(skyblue)
}
.box{
width: 200px;
height: 200px;
margin-top:20px;
background: skyblue;
// &:hover{
// background:red;
// }
.hover(red)
}
3.7Mixins的命名空间
有点类似于js中的作用域.
.wrap{
width:300px;
.inner{
font-size:30px;
color:pink;
}
#box(){
width:200px;
height:200px;
}
}
.box{
.wrap .inner;
.wrap #box();
// .inner
// #box() // 这两种写法是错误的
}
/*
如果.box要继承 .wrap里面 .inner 或者#boxMixin函数的样式, 直接是找不的, 必须通过先找到.wrap
然后在通过.wrap 去找Mixin 或inner样式
*/
3.8Mixin的默认值与不定参
1.默认值
Less 可以使用默认参数,如果没有传参数,那么将使用默认参数。
如果不是默认值, 在没有传参的情况下, Mixin参数没有值就会出错,所以实参和形成的个数必须保持一致
如果希望Mixin可以在更多场合复用, 可以使用默认值,如果没有传参,则使用默认值
#box(@width : 100px, @height : 100px, @color:red) {
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(50px,50px,pink) ; // 这里使用自己传递的参数
width:200px;
}
.wrap{
#box; // 这里使用默认值
}
2. 不定参
不确定参数的个数
// ... 就是@reset 剩余参数, 会将剩余的所有参数都加到@arguments里
.boxShadow(...){
box-shadow: @arguments;
}
.box{
.boxShadow(1px,4px,30px,red);
}
// @arguments是处理第一个实参外的所有实参的集合
.boxShadow(@width,...){
box-shadow: @arguments;
}
.box{
.boxShadow( 50px,1px,4px,30px,red);
}
3.9 Mixins的判断条件
Less没有if / else 但是less具有一个when,and,not与“,”语法。
1. when 表示 在使用Mixin的时候必须满足 when后面的条件
#box(@width, @height, @color) when (@width > 100px){
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(101px,50px,pink)
}
2.如果有两个必须同时满足的条件,使用 and
// 这里必须满足传递的宽度和颜色必须同时同满足条件才能执行Mixin
#box(@width, @height, @color) when (@width > 100px) and (@color = pink){
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(101px,50px,skyblue)
}
3. 如果需要排除某个条件才能使用Mixin,使用not
// 这里排除颜色为pink ,除了pink颜色值都可以运行Mixin
#box(@width, @height, @color) when not (@color = pink){
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(101px,50px,skyblue)
}
4. 如果需要多个条件只要满足一个就执行Mixin,使用 逗号,
// 虽然不满足宽度大于等于100px,但是满足为了颜色是skyblue 所以Mixin会执行
#box(@width, @height, @color) when (@width >= 100px),(@color = skyblue){
width: @width;
height: @height;
background-color: @color;
}
.box{
#box(50px,50px,skyblue)
}
3.10Less循环
Less循环采用的类似于js的递归调用
.dashan(@length,@i:1) when (@i <= @length){
.item-@{i}{
width: @i * 50px;
height:50px;
border:1px solid red;
}
// 递归调用的同时,改变循环变量@i
.dashan(@length, (@i+1));
};
.dashan(6);
3.11模式匹配
根据条件进行样式显示,类似JS中的switch
有些情况下,我们想根据传入的参数来改变混合的默认呈现,
比如
相当于定义一个相同的混合名称,根据传入其他混合名称的不同,执行不同混合分支
但是有一个公共的分支,任何一个分支都会调用
@_ 表示匹配所有,通常用于定义公共部分
语法:
公共部分
.fun (@_, @color){
// 任何分支都会执行的公共部分
}
.fun( s1,@color){
// s1 分支独有代码
}
模式匹配的使用
h1{
.fun(s2, @color)
}
// 三角形公用代码
.sjx(@_, @color, @size) {
width: 0;
left: 0;
display: block;
border: @size solid transparent;
}
// 左三角形
.sjx(l, @color, @size) {
border-left-color: @color;
}
// 右三角形
.sjx(r, @color, @size) {
border-right-color: @color;
}
// 上三角形
.sjx(t, @color, @size) {
border-top-color: @color;
}
// 下三角形
.sjx(b, @color, @size) {
border-bottom-color: @color;
}
.trangle {
.sjx(b, red, 20px)
}
4.嵌套
4.1什么是嵌套
具有层级关系的CSS样式,CSS的层级是有HTML的结构决定的.
4.2嵌套的好处:
- 用在具有后代关系和父子 关系的选择器中
- 减少代码量,
- 代码结构更加清晰
4.3 使用
语法
父选择器{
父属性样式
子选择器A{
子选择器A的样式
}
子选择器B{
子选择器B的样式
}
}
4.4 &符号的使用
使用场景: 父子,兄弟,紧邻,伪类 选择器使用时
&符号表示父元素
.box{
width: 100px;
height: 100px;
.wrap{
font-size: 16px;
&:hover{
color: red;
}
}
}
5 运算符
运算符的作用: 可以对角度,颜色,高度等进行运算
运算符的分类: 加 +, 减 - , 乘 *, 除 /
@w1:200px;
@w2:300px;
@c1: #333;
@c2: #666;
li {
width: @w1 + @w2;
}
// 16进制的颜色值,只能在#000000 ~ #ffffff之间,如果超出了,就会自动使用最大值
li {
background: @c1 + @c2;
}
列子:
.button(@size){
width: 100px * @size;
height: 40px * @size;
font-size: 14px * @size;
}
// 使用
.button {
.button(3)
}
你所做的事情,也许暂时看不到成果,但不要灰心或焦虑,你不是没有成长,而是在扎根。