首页 前端知识 css预处理器scss的使用&&如何全局引入

css预处理器scss的使用&&如何全局引入

2024-04-29 12:04:21 前端知识 前端哥 805 622 我要收藏

目录

scss 基本功能

1、嵌套

2、变量 $

3、@mixin 和 @include

4、@extend

5、@import

scss 在项目中的使用

1、存放 scss 文件

2、引入 variables 和 mixins

2-1、局部引入

2-2、全局引入

3、入口文件中引入其他文件 


    项目中使用 css 预处理器,可以提高 css 开发效率,合理应用预处理器的特性,也可以提高 css 代码的可维护性。

    目前常见的  css 预处理器有三种:less,scss(sass升级版),stylus。不管是哪一种,最基本的 variables,extend,mixin,import 这些都是有的,只不过具体的用法和写法各有不同罢了。大家可以根据自己的喜好,选择自己喜欢的预处理器。

    我选择的是 scss。具体原因是:element-ui 的 theme-chalk 使用 scss 编写,项目中如果也使用 scss,那么后续想改变 element-ui 的主题色,会非常容易。当然不使用 scss,也是可以改变 element-ui 的主题色或是使用自定义主题的,只不过个人觉得比较麻烦。

    所以,在这里直接选择了 scss。而且接触过的大部分项目也都是使用的 scss,

不光 PC 端,还有移动端以及小程序的项目。


scss 基本功能

1、嵌套

// scss 写法
.container{
  width: 100%;
  height: 100%;
  .wrap{
    max-width: 1200px
  }
}
// 以上代码使用 css 书写
.container{
  width: 100%;
  height: 100%;
}
.container .wrap{
  max-width: 1200px;
}

// scss 写法
.title {
  font: {
    family: fantasy;
    size: 20px;
    weight: bold;
  }
}
// 以上代码使用 css 书写
.title{
  font-family: fantasy;
  font-size: 20px;
  font-weight: bold;
}
 
// scss 写法
.container{
  width: 100%;
  height: 100%;
  background: #409eff;
  &:hover{
    background: #42b983;
  }
}
// 以上代码使用 css 书写
.container{
  width: 100%;
  height: 100%;
  background: #409eff;
}
.container:hover{
  background: #42b983;
}

2、变量 $

$color = #2E98FE
 
.container{
    width: 100%;
    height: 100%;
    background: $color
}

3、@mixin 和 @include

@mixin title-text {
  font: {
    size: 20px;
    weight: bold;
  }
  color: #2c3e50;
}
.card__title{
  width: 100%;
  height: 40px;
  @include title-text
}

4、@extend

// scss @extend
.error {
  border: 1px #f00;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}
 
// 以上代码最终编译为
.error, .seriousError {
  border: 1px #f00;
  background-color: #fdd; 
}
.seriousError {
  border-width: 3px; 
}

5、@import

@import "foo.scss";

scss 在项目中的使用

1、存放 scss 文件

在 assets 文件夹中创建 scss 文件夹,用于存放 scss 的所有文件

具体文件如下:

当然,也有的习惯是放到 styles 文件目录下 :

common.scss        公共基础样式

main.scss        入口文件

mixins.scss        混入样式

reset.scss        重置文件

variables.scss        变量

    一般情况下,每个系统都有属于自己的一套样式风格。我们可以根据设计规范,定义一套变量,然后在实际的开发中,使用变量编写 css 样式。这样写的好处是什么呢?就是当你的项目已经开发到一半或者已经开发完成进入测试阶段了,这时老板走过来对你说,这个系统怎么是蓝色的呀,改成红色吧。这个时候,再也不需要一个一个文件的修改样式了,只需要修改 variables 中的一个变量就可以了。


2、引入 variables 和 mixins

variables.scss 文件定义好之后,有两种使用方式:局部引入和全局引入

mixins.scss 文件类似。

2-1、局部引入

在具体的文件中引入。

// App.vue
 
<style lang="scss" scoped>
@import './assets/scss/variables.scss';

.container{
  width: 100%;
  height: 100%;
  background: $background-color;
}
</style>

    局部引入,变量只能在被引入的文件中使用。通常,变量在绝大多数文件中都会被用到,如果在每个文件中都要引入一遍,略显麻烦,这个时候就可以考虑 全局引入 。 


2-2、全局引入

一次引入,随处可用。

// vue.config.js
 
module.exports = {
  publicPath: './',
  outputDir: process.env.VUE_APP_OUTPUT,
  css: {
    loaderOptions: {
      sass: {
        prependData: `
          @import "@/assets/scss/variables.scss";
          @import "@/assets/scss/mixins.scss";
        `
      }
    }
  }
}

这里需要注意的是: sass-loader 版本不同,loaderOptions 中 prependData 的属性名不同

  • sass-loader v8-,这个属性名是 "data"
  • sass-loader v8 中,这个属性名是 "prependData"
  • sass-loader v10+,这个属性名是 "additionalData"


3、入口文件中引入其他文件 

// main.scss
 
@import "./reset.scss";
@import "./common.scss";

这里注意文件的引入顺序。

// main.js
 
import Vue from 'vue'
import App from './App.vue'
import './registerServiceWorker'
import router from './router'
import store from './store'
 
import './assets/scss/main.scss'
 
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

以上,就是我在项目用使用 scss 的方案。

之所以整理这篇文章,主要是因为项目有一个整体主色调系:紫色

定义了一个色值变量 : $theme-purple , 主题紫色,整个项目很多地方都会使用到,

并且将其也写到了 variables.scss  变量文件 中,接下来就是重点了,

将 variables.scss 在 main.js 入口文件中打算引入供全局使用时

却发现别的地方根本无法使用,后来经过百度一番后,

才得知好像是 scss变量 无法简单的通过 main 就能全局引用了,

得需要单独去 Vue 的 vue.config.js 配置文件里面配置一下才可。

也就是上面的全局引入方式

      sass: {
        prependData: `@import "@/assets/scss/mixins.scss";`
      }

这里我只引入了 mixins ,是因为我在 mixins 里面引入了 variables.scss

这样重启一下项目就 OK 大功告成啦 ~ 下课!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6481.html
标签
scss
评论
发布的文章

什么是JSON 为什么使用它

2024-05-07 13:05:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!