less学习

最新推荐文章于 2024-05-31 09:42:54 发布

Crystal莘

最新推荐文章于 2024-05-31 09:42:54 发布

阅读量171

点赞数

分类专栏： less学习文章标签：学习前端 less

本文链接：https://blog.csdn.net/qq_57047040/article/details/123899084

版权

less学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1、使用less

1.1 普通使用less

// 全局安装less  -g 参数表示将 lessc 命令安装到全局环境。
npm install less -g  
// 针对 Node Development 配置段安装 Less  
// 这将在项目文件夹中安装 lessc 的最新正式版本，
// 并将其添加到 package.json 文件中的 devDependencies 配置段中。
npm i less --save-dev 


// 把less语言编译成css语言，浏览器只识别css语言，需要使用node来编译成css语言
lessc 文件名.less > 文件名.css

1.2 在vue中使用less

在vue-cli 框架中选中使用less，这样在就可以在.vue文件中的style中通过lang="less"属性指定使用less语言。

2、less中的注释

// 这种注释不会被编译到css中

/* 这种注释会被编译到css中 */

3、变量

在less中定义变量是使用：@变量名: 值 的方式创建变量。

// 定义变量
@color: orange;
@btnColor: rgb(163, 234, 56);
@bgColor: skyblue;

#app {
  background-color: @bgColor;
}
.btn1 {
  color: @color;
  background-color: @btnColor;
}

其中变量的值可以为一个对象，这个就可以提取出一些元素的公共样式，后面只需要 @变量名() 来进行使用就可以应用公共的样式。

// 其中变量的值可以为一个对象,这样就可以使多个元素使用相同的一些样式
@btn: {
  width: 100px;
  height: 50px;
  color: #fff;
  text-align: center;
  line-height: 50px;
  border: 0;
  outline: 0;
}
.btn2 {
  // 使用公共样式变量
  @btn();
  // 定义单独的样式
  background-color: green;
}

可以使用变量来处理一些需要重复书写的文字，使用变量的格式为： @{变量名}

// 还可以使用变量来处理一些要重复书写的字符串
@img: './assets/images/';
.image {
  width: 150px;
  height: 150px;
  background-image: url("@{img}cutcamera.png");
}

可以使用变量来进行 加、减、乘、除 的运算，其中单位是看左边

// less 可以进行加、减、乘、除 的运算。
.div1 {
  // 注：运算的单位以左边的单位
  width: 150px + 10; // 160px
  height: 15px * 10; // 150px
  background: yellow;
}

4、嵌套

在less中可以嵌套书写元素，这个样可以避免书写重复的元素名。

注：

1. 在less中的元素内定义的变量为私有变量，只能在当前元素内有效。

2. 在less中如果要访问父元素可以使用 & 符号。

// 定义一个变量,使用这个变量的格式为：@变量名()
@btnStyle: {
  width: 250px;
  height: 50px;
  text-align: center;
  line-height: 50px;
  border: 0px;
  outline: 0px;
  color: #fff;
  border-radius: 10px;
  background-color: skyblue;
}
// less 中的嵌套
a {
  // 定义在这个元素中的私有变量
  @hoverColor: orange;
  // 转换为行内块元素
  display: inline-block;
  // 设置相对定位
  position: relative;
  // 使用变量
  @btnStyle();
  // 嵌套元素
  h1 {
    margin: 0;
  }
  // 使用 & 符号表示父级元素，即当前的 a 元素
  &:hover {
    background-color: @hoverColor;
  }
  // 使用伪元素 创建一个三角形
  &::after {
    content: "";
    position: absolute;
    top: 15px;
    right: -20px;
    display:inline-block;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent skyblue;
  }
  // 当放在a标签上时，这个三角颜色也变
  &:hover::after {
    border-left-color: @hoverColor;
  }
}

在嵌套中使用媒体查询，不同于原css.

/* 原css的媒体查询 */
@media (min-width: 1000px) {
   /* 当宽度大于1000时 */
   a {
        color: #000;
    }
}
@media (min-width: 700px) and (max-width: 1000px) {
    /* 当宽度大于700小于1000时 */
     a {
        color: #999;
    }
}

// less 中的嵌套
a {
  // 定义在这个元素中的私有变量
  @hoverColor: orange;
  // 转换为行内块元素
  display: inline-block;
  // 设置相对定位
  position: relative;
  // 使用变量
  @btnStyle();
  // 嵌套元素
  h1 {
    margin: 0;
  }
  // 使用 & 符号表示父级元素，即当前的 a 元素
  &:hover {
    background-color: @hoverColor;
  }
  // 使用伪元素 创建一个三角形
  &::after {
    content: "";
    position: absolute;
    top: 15px;
    right: -20px;
    display:inline-block;
    width: 0;
    height: 0;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent transparent skyblue;
  }
  // 当放在a标签上时，这个三角颜色也变
  &:hover::after {
    border-left-color: @hoverColor;
  }
  // 在元素内使用媒体查询
  @media (min-width: 1000px) {
    // 当宽度大于1000时
    color: #000;
  }
  @media (min-width: 700px) and (max-width: 1000px) {
    // 当宽度大于700并且宽度小于1000时
    color: #999;
  }
}

5、函数

可以直接调用写好的选择器中的样式，相当于复制。

.card {
 width: 100px;
 height: 100px;
 border-radius: 10px;
 background-color: yellow;
}
.myCard {
 .card; // 可以直接调用，相当于复制
}  

// 或者写法可以为
.card {
 width: 100px;
 height: 100px;
 border-radius: 10px;
 background-color: yellow;
}
.myCard {
 .card(); // 可以直接调用，相当于复制
}

定义无参的函数

// 定义函数
.card() {
 width: 100px;
 height: 100px;
 border-radius: 10px;
 background-color: yellow;
}
.myCard {
 .card; // 调用函数
}  

// 或者写法可以为
// 定义函数
.card() {
 width: 100px;
 height: 100px;
 border-radius: 10px;
 background-color: yellow;
}
.myCard {
 .card(); // 调用函数
}

定义有参的函数，并且含有默认值

// 定义函数,并且设置参数，参数也可以设置默认值
.card(@color: yellow) {
 width: 100px;
 height: 100px;
 border-radius: 10px;
 background-color: @color;
}
.myCard {
 .card(); // 调用函数,不传入参数
}  

// 传入参数
// 定义函数,并且设置参数，参数也可以设置默认值
.card(@color: yellow) {
 width: 100px;
 height: 100px;
 border-radius: 10px;
 background-color: @color;
}
.myCard {
 .card(red); // 调用函数,传入参数
}

定义选择器函数，实现根据需求实现不同方向的三角形。

// 选择函数  使用选择函数来创建不同方向的三角形
.triangle(top, @width: 20px, @color: yellow) {
 border-color: transparent transparent @color transparent;
}
.triangle(right, @width: 20px, @color: yellow) {
 border-color: transparent transparent transparent @color;
}
.triangle(bottom, @width: 20px, @color: yellow) {
 border-color: @color transparent transparent transparent;
}
.triangle(left, @width: 20px, @color: yellow) {
 border-color: transparent @color transparent transparent;
}
.triangle(@_, @width: 20px, @color: yellow) {
 display: inline-block;
 width: 0px;
 height: 0px;
 border-style: solid;
 border-width: @width;
}
.left-triangle {
 .triangle(left, 40px);
}

6、命名空间

函数的嵌套和使用。使用嵌套函数需要写出父级函数中间用 > 分隔。

注意：如果嵌套的父级元素有参数但没默认值，会报错。并且调用的函数自会执行当前函数内的内容，不会执行父函数或子函数的内容。

// 函数的嵌套
.box() { // 定义了一个 .box() 函数
 color: orange;
 // 嵌套一个函数
 #w() {
   width: 100px;
   // 嵌套函数 
   .h(@height: 20px) {
     height: @height;
   }
 }
}
// 使用嵌套中的函数
.box-height {
 .box > #w > .h(80px);
}

命名空间就类似于函数的嵌套。

// 命名空间
#div() {
  .bg(@color) {
    background-color: @color;
  }
}
.div-bg {
  width: 50px;
  height: 50px;
  // 调用命名空间中的函数
  #div > .bg(yellow);
}

7、逻辑处理 and not ,

and 与逻辑

// less 中的逻辑处理
#div() {
 .lessAnd(@width, @height) when (@width > 50px) and (@height > 50px) {
   width: @width;
   height: @height;
   background-color: skyblue;
 }
}
// and 实现与逻辑
.less-and {
 // 调用命名空间中的与逻辑函数
 #div > .lessAnd(80px, 80px);
}

not 非逻辑

// less 中的逻辑处理
#div() {
 .lessNot(@font) when not (@font >= 24px) {
   font-size: @font;
 }
}
// not 实现非逻辑
.less-not {
 #div > .lessNot(28px);
}

, 或运算

// less 中的逻辑处理
#div() {
.lessOr(@width, @height) when (@width < 10px) , (@height > 50px) {
   width: @width;
   height: @height;
   background-color: yellow;
 }
} 
// , 实现或逻辑
.less-or {
 #div > .lessOr(40px, 40px);
}

8、循环

// less 中的循环
#cycle-cols(4); // 定义一个函数，传入参数为4，表示要循环4次
// 循环函数
#cycle-cols(@n, @i: 1) when (@i <= @n) {
  .cycle-col-item-@{i} { // 循环创建类
    width: (@i * 100% / @n); // 动态处理
    height: 20px;
    background-color: skyblue;
  }
  // 改变函数的参数
  #cycle-cols(@n, @i + 1);
}

9、拼接

// less 拼接  使用 + 字符
.boxShadow() {
  box-shadow+: 1px 1px 4px yellow;
}
.box {
  width: 100px;
  height: 100px;
  .boxShadow();
  box-shadow+: 1px 1px 4px yellow;
}

10、继承 extend

使用继承的好处：可以减少代码的重复性，如果只是像变量和函数来创建，则会把指定的代码对当前的元素进行重写一边。若是使用继承，则会使用css中的并集选择器，把具有相同样式的元素并集起来，实现了代码的优化。

// less 拼接  使用 + 字符
.boxShadow() {
  box-shadow+: 1px 1px 4px yellow;
}
.box {
  width: 100px;
  height: 100px;
  .boxShadow();
  box-shadow+: 1px 1px 4px yellow;
}
// less 继承 使用关键字 extend
.box2:extend(.box){}

Crystal莘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
less学习

1、使用less1.1 普通使用less// 全局安装less -g 参数表示将 lessc 命令安装到全局环境。npm install less -g // 针对 Node Development 配置段安装 Less // 这将在项目文件夹中安装 lessc 的最新正式版本，// 并将其添加到 package.json 文件中的 devDependencies 配置段中。npm i less --save-dev // 把less语言编译成css语言，浏览器只识别css语言，需
复制链接

扫一扫