#CSS

======================================================

1. Less预处理器

• 概念：CSS预处理器，扩展了CSS的功能

• 核心特性：

  • 变量：使用@定义变量
  • 嵌套：支持选择器嵌套
  • 混合：可重用的样式代码块
  • 运算：支持数学运算
  • 注释：支持单行注释和块注释

======================================================

2. Less注释

• 单行注释：

  • 语法：//注释内容
  • 快捷键：ctrl + /

• 块注释：

  • 语法：/* 注释内容 */
  • 快捷键：Shift + Alt + A

======================================================

3. Less变量

• 语法：

  • 定义变量：@变量名: 数据;
  • 使用变量：CSS属性: @变量名;

• 变量使用示例：

  /* 定义变量 */
  @myColor: pink;
  @primary-color: #3498db;
  @base-font-size: 16px;
  
  /* 使用变量 */
  .box {
    color: @myColor;
  }
  
  a {
    color: @myColor;
  }
  
  .container {
    color: @primary-color;
    font-size: @base-font-size;
  }

======================================================

4. Less运算

• 概念：Less支持在CSS中进行数学运算，使CSS具备计算能力

• 支持的运算符：+、-、*、/

• 运算规则：

  • 运算符两侧必须加空格
  • 运算单位要统一

• 运算示例：

  /* 定义变量 */
  @base-width: 100px;
  @base-color: #3498db;
  
  /* 使用运算 */
  .box {
    width: @base-width + 50px; /* 150px */
    height: @base-width * 0.5; /* 50px */
    margin: @base-width / 2; /* 50px */
    background-color: @base-color + #111; /* #45a9eb */
  }

======================================================

5. Less嵌套语法

• 基本结构：

  /* 父级选择器 */
  .father {
    // 父级样式
    color: red;
  
    /* 子级选择器 */
    .son {
      // 子级样式
      width: 200px;
  
      /* 更深层嵌套 */
      a {
        color: green;
  
        /* 伪类嵌套 */
        &:hover {
          color: blue;
        }
      }
    }
  }

• &符号的使用：

  • 表示当前选择器
  • 代码写到&的大括号里面就表示不会生成后代选择器
  • 用于伪类、伪元素和同级选择器

======================================================

6. Less导入

• 作用：导入less公共样式文件

• 语法：@import "文件路径";

• 提示：如果是less文件可以省略后缀

• 示例：

  /* 导入带后缀的less文件 */
  @import './base.less';
  
  /* 导入省略后缀的less文件 */
  @import './common';

======================================================

7. Less导出

• 作用：指定编译后的CSS文件保存位置

• 写法：在less文件的第一行添加 // out: 存储URL

• 提示：文件夹名称后面添加 /

• 示例：

  /* 导出到指定CSS文件 */
  // out: ./index.css
  
  /* 导出到指定文件夹 */
  // out: ./css/

• Less禁止导出：

  • 作用：防止某些less文件被单独编译成CSS文件
  • 写法：在less文件第一行添加 // out:false
  • 示例：

    /* 禁止导出当前less文件 */
    // out:false

======================================================