# vue-admin-2305

**Repository Path**: connerljlx_admin/vue-admin-2305

## Basic Information

- **Project Name**: vue-admin-2305
- **Description**: 2305班vue后台管理
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-12-12
- **Last Updated**: 2023-12-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# sass
css预处理器  (sass less stylus)
  也叫css 扩展语言


css后处理器 （postcss） （对于编译好css做二次编译优化处理）



+ sass
  两种后缀名
  .sass
      激进的
      ```sass
        .box
          width 100
          height 100
          background-color red
          p
            color red
      ```
  .scss
     温和型 兼容 css 语法的

+ less  和 sass中 scss类似

+ stylus
  类似 sass中的 .sass


## sass基础语法
+ sass变量
```scss

// sass变量 使用 $关键字定义变量
$bgc: #dc11a2;
.box {
  width: 400px;
  height: 400px;
  background-color: $bgc;
}

```
+ 选择器嵌套 定义后代选择器
```scss
.box {
  width: 400px;
  height: 400px;
  background-color: $bgc;
  // 选择器嵌套
  .p {
    width: 300px;
    height: 300px;
    background-color: #5cc671;
    span {
      color: #fff;
      cursor: pointer;
      // 代表当前选择器
      &:hover {
        color: red;
      }
    }
  }
}

// 编译后

.box{
   width: 400px;
    height: 400px;
    background-color: #dc11a2;
}
.box .p {
   width: 300px;
    height: 300px;
    background-color: #5cc671;
}
.box .p span{
   color: #fff;
      cursor: pointer;
}

.box .p span:hover{
  color: red;
}
```

+ sass运算
```scss
// sass运算 算数运算
/*
  + - * /

  / 在某些场景下 不会解析成 除法  解析css中 分割符号  /     font: 20px / 2; font-size: 20px; line-height: 2em;


  特定场景下 scss才认为是 除法运算
    1 参与其他运算   100px + 200px / 2; 
    2 加了小括号  (100px/2);
    3 有变量参数   $width/ 2;

    其他 都会解析成css 分隔符号
*/
$width: 400px;
.box2 {
  width: 100px + 200px;
  height: $width / 2;
  background-color: #39bcd3;
}
```

+ @extend 关键字 继承 另一个选择器样式
```scss
.box3 {
  width: 300px;
  height: 300px;
  background-color: #56bd0c;
  margin: 20px auto;
}
// 继承 .box3样式
.box4 {
  @extend .box3;
  border-radius: 10px;
}
```

+ mixin 混入 混合 宏
```scss
// mixin 混入 混合 宏
// 定义 混入关键字 @mixin定义
// 定义普通不带参数 混入
@mixin box {
  width: 300px;
  height: 300px;
  background-color: #8c0b79;
}
// 使用 @include关键字 调用 混入
.box5 {
  @include box;
}

// 定义带参数的混入
@mixin box2($bgc: #ea6a2f) {
  width: 200px;
  height: 200px;
  background-color: $bgc;
}
// 使用带参数的混入
.box6 {
  @include box2(#a9ceb8);
}
```

# 其他开发配置
配置开发 重启生效
```js
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {
    host: "localhost",
    port: 3000,
    open: true,
  },
  // 关闭eslint代码检查
  lintOnSave: false,
  // 自定义路径别名
  chainWebpack: (config) => {
    // 给路径起别名
    config.resolve.alias
      .set("@", path.join(__dirname, "src"))
      .set("@c", path.join(__dirname, "src/components"))
      .set("@v", path.join(__dirname, "src/views"))
      .set("@s", path.join(__dirname, "src/store"))
      .set("@r", path.join(__dirname, "src/router"));
  },
});
```