CSS 布局的一些些点

常用的 SCSS 文件和 LESS 文件

Less和SCSS都是CSS预处理器，它们各自有优点和缺点：

Less (Leaner Style Sheets):

优点：

• 语法相对简单，类似于普通CSS，易于学习和上手。
• Less的函数和混合功能比较直观。

  // 函数示例
  @base-font-size: 16px;
  
  .font-size(@size) {
    font-size: @size;
  }
  
  h1 {
    .font-size(24px);
  }
  
  // 混合示例
  .border-radius(@radius: 5px) {
    border-radius: @radius;
  }
  
  .button {
    .border-radius;
    background-color: #3498db;
    color: white;
    padding: 10px 20px;
  }
  
  // 带参数的混合示例
  .box-shadow(@x: 0, @y: 0, @blur: 5px, @color: rgba(0, 0, 0, 0.5)) {
    box-shadow: @x @y @blur @color;
  }
  
  .card {
    .box-shadow(2px, 2px, 10px, #333);
  }

缺点：

• 功能相对较少，灵活性不如SCSS。

• 在嵌套层级较深时，可读性可能会降低。

SCSS (Sassy CSS)

优点：

• 功能丰富，支持更多特性，如嵌套、变量、混合、继承等。

  // 嵌套示例
  .container {
    width: 100%;
    padding: 20px;
  
    .title {
      font-size: 24px;
    }
  
    .content {
      color: #333;
    }
  }
  
  // 变量示例
  $primary-color: #3498db;
  $secondary-color: #2ecc71;
  
  .button {
    background-color: $primary-color;
    color: white;
  }
  
  // 混合示例
  // 溢出省略
  @mixin ellipsis {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
  
  .box {
    ...
    @include ellipsis();
  }
  
  @mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .box {
    @include flex-center;
    width: 100px;
    height: 100px;
    background-color: $secondary-color;
  }
  
  // 继承示例
  .error-message {
    color: red;
  }
  
  .warning-message {
    @extend .error-message;
    font-weight: bold;
  }

• 语法更接近CSS，易于转换现有的CSS文件。
• 常用的 @function

@function px2rem($px){
  @return $px / 100 * 1rem;
}

@function 是 SCSS 预处理器的一个特性，它用于定义可复用的函数。这些函数可以接受参数并返回一个值，然后这个值可以在其他 SCSS 规则中使用。
@function 只能在 SCSS 文件中使用，不能在普通的 CSS 文件或其他预处理器（如 Less）中使用。

缺点：

• 初学者可能需要花更多时间适应其语法和特性。

UMI4 推荐使用 Less 文件

可能是因为 LESS 的语法相对简单，易于上手，适合快速开发和维护项目。同时，LESS 在处理变量和混合等方面也能满足大部分项目的需求。