vs做网站加背景,wordpress 加密文章,济南外贸网站建设,网站开发私单哪里接less基础#xff1a;
CSS是一门非程序语言#xff0c;没有变量、函数、作用域等#xff0c;此时使用rem单位就会出现图片等大量计算尺寸的问题#xff0c;但是less可以轻松实现运算#xff0c;它是CSS预处理语言#xff0c;引入了变量、混入、函数等#xff0c;常见的C…less基础
CSS是一门非程序语言没有变量、函数、作用域等此时使用rem单位就会出现图片等大量计算尺寸的问题但是less可以轻松实现运算它是CSS预处理语言引入了变量、混入、函数等常见的CSS预处理语言还有Sass、Stylus等Less中文网址http://lesscss.cn
Less安装 ①安装nodejs进网址http://nodejs.cn/download选择对应自己电脑系统的node下载安装检查是否安装成功cmd控制台键入 node -v 若出现有node版本信息则安装成功。
②基于node下的npm安装cmd控制台键入 npm install -g less 检查是否安装成功cmd控制台键入lessc -v 若出现less版本信息则安装成功。
Less编译 less本质上是由一套自定义语法及一个解析器组成根据语法定义自己的less文件最终会编译成CSS文件供html使用。
Easy LESS插件把less文件编译成css的VScode插件在VScode安装此插件后保存less文件后会自动生成对应的css文件把此css文件引入html文件即可。
less.js插件less文件不能直接在浏览器被解析因此是不能直接将less文件通过link引入到html文件中的但是可以通过引入js插件less.js同时声明link标签中type属性的值为text/less就可以被转化为在浏览器可识别的cssless被获取是通过ajax请求的因此不能通过files的形式访问如
headlink relstylesheet typetext/less hreflib/less/less.lessscript srclib/less/less.js/script
/headless语法
less文件中可以直接 写css代码,开始less编码时建议声明字符编码辑。
less中的注释less中有两种注释语法如下 charset:UTF-8;/*注释内容,可以编译到css文件中*///注释内容不能编译到css文件中变量没有固定的值可以改变css中的颜色值和数值经常使用语法变量名:值 变量名规范必须以为前缀、不包含特殊字符、不以数字开头、字母区分大小写less中字符串拼接需要将变量名通过{}包裹如color:pink; 、number:10;、.{className}
嵌套在less中可以像html一样如果标签是父子级关系可以嵌套书写编写后会生成对应的父子级形式的选择器less语法中伪类伪元素前面要加 符号才表示当前元素的伪类否则表示此元素的子代伪元素如 bgcolor:rgb(199, 235, 250);font12:12px;className:box;div {background-color: bgcolor; a {font-size:font12;// less语法中伪类前面要加 符号才表示当前元素的伪类若不加则表示此元素的子代伪元素:hover {color:bisque;} }}.{className}{color:red;};//编译后的css代码//div {// background-color: #c7ebfa;//}//div a {// font-size: 12px;//}//div a:hover {//若less前面没有加 则解析成div a :hover// color: bisque;//}// .box {// color: red;// }混入混入分类混入和函数混入类混入是将若干个类在另一个{}中使用()调用使被调用的类的属性代码在新的类中生成如 .floatLeft{float:left;}.bgc{background-color:blue;}// 将上面两个类的属性及值混入到新的类中.box{.floatLeft();.bgc();}//生成的对应css代码.floatLeft {float: left;}.bgc {background-color: blue;}.box {float: left;background-color: blue;}函数混入由于类混入定义的类会编译到css代码造成代码冗余这样不太好可以使用函数混入解决这个代码冗余的情况函数语法.函数名(){};使用时是将类定义到函数中在另一个类中使用时直接调用函数即可但是不会在css代码中生成类函数里面可以传入参数但是定义了参数后就必须传入参数否则会报错但是可以传入默认参数就是在形参变量名后面加冒号冒号后面的值即为默认值如 fl:left;fr:right;.floatLeft(left:left){//定义了默认值为leftfloat: left;}.bgc(){background-color: blue;}.box {.floatLeft(fr);//当不传入参数时会使用默认值left.bgc();}// 生成的css代码.box {float: right;background-color: blue;}混入函数定义中{}里面可以继续定义类便于将代码重用和方便管理要想使用到函数里面具体的某个类时直接通过函数名加类名的方式就可以调用到如
.bgc(){.yello{color:yello;}.width{width:20px;}
}
.box {.bgc.width;
}
//使用.bgc函数中的.width编译后生成的css代码如下切记调用时函数名后面不能加()
.box {width: 20px;
}映射通过上面代码可以看出混入函数中可以定义类less3.5开始可以定义映射简单的说就是在函数中可以定义key和value键值对使用时可以通过[]加键拿到具体的value,如
.bgc(){divcolor:blue;key:value;
}
.box {color:.bgc[divcolor];font:.bgc[key];
}
//使用.bgc函数中定义的key和value编译后生成的css代码如下
.box {color: blue;font: value;
}作用域less 中的作用域和css中的作用域相似都是先从本作用域查找找不到继续往父级查找如
color: yellow;
div {font: 20px;p {color: color;font-size:font;}
}
//编译后的代码如下
div p {color: yellow;font-size: 20px;
}运算less语法提供了加()减(-)乘(*)除(/或外面加小括号)等运算任何的数字、颜色、变量都可以参与运算。运算符号左右两边必须要用空格隔开如果两个变量中只有一个变量有单位或两个变量的单位相同时则结果的单位就是其中的这个单位当两个变量都有单位时以前面变量的单位为结果的单位 fontsize:12px;width:200px;div {width: (24 / fontsize);height: width / 2rem;border: 12rem / fontsize solid (#333222 - #111222);}//对应的css代码//div {// width: 2px;// height: 100px;// border: 1rem solid #222000;//}calc() 使用calc()后将不再对数学表达式进行计算但是在嵌套函数中是会计算变量和数学公式的值如
add: 20px/2;
num:calc(20px/2);
div{width:calc(20% (add - 5px));height:num;
};//对应生成的css代码如下
div {width: calc(20% (10px - 5px));height: calc(20px/2);
}转义将所有字符串作为属性或变量值除interpolation外语法是~‘字符,串’如
maxw: ~(max-widht: 1200px);//less3.5后可以省略~及引号直接写成maxw:(max-widht: 1200px)
div {media maxw {width:1200px;}
}//上面代码是生成一个条件为max-widht: 1200px的媒体查询编译后的代码如下
media (max-widht: 1200px) {div {width: 1200px;}
}函数less和其他语言一样内置了很多好用的函数小编在这里不做过多的强调了如需了解更多可以阅读官方文档函数篇https://less.bootcss.com/functions/,这里介绍高频使用的函数 //1.length(array):获取array数组的长度less中也是可以定义像其他语言类似的数组其语法如arr:320px,540px,750px,920px,1200px;//less中定义数组不使用[]包裹。//获取arr数组的长度并赋值给变量arrLengtharrLength:length(arr);//2.extract(arr,index);获取数组arr中第index个元素如获取rr中的第二个元素并赋值给arrSecondarrSecond:extract(arr,2);//特别提醒元素是从1开始计算的。
less中函数实现遍历功能less语言中没有遍历若要实现遍历的方法可以通过函数自调用的方式来模拟遍历但是函数自调用可能会陷入死循环因此需要加入条件此方法常用于rem less 媒体查询 布局中因为rem less布局时需要适应多款设备此时就要定义多个html根font-size的值为了更好的维护采用函数模拟遍历的方式可自动生成多种font-size的值如下案例
//.functionName(参数) when (条件){code},less中函数可以使用when加条件当条件满足时会执行函数否则不再执行函数如
.setFontSize(index) when (index arrLength){media min-widht:extract(arr,index){html{font-size:baseSize / psdWidth * extract(arr,index);};};.setFontSize(index 1);//函数自己调用自己实现遍历效果每次调用时参数1来提满足判断条件
};//调用
.setFontSize(1);//调用时传入参数1从1开始遍历将一个less文件导入另一个less文件 import common.less提示本文图片等素材来源于网络若有侵权请发邮件至邮箱810665436qq.com联系笔者 删除。 笔者苦海
