009-CSS-Less、Scss、Sass

豚豚鼠2024-03-05 16:37

Less、Scss、Sass

概念
常用的扩展能力

在实际工作中，CSS 编写更多的采用 CSS 扩展语言，像 Scss、Less 等，因其学习成本低，实用性高，被广泛应用。

概念

💡 Tips：工作中，Less、Scss 都可以使用，二者基本没有高低之分，常用功能基本都包含，可参考其官网，选择其一即可

CSS 扩展语言	说明	官网
Less	优雅的编写CSS，API清晰明了，简单易上手，后缀名 .less	Less 官网
Sass	功能强大，3.0前版本不好用，后缀名 .sass	--
Scss	Sass 3.0后版本，更名Scss，API功能更多，好用，后缀名 .scss	Sass 官网

常用的扩展能力

💡 Tips：后续例子都采用 Less 扩展语言演示，Scss 相同功能可参考官网

1、嵌套：代码层级清晰

javascript 复制代码

.parent {
  position: relative;
  .son {
    position: absolute;
    left: 0;
    top: 0;
  }
}

2、变量：项目风格抽离

javascript 复制代码

// 项目蓝色
@blue: #007aff;

// 基本单位尺寸
@pm: 12px;3、混合：公共样式封装

.parent {
  color: @blue;
  padding: @pm;
}

3、混合：公共样式封装

javascript 复制代码

.borderTop {
  border-top: 1px solid #ccc;
}
.overflowDot {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parent {
  .borderTop();
  .text {
    .overflowDot();
  }
}

4、&：当前选择器的父级

javascript 复制代码

.clearfix {
  display: block;
  zoom: 1;

  &:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }
}

5、导入：公共文件抽离

javascript 复制代码

@import "library"; // library.less
@import "typo.css";