如何在vite初始化项目中安装scss以及scss的使用

目录
  • 1.scss安装
  • 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区

<style lang='scss'>
    body{
        background-color: $blue
    }
</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没有被引用，就不会产生代码，只有被引用后才会产生代码

总结

到此这篇关于如何在vite初始化项目中安装scss以及scss使用的文章就介绍到这了,更多相关vite初始化项目安装scss内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • Vue + Scss 动态切换主题颜色实现换肤的示例代码

    根据预设的配色方案,在前端实现动态切换系统主题颜色. 大概的思路就是给html根标签设置一个data-theme属性,然后通过js切换data-theme的属性值,Scss根据此属性来判断使用对应主题变量.这里可以选择持久化Vux或接口来保存用户选择的主题. 一.首先需要给项目下载配置Scss 1.安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 { t

  • vue项目中使用scss的方法步骤

    一 概述 随着sass/less等css预处理器的出现,编写css变的越来越有乐趣.所以现在越来越多的人在项目中喜欢使用scss或者less.(我自己就是一个).由于最近在写一个vue项目.所以就把写项目期间每天的一些知识点写在博客里.所以最近的博客应该都会和vue有关.今天要和大家分享的就是如何在vue项目中引入scss(引入less也类似) 二 vue中引入scss 2.1 vue-loader 在讲如何在vue项目中使用scss之前,我们先来简单了解一个概念,那就是vue-loader.v

  • 在 vue-cli v3.0 中使用 SCSS/SASS的方法

    在项目中使用 SCSS/SASS 进行样式编写无疑会节省很多开发样式的时间.关于如何在 vue-cli v3.0 中使用 SCSS/SASS,这里提供三种方案.前提是在使用 vue-cli 生成项目时勾选了 CSS Pre-processors (CSS预处理器),否则无法在项目中直接使用. 方案一:在组件中直接使用 在组件中直接使用 SCSS/SASS 是最简单的方式: <style lang="scss" scoped> </style> 通过 lang 选

  • 解决vue scoped scss 无效的问题

    今天遇到scoped内部的scss设置无效,解决办法如下: /deep/ <style scoped lang="scss"> .position-el-steps { /deep/ .el-step.is-vertical { .el-step__description { margin-top: -20px; } .el-step__line { border-left: 2px dashed #c0c4cc; background-color: transparent

  • 如何在vite初始化项目中安装scss以及scss的使用

    目录 1.scss安装 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.con

  • 在vue项目中安装使用Mint-UI的方法

    在vue项目中安装使用Mint-UI的方法

    一.Mint UI 是 由饿了么前端团队推出的 一个基于 Vue.js 的移动端组件库,具有以下特性: 使用文档: http://mint-ui.github.io/#!/zh-cn Mint UI 包含丰富的 CSS 和 JS 组件,能够满足日常的移动端开发需要.通过它,可以快速构建出风格统一的页面,提升开发效率. 真正意义上的按需加载组件.可以只加载声明过的组件及其样式文件,无需再纠结文件体积过大. 考虑到移动端的性能门槛,Mint UI 采用 CSS3 处理各种动效,避免浏览器进行不必要的

  • vue踩坑记-在项目中安装依赖模块npm install报错

    在维护别人的项目的时候,在项目文件夹中安装npm install模块的时候,报错如下: npm ERR! path D:\ShopApp\node_modules\fsevents\node_modules\abbrev npm ERR! code ENOENT npm ERR! errno -4058 npm ERR! syscall access npm ERR! enoent ENOENT: no such file or directory, access 'D:\ShopApp\nod

  • vue-cli初始化项目中使用less的方法

    什么是less? Less 是一门 CSS 预处理语言,它扩展了 CSS 语言,增加了变量.Mixin.函数等特性,使 CSS 更易维护和扩展. 引言 现在前端的vue框架越来越火,vue-cli作为vue项目的脚手架工具,是我们在开发中最最经常使用的.为了在vue项目中更好的管理我们的css文件,我们通常会引入less或者sass来帮助我们管理我们的css代码.那么,本文旨在记录如何在vue-cli初始化的项目中使用less来帮助我们更好的管理css代码. 下面话不多说了,来随着小编一起看看详

  • vue项目中安装less依赖的过程

    目录 vue安装less依赖 一.安装less依赖 二.修改webpack.base.conf.js文件 vue中less知识点总结 安装 变量(Variables) 混合(Mixins) 嵌套(Nesting) 运算(Operations) 转义(Escaping) 函数(Functions) 命名空间和访问符 映射 作用域(Scope) scss和stylus vue安装less依赖 一.安装less依赖 npm install less less-loader --save 二.修改web

  • 详解VUE项目中安装和使用vant组件

    Vant 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库,提供了一整套 UI 基础组件和业务组件. 特性 50+ 个经过有赞线上业务检验的组件 单元测试覆盖率超过 90% 完善的中英文文档和示例 支持babel-plugin-import 支持 TypeScript 支持 SSR 组件中文文档地址:https://youzan.github.io/vant/#/zh-CN/intro 1.创建VUE项目之后进入项目目录运行安装命令: npm i vant -S 2.安装 babel-pl

  • 详解在vue-cli项目中安装node-sass

    详解在vue-cli项目中安装node-sass

    1,使用save会在package.json中自动添加. npm install node-sass --save npm install sass-loader --save 2,通常使用npm安装会出现以下报错,安装失败.(网路问题) 3,可以通过淘宝的npm镜像安装node-sass,解决以上问题. npm install -g cnpm --registry=https://registry.npm.taobao.org (安装淘宝镜像) cnpm install node-sass -

  • 详解在React项目中安装并使用Less（用法总结）

    less的安装配置 安装react-app-rewired,react-app-rewire-less,babel-plugin-import插件 执行命令: npm install react-app-rewired --save-dev npm install react-app-rewire-less --save-dev npm install babel-plugin-import --save-dev 配置package.json文件 找到scripts属性,修改start的值为re

  • 如何在IDEA Maven项目中导入本地jar包的步骤

    如何在IDEA Maven项目中导入本地jar包的步骤

    1.打开侧面的maven,点击图中箭头指向的图标. 2.出现如下弹窗,在Command line在中输入执行的指令. 指令格式: install:install-file -Dfile=<Jar包的地址> -DgroupId=<Jar包的GroupId> -DartifactId=<Jar包的引用名称> -Dversion=<Jar包的版本> -Dpackaging=<Jar的打包方式> 如: mvn install:install-file -

  • 如何在Java SpringBoot项目中配置动态数据源你知道吗

    如何在Java SpringBoot项目中配置动态数据源你知道吗

    目录 首先需要引入第三方依赖 只需要在配置文件中按照如下配置 创建如下两个数据库 entity mapper.xml mapper层 Service层 下面是两个测试方法 下面可以来看一下测试结果: 在我们工作中涉及到一些场景需要我们配置多数据源的操作,之前来说我们配置数据源需要写繁琐的配置类来配置我们的数据源,哪个是默认数据源等等,而现在我们可以使用"苞米豆"为我们提供的提供的第三方工具,只需要简单配置就可以实现多数据源之间的灵活切换了! 首先需要引入第三方依赖 <depend

随机推荐