常用css预编译器(scss和less)，不用30分钟，一看就会！

Sass css与处理器

介绍

Sass 是一款强化 CSS 的辅助工具，它在 CSS 语法的基础上增加了变量 (variables)、嵌套 (nested rules)、混合 (mixins)、导入 (inline imports) 等高级功能，这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库（如 Compass）有助于更好地组织管理样式文件，以及更高效地开发项目。

官方文档

vue3集成sass

1. 安装sass

cnpm install sass -D

2. 在vite.config.js中添加下面代码以全局导入：

//...
export default defineConfig({
  //...
  css: {
    preprocessorOptions: {
      scss: {
        additionalData: `
        @use "@/styles/var.scss" as *;
        `
      }
    }
  }
})

3. 在styles目录下创建var.scss

$xtxColor: #27ba9b;
$helpColor: #e26237;
$sucColor: #14be05;
$warnColor: #e6a23c;
$priceColor: #cf4444;

4. 如果想在组件中使用需要在style的 lang 属性中指定

<style scoped lang="scss">
.test {
  color: $warnColor;
}
</style>

基本使用

嵌套★

（1）Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器。

嵌套功能避免了重复输入父选择器，而且令复杂的 CSS 结构更易于管理。
但要注意避免过度的嵌套，过度的使用嵌套会让产生的 CSS 难以维护。

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

变量 $

变量用来存储需要在 CSS 中复用的信息，例如颜色和字体。SASS 通过 $ 符号去声明一个变量。

$font-stack: Helvetica, sans-serif;
$primary-color: #333;
 
body {
  font: 100% $font-stack;
  color: $primary-color;
}

编译后上面例子中变量$font-stack和$primary-color的值将会替换所有引用他们的位置。

引入 @import

   Sass 拓展了 @import 的功能，允许其导入 SCSS 或 Sass 文件。被导入的文件将合并编译到同一个 CSS 文件中，另外，被导入的文件中所包含的变量或者混合指令 (mixin) 都可以在导入的文件中使用。

比如我们创建一个 foo.scss，里面定义了两个变量：

$font-stack: Helvetica, sans-serif;
$primary-color: #333;

在另一个 SASS 中可以使用 @import 引入这个 scss 片断：

@import 'foo.scss';
body {
  font: 100% $font-stack;
  color: $primary-color;
}

编译后的最终 CSS 如下：

body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

混合 Mixin

混合（Mixin）用来分组那些需要在页面中复用的 CSS 声明，开发人员可以通过向 Mixin 传递变量参数来让代码更加灵活，该特性在添加浏览器兼容性前缀的时候非常有用。

SASS 目前使用 @mixin name 指令来定义混合，然后使用 @include name 指令引用混合样式。

@mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
     -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}
 
.box {
  @include border-radius(10px);
}

编译为css如下：

.box {
  border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
}

继承 @extend

继承是 SASS 中非常重要的一个特性，可以通过 @extend 指令在选择器之间复用 CSS 属性，并且不会产生冗余的代码。

示例：

// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%other-styles {
  display: flex;
  flex-wrap: wrap;
}
 
// 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承。
%message-common {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
 
.message {
  @extend %message-common;
}
 
.success {
  @extend %message-common;
  border-color: green;
}
 
.error {
  @extend %message-common;
  border-color: red;
}
 
.warning {
  @extend %message-common;
  border-color: yellow;
}

编译后如下：

.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}
 
.success {
  border-color: green;
}
 
.error {
  border-color: red;
}
 
.warning {
  border-color: yellow;
}

操作符

所有数据类型均支持相等运算 == 或 !=，此外，每种数据类型也有其各自支持的运算方式：

• 数字运算：SassScript 支持数字的加减乘除、取整等运算 (+, -, *, /, %)，如果必要会在不同单位间转换值。
• 颜色值运算：颜色值的运算是分段计算进行的，也就是分别计算红色，绿色，以及蓝色的值。
• 字符串运算：+ 可用于连接字符串。
• 布尔运算：SassScript 支持布尔型的 and、or 以及 not 运算。
• 函数：SassScript 定义了多种函数，有些甚至可以通过普通的 CSS 语句调用。

示例：

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}
 
aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

编译后：

article[role="main"] {
  float: left;
  width: 62.5%;
}
 
aside[role="complementary"] {
  float: right;
  width: 31.25%;
}

父选择器 &

Scss 使用"&"关键字在 CSS 规则中引用父级选择器：

• 无论 CSS 规则嵌套的深度怎样，关键字"&"都会使用父级选择器级联替换全部其出现的位置。
• "&"必须出现在复合选择器开头的位置，后面再连接自定义的后缀。

示例：

#main {
  color: black;
  a {
    font-weight: bold;
    &:hover { color: red; }
  }
}

编译后：

#main {
  color: black;
}
 
#main a {
  font-weight: bold;
}
 
#main a:hover {
  color: red;
}

嵌套属性

CSS 许多属性都位于相同的命名空间（例如 font-family、font-size、font-weight 都位于 font 命名空间下），Scss 当中只需要编写命名空间一次，后续嵌套的子属性都将会位于该命名空间之下。

示例：

.demo {
  // 命令空间后带有冒号:
  font: {
    family: fantasy;
    size: 30em;
    weight: bold;
  }
}

编译后：

.demo {
  font-family: fantasy;
  font-size: 30em;
  font-weight: bold;
}

注释 /* */与 //

Sass 除了支持标准的 CSS 多行注释 /* */，还提供了单行注释 //。前者会被完整输出到编译后的 CSS 文件中，而后者则不会。

示例：

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }
 
// These comments are only one line long each.
// They won't appear in the CSS output,
// since they use the single-line comment syntax.
a { color: green; }

编译后：

/* This comment is
 * several lines long.
 * since it uses the CSS comment syntax,
 * it will appear in the CSS output. */
body { color: black; }
 
a { color: green; }

---

---

Less css预处理器

介绍

Less （Leaner Style Sheets 的缩写） 是一门向后兼容的 CSS 扩展语言。

因为 Less 和 CSS 非常像，因此很容易学习。而且 Less 仅对 CSS 语言增加了少许方便的扩展，这就是 Less 如此易学的原因之一。

官网

与sass的区别

Sass和Less是两种流行的CSS预编译器。它们都提供了变量、嵌套、混合（Mixins）等高级功能，但也有一些区别。

1. Sass（Syntactically Awesome Style Sheets）：

• • 使用.scss或.sass文件扩展名。
  • 支持缩进语法和SCSS（Sassy CSS）语法。
  • 提供了更多的功能，如控制指令、函数、继承等。
  • 需要Ruby环境来编译，但也可以使用Node.js版本的Sass（Dart Sass）。

1. Less（Leaner Style Sheets）：

• • 使用.less文件扩展名。
  • 只有一种语法，类似于CSS。
  • 提供了一些Sass没有的功能，如Guard表达式和JavaScript表达式。
  • 需要Node.js环境来编译。
    在Vue 3开发中，选择Sass或Less取决于个人或团队偏好以及项目需求。以下是一些建议：

• 如果你或你的团队已经熟悉Sass或Less，并且项目中已经使用了其中之一，那么继续使用它可能是最佳选择。
• 如果你需要更多的功能和灵活性，Sass可能是更好的选择。它提供了更多的功能和控制，可以更好地处理复杂的项目。
• 如果你希望保持与CSS相似的语法，或者项目中已经使用了Node.js，那么Less可能更适合你。

基本步骤

在 Vue 3 项目中使用 Less CSS 预处理器，你可以按照以下步骤操作：

安装依赖

首先，你需要安装 less 和 less-loader。如果你使用的是 Vue CLI 创建的项目，你可以通过以下命令安装：

npm install less less-loader --save-dev
# 或者
yarn add less less-loader --dev

配置

Vue CLI

如果你的项目是通过 Vue CLI 创建的，那么 less-loader 应该已经与 Webpack 集成好了。但是，如果你遇到了问题，可以检查 vue.config.js 文件，确保有正确的配置。通常情况下，默认配置应该就可以了，但如果需要，你可以添加或修改以下配置：

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  //Vue CLI 对所有依赖项进行转译。这意味着即使它们是第三方库，也会通过 Babel 转换，以便使用新的 JavaScript 特性。
  transpileDependencies: true,
  css: {
    loaderOptions: {
      less: {
        // 这里可以添加 Less 配置选项
        // 确保在编译时始终进行数学运算，即使在无法确定单位时也是
        math: "always",
        // 定义全局变量，这些变量可以在所有的 Less 文件中使用，而无需单独导入
        globalVars:{
          blue:"#1CC0FF"
        }
      }
    }
  }
})

Vite

//vite.config.js
export default defineConfig({
  css: {
    // css模块化配置项
  	modules:{
      // ....
    }
    // 预处理器配置项
    preprocessorOptions: {
      less: {
        // 一些配置项
      }
    }
  }
})

在 Vue 组件中使用 Less

现在你可以在 Vue 组件中直接使用 Less 语法了。例如：

<script setup>
const msg = "Hello Vue 3!"
</script>
<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
  </div>
</template>

<style lang="less" scoped>
.hello {
  h1 {
    color: blue;
    &:hover {
      color: green;
    }
  }
}
</style>

在上面的例子中，<style> 标签的 lang 属性被设置为 "less"，这样 Vue 的加载器就会知道这个样式块使用的是 Less 语法。

全局样式

如果你想要定义全局的 Less 样式，可以在 src 目录下创建一个 assets 文件夹，并在其中创建一个 global.less 文件。然后，你可以在 main.js 或 main.ts 文件中导入这个全局样式文件：

import '@/assets/global.less';

确保你的 vue.config.js或 vite.config.js 配置了正确的路径解析，以便能够正确导入 .less 文件。

基本语法

Less（Leaner Style Sheets）是一种动态样式语言，它扩展了CSS，增加了诸如变量、混合（Mixins）、嵌套规则、函数等功能。以下是Less的一些主要语法特性：

变量

变量允许你存储一个值，并在需要时重新使用。Less中的变量以@开头。

@link-color: #428bca; // 定义变量
a {
  color: @link-color; // 使用变量
}

混合（Mixins）

混合允许你定义一组CSS属性，然后在需要的地方重复使用。

.rounded-corners (@radius: 5px) {
  border-radius: @radius;
  -webkit-border-radius: @radius;
  -moz-border-radius: @radius;
}
#box {
  .rounded-corners; // 调用混合，使用默认值
}
#box2 {
  .rounded-corners(10px); // 调用混合，并传递一个新值
}

嵌套规则

Less 提供了使用嵌套（nesting）代替层叠或与层叠结合使用的能力。假设我们有以下 CSS 代码：

#header {
  color: black;
}
#header .navigation {
  font-size: 12px;
}
#header .logo {
  width: 300px;
}

用 Less 语言我们可以这样书写代码：

#header {
  color: black;
  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
  }
}

用 Less 书写的代码更加简洁，并且模仿了 HTML 的组织结构。

你还可以使用此方法将伪选择器（pseudo-selectors）与混合（mixins）一同使用。下面是一个经典的 clearfix 技巧，重写为一个混合（mixin） (& 表示当前选择器的父级）：

.clearfix {
  display: block;
  zoom: 1;

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

运算

Less允许在CSS中使用运算符进行加、减、乘、除运算。

@base-width: 100px;
@filler: @base-width * 2;
#container {
  width: @base-width + @filler;
}

函数

Less允许你定义函数，并在需要的地方调用它们。

@base-color: #f04615;
@darken-amount: 10%;
.darken(@color, @amount) {
  color: mix(@color, black, @amount);
}
.header {
  background-color: @base-color;
  .darken(@base-color, @darken-amount);
}

嵌套媒体查询

Less允许你在CSS规则内嵌套媒体查询。

.component {
  width: 300px;
  @media (min-width: 768px) {
    width: 600px;
  }
}

引入（Importing）

Less允许你导入其他Less文件，并在当前文件中使用它们的变量、混合等。

@import "variables.less"; // 引入变量文件
@import "mixins.less";    // 引入混合文件

循环和条件语句

Less提供了循环和条件语句，如each、for、if等，用于处理更复杂的样式逻辑。

@list: red, green, blue;
each(@list, {
  .text-@{value} {
    color: @value;
  }
});

Escaping

有时候，你可能需要输出Less特定的语法到CSS中，这时可以使用转义。

.class {
  filter: ~"ms:alwaysHasItsOwnSyntaxForThis";
}

---

---