less简介
什么是less
less其实是一种编程语言，通过less编写类似于css的代码，最后编译成正常的css文件，给项目使用。
虽然说类似，但是功能上比css更强大，在css的基础上扩展了变量、函数、循环、继承等功能。
像这一类的语言，我们称为CSS预处理器。
注：不能直接在浏览器引入使用，需要编译成css
带来的好处：代码更简洁，不需要考虑前缀，结构更清晰，更容易修改
还有什么常用的 CSS 预处理器：less，sass【录播】，stylus【非课程内容】
less的安装使用
-
vscode ：安装easyless插件
-
webstorm ：npm install less -g
-
使用编译软件：Koala
less实战
-
嵌套
.box{
.nav{
border: 1px solid #000;
}
}
--------------------------------------
.box .nav {
border: 1px solid #000;
}
-
& 父选择器
.clearfix{
&:after{
content: '';
display: block;
clear: both;
}
&_item{
height:200px;
}
}
----------------------------------
.clearfix:after {
content: '';
display: block;
clear: both;
}
.clearfix_item{
height:200px;
}
.box{
.warp &{
width: 200px;
}
}
----------------------------------
.warp .box {
width: 200px;
}
-
变量
语法 [ @变量名：变量值; ]
@w:100px;
.box{
width:@w;
}
------------------------
.box {
width: 100px;
}
在引号中引用需要加{}
@imgurl:"../images";
.box1{
background: url('@{imgurl}/1.jpg');
}
.box2{
background: url('@{imgurl}/2.jpg');
}
.box3{
background: url('@{imgurl}/3.jpg');
}
--------------------------------------------
.box1 {
background: url('../images/1.jpg');
}
.box2 {
background: url('../images/2.jpg');
}
.box3 {
background: url('../images/3.jpg');
}
变量的声明不是必须在使用前
div{
width: @w;
}
@w:200px;
----------------------
div {
width: 200px;
}
变量名同作用域下不能重复，否则会被更改掉
@w:200px;
@w:300px;
div{
width: @w;
}
-----------------------
div {
width: 300px;
}
作用域，less中，是有作用域的，作用域会影响当前的变量，在什么范围内是有效的，是否会替换
@w:300px;
.box1{
@w:200px;
width:@w;
}
.box2{
width:@w;
}
---------------------------
.box1 {
width: 200px;
}
.box2 {
width: 300px;
}
-
混合
将一个定义好的class A引入到另一个class B中，从而简单实现class B继承class A中的所有属性。
.box{
height: 200px;
background: red;
}
.content{
.box;//也可以是 .box()
}
----------------------------------------
.box {
height: 200px;
background: red;
}
.content {
height: 200px;
background: red;
}
-
传参混合
.box(@a,@b){
height: @a;
background: @b;
}
.content{
.box(200px,red);
}
-------------------------
.content {
height: 200px;
background: #ff0000;
}
如果使用的时候，不传入参数，会编译失败，这时候我们可以设置默认值
.box(@a:200px,@b:red){
height: @a;
background: @b;
}
.content{
.box;
}
-------------------------------
.content {
height: 200px;
background: #ff0000;
}
arguments 按照传参顺序进行
.border(@w:2px,@s:solid,@c:red){
border: @arguments;
}
.box{
.border;
}
----------------------------------
.box {
border: 2px solid #ff0000;
}
-
运算
.box{
width:800px - 50 * 2;
height:800px - 50 * 2;
padding:50px;
}
---------------------------
.box {
width: 700px;
height: 700px;
padding: 50px;
}
运算符使用注意事项(加减乘除)
运算符的左右，都保留空格
运算的时候，最好包裹在()内
font 复合样式容易有问题哦 font：20px/30px '微软雅黑';
当运算数值具有单位时，需要注意：
一个单位：最终结果根据唯一的这个单位
两个单位：为第一个单位
-
Math 函数
ceil() 向上取整
floor() 向下取整
percentage() 百分比化
round() 四舍五入
sqrt() 开放
abs() 绝对值
round(1.67); // returns `2`; ceil(2.4); // returns `3`;floor(2.6); // returns `2`
-
继承
继承是less中的一个伪类，它可以匹配当前继承中的所有样式，如果用混合
.box{
width: 200px;
height: 200px;
.a{
color: red;
}
}
.box1{
.box;
}
---------------------------------
.box {
width: 200px;
height: 200px;
}
.box .a {
color: red;
}
.box1 {
width: 200px;
height: 200px;
}
.box1 .a {
color: red;
}
混合中，也同样给.box1 下面的 .a添加了样式，但其实我想要的只是.box1
继承不能使用参数，混合和继承的展现形式不同
.box{
width: 200px;
height: 200px;
.a{
color: red;
}
}
.box1:extend(.box){
}
--------------------------------------------
.box,
.box1 {
width: 200px;
height: 200px;
}
.box .a {
color: red;
}
-
判断
.box(@w) when(@w>0){
width:@w;
}
.box1{
.box(40px);
}
-------------------------------------
.box1 {
width: 40px;
}
与 and可以连接两个条件，并且两个条件都需要满足，才可以添加后续样式
.box(@w,@h) when (@w>0) and (@h>0){
width: @w;
height: @h;
}
.box1{
.box(100px,0px);
}
或 ,任何一个结果符合条件，就执行后面的代码（或）
.box(@w,@h) when (@w>0),(@h>0){
width: @w;
height: @h;
}
.box1{
.box(100px,0px);
}
---------------------------------------
.box1 {
width: 100px;
height: 0px;
}
非 not只要不是这个判断条件成立，就可以
.box(@w,@h) when not (@w=100){
width: @w;
height: @h;
}
.box1{
.box(100px,120px);
}
-
函数
@function add($a,$b){
@return $a+$b
}
.box{
width:add(5,6)*2px;
}
深入嵌套-命名空间
#box1(){
background: red;
.fonts(@size:12px){
font-size: @size;
}
}
.box2{
#box1.fonts(20px);
}
--------------------------------------
.box2 {
font-size: 20px;
}
带括号的位置不进行渲染，可以带参数以@的形式
这一定要指明 xx 下面的.fonts ,因为作用域不一样，不可以直接 .fonts
-
合并
允许对可以接受多个属性的，例如：背景、阴影进行拼接合并
+会用逗号隔开
.box(){
width: 200px;
height: 200px;
box-shadow+: 10px 10px 5px #000;
}
.box2{
.box();
box-shadow+: inset 5px 5px 5px red;
}
--------------------------------------------
.box2 {
width: 200px;
height: 200px;
box-shadow: 10px 10px 5px #000,
inset 5px 5px 5px red;
}
+_会用空格隔开
.box(){
width: 200px;
height: 200px;
transform+_: translate(100px);
}
.box2{
.box();
transform+_: rotate(3600deg);
}
---------------------------------------------------
.box2 {
width: 200px;
height: 200px;
transform: translate(100px) rotate(3600deg);
}
-
映射
从 Less 3.5 版本开始，你还可以将混合（mixins）和规则集（rulesets）作为一组值的映射（map）使用。
#colors() {
primary: blue;
secondary: green;
}
.button {
color: #colors[primary];
border: 1px solid #colors[secondary];
}
---------------------------------------------------
.button {
color: blue;
border: 1px solid green;
}
@size:{
max:1200px;
mid:800px;
min:500px;
}
.box{
width: @size[max];
}
---------------------------------------------------
- 注释 /* 一个块注释 * style comment! */
@var: red;
// 这一行被注释掉了！ 该注释不会被渲染
@var: white;
假设100k文件 日访问量1亿 流量为1万G每天 一天消耗1万，一年是360万，所以压缩文件大小很重要
-
导入
“导入”的工作方式和你预期的一样。你可以导入一个 .less 文件，此文件中的所有变量就可以全部使用了。如果导入的文件是 .less 扩展名，则可以将扩展名省略掉： 在less中@important "style" 不会增加http请求
@import "library"; // library.less
@import "typo.css";
-
避免编译
转义（Escaping）允许你使用任意字符串作为属性或变量值。任何 ~"anything" 或 ~'anything' 形式的内容都将按原样输出，除非 interpolation
@min768: ~"(min-width: 768px)";
.element {
@media @min768 {
font-size: 1.2rem;
}
}
编译为：
@media (min-width: 768px) {
.element {
font-size: 1.2rem;
}
}
注意，从 Less 3.5 开始，可以简写为：
@min768: (min-width: 768px);
.element {
@media @min768 {
font-size: 1.2rem;
}
}
在 Less 3.5+ 版本中，许多以前需要“引号转义”的情况就不再需要了。
