在vite初始化的项目中安装scss,及scss的使用

目录

1.scss安装

        (1)打开终端输入,

        (2)在src/assets文件夹下新建  style文件夹(文件名可以自定义),在文件夹下新建main.scss文件

        (3)在vite.config.js中配置

2.scss的简单使用

          (1)变量的定义

        (2)简单使用

3.基本语法

        (1)!default的使用       

        (2)变量的取值也可以是变量

        (3)@mixin可以定义一段代码作为模板样式

        (4)&的使用

        (5)@extend的使用

        (6)%变量名的使用


1.scss安装

        (1)打开终端输入,

npm install sass -d

        (2)在src/assets文件夹下新建  style文件夹(文件名可以自定义),在文件夹下新建main.scss文件

         (3)在vite.config.js中配置

export default defineConfig({
  plugins: [vue()],
  css: {
    preprocessorOptions: {
      scss: {
        additionalData:'@import "./src/assets/style/main.scss";'
      }
    }
  }
})

2.scss的简单使用

         (1)变量的定义

                例如:$blue: #3385ff

                $表示这是一个变量;blue表示这个变量的名称;#3385ff代表这个变量的值

      (2)简单使用

                在HelloWorld.vue文件的style区

    

        如果页面背景变成了刚定义的颜色,说明scss使用成功

3.基本语法

                变量除了可以定义在全局,也可以在单个页面中定义

        (1)!default的使用       

$color-green: #0f0;
$color-green: #f55 !default;

                这里这个变量的值,最终会显示为绿色,这是因为,!default的含义是,如果这个变量没有被赋值,那么就赋默认值,如果在其他地方被赋值,就取在其他地方被赋的值,可以理解为把这个默认值的优先级降到了最低,当没有其它地方赋值时候,才会选择默认值

        (2)变量的取值也可以是变量

$hello: $color-green;

        (3)@mixin可以定义一段代码作为模板样式

@mixin border-radius($radius: 5px, $borderRadius: 8px) {
  border: {
    radius: $radius;
    top: $borderRadius solid #ff0;
    bottom: $borderRadius solid #f00;
    left: $borderRadius solid #00f;
    right: $borderRadius solid #888;
  }
}

        上面的代码可以看出,@mixin定义的变量,可以传参数,并且可以使用es6给函数参数默认值的方式赋值,且有相同的前缀的属性例如border,font...,可以把前缀和后边的拆开来写

        在引用@mixin时,如果不传值,就会取默认的5px,8px,如果传值就会按参数位置来取值,例如下面的代码,取值就是5px,1px

@include border-radius(5px, 1px);

        (4)&的使用

&可以引用父元素

  .inner {
    width: 10px;
    height: 10px;
    background-color: $blue;
  }

  $hover: #333;

  &:hover {
    background-color: $hover;
  }


//其实就是
    
  .inner {
    width: 10px;
    height: 10px;
    background-color: $blue;
  }

  $hover: #333;

  .inner:hover {
    background-color: $hover;
  }

             (5)@extend的使用

        @extend可以继承其它代码段

@mixin btn($width: 50px, $height: 20px, $font-size: 16px) {
  width: $width;
  height: $height;
  font-size: $font-size;
  text-align: center;
  line-height: $height;
  @include border-radius(5px, 1px);
  &:hover {
    opacity: 0.8;
    cursor: pointer;
  }
}
.btn {
  @include btn(80px, 30px, 12px);
  margin: {
    top: 10px;
  }
}
.btn-primary {
  @extend .btn;
  background-color: $light-blue;
  color: $fontColor;
}

这样.btn-primary就继承了.btn的所有属性,后边再写自己的特性

        (6)%变量名的使用

%pd {
  padding-top: 100px;
}

在引用时

  @extend %pd;

但是如果%pd没有被引用,就不会产生代码,只有被引用后才会产生代码

你可能感兴趣的:(scss,前端,javascript)