vue中scss的理解和使用

首先要了解什么是CSS 预处理器？ SCSS是一种CSS预处理语言

1、 什么是CSS预处理器
CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题。CSS预处理语言有SCSS (SASS) 和LESS等等，总之都是用来实现样式的。

2、lang
因此lang的属性可选：scss（sass）、less等等
即：<style lang="scss">
3、scss和sass的区别
scss是sass的一个升级版本，两者都是用来实现样式的，只是语法有各自的不同点。
注明：使用这个lang的属性需要安装scss（sass）
4、scoped属性
scoped是指定样式的局部作用域。
在vue中：App.vue相当于根容器，不设置scoped。所以一般在App.vue中引用公共样式。而在其它.vue页面中用scoped，代表当前样式只作用于当前.vue页面。不作用于其它.vue页面。

在vue组件中使用scss

vue项目上安装SCSS

npm  install sass-loader --save-dev
npm install node-sass --sava-dev

<style lang="scss" scoped>
</style>

 SCSS语法：

注释分为三种：/* */css中显示，//css中不显示，/*重要注释!*/压缩不会被删掉。

变量：

使用 $ 符号定义变量，可以在整个样式表中重复使用。

$primary-color: #336699;

 嵌套规则：

可以在父元素内部嵌套子元素的样式规则，使得样式表更具层次结构。

.container {
  width: 100%;
  .title {
    font-size: 20px;
  }
}

混合（Mixin）：

类似函数的结构，可以定义一组样式规则，并在需要的地方引入使用。

@mixin border-radius($radius) {
  border-radius: $radius;
}

.button {
  @include border-radius(5px);
}

继承：

通过 @extend 关键字实现样式规则的继承，减少重复的样式定义。

.error {
  border: 1px solid red;
}

.important-error {
  @extend .error;
  font-weight: bold;
}

 导入

使用 @import 可以将多个SCSS文件组合到一个文件中，便于管理和组织样式表。

条件语句：

 SCSS 支持使用 @if、@else if 和 @else 来实现条件样式的设置，可以根据不同的条件输出不同的样式。

$width: 90px;

.element {
  @if $width > 100px {
    width: $width;
  }
  @else {
    width: 100px;
  }
}

循环：

通过 @for、@each 和 @while 等循环语句，可以方便地生成重复的样式规则

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

颜色函数

SCSS 提供了丰富的颜色函数，可以进行颜色值的计算、调整和转换。

$base-color: #036;
.lighter-color: lighten($base-color, 20%);
.darker-color: darken($base-color, 20%);

计算：

SCSS 支持对数值进行加减乘除等基本运算，方便进行尺寸和数值的计算

.container {
  width: 100% - 20px;
}

& 用于引用父选择器：通常用于嵌套选择器的情况。

.btn {
  &-primary {
    background-color: blue;
  }
  &-secondary {
    background-color: green;
  }
}


//这将生成以下的 CSS 代码：
.item-1 {
  width: 100px;
}
.item-2 {
  width: 200px;
}
.item-3 {
  width: 300px;
}

@for、@each 和 @while

@for 循环：通过指定起始值、结束值和步长来生成一系列样式规则。

@for $i from 1 through 3 {
  .item-#{$i} {
    width: 100px * $i;
  }
}

@each 循环：用于遍历列表或地图，生成相应的样式规则

$colors: (primary: #ff0000, secondary: #00ff00, tertiary: #0000ff);

@each $name, $color in $colors {
  .#{$name} {
    color: $color;
  }
}

这将生成以下的 CSS 代码：
.primary {
  color: #ff0000;
}
.secondary {
  color: #00ff00;
}
.tertiary {
  color: #0000ff;
}

@while 循环：基于指定条件来重复生成样式规则，直到条件不再满足。

$i: 6;

@while $i > 0 {
  .item-#{$i} {
    width: 50px * $i;
  }
  $i: $i - 2;
}

//css：
.item-6 {
  width: 300px;
}
.item-4 {
  width: 200px;
}
.item-2 {
  width: 100px;