less用法

1.less介绍

1.在工作中 写样式的地方 都不会直接写在 css文件中， 写在 less文件里面 。

2.less:

less是一种提高我们编写css效率的技术 => css预处理器 （less,scss,stylues 技术名词 ）

3.less工作流程:

把样式代码 直接写在 less文件中，通过插件 来把 less文件 编译成 我们熟悉的 css文件；

在网页中 引入 编译好的 css文件 ！！

4.less的语法：

1 .变量 ：方便快速去修改 样式。

2 .运算 : less 支持 数学运算。

3.混合 mixin： 把一大段css代码都堆在一起方便使用 。

4.嵌套 : 按照html的嵌套结构来编写css嵌套

2.less体验

2.less体验

​
// 声明一个变量
@color:yellow; 
div{ 
  color: @color;
  border: 1px solid @color;
}
p{
  color: @color;
}
​

3.less变量

1.当我们要修改主题颜色的时候， 只改一个地方即可。

懂得了使用less 变量技术 就可以做到改一个地方即可。

2.变量 会变化的 数据即可

3.固定语法 @+任意的名称（有语义的英文）

4.变量：作用 把一些css的属性设置在一个地方，实现一改全改

属性：@theme-color:gray;

例：

​
@theme-color:gray;
​
/* 统一设置网页字体的大小 */
@font-size:200px;
​
 div{
   color: @theme-color;
   font-size: @font-size;
 }
 p{
   color: red;
   font-size: @font-size;
 }
 section{
   background-color: @theme-color;
   font-size: @font-size;
 }
​

4.less运算

1.默认的css 不支持运算， 使用calc

2 less 支持 运算

例：

div {
  width: 300px;
  width: 100px;
  height: 300px;
  /* 使用 easy less 编译 除法 加上括号 */
  height: 100px;
  /* div 字体大小是  变量的两倍 */
  font-style: 40px;
}
​

5.less混合mimin

例：

/* 
需求  有三个 元素 想要使用 一张精灵图
      1 A元素  图片位置 x y   (-300px,30px)
      1 B元素  图片位置 x y   (-400px,60px)
      1 C元素  图片位置 x y   (-50px,100px)
​
使用 less的mixin来解决    （用法有点类似变量）
​
 */
/* 1 定义一个mixin */
div {
  /* ================== */
  /* 存放你想要用到一坨代码 */
  background-image: url(2.png);
  background-size: 100%;
  background-repeat: no-repeat;
  /* 背景图片的位置 */
  background-position: -300px 30px;
}
​

6.less嵌套

1.less 嵌套中

嵌套 后会代 变成子代选择器

伪元 素写法（ &::before）

例：

​
 */
/* less中的嵌套   */
.box {
  p {
  }
  > section {
    #header {
      button {
        color: #000;
      }
    }
  }
  a {
    img {
    }
  }
}
​
div {
  height: 200px;
  background-color: lawngreen;
  // ::before{ 错误的
  &::before {
    // 正确 要加上一个 & 连接
    content: 'less实现的伪元素';
  }
}
​

\