代码编织梦想


一、安装使用scss

1. 安装 scss

npm install scss --save

2. 安装 node-sass 和 sass-loader

sass-loader:把 sass编译成css
sass-loader:nodejs环境中将sass转css
提示:限制 node-sass,sass-loader 版本号,防止默认安装的版本号过高

npm i sass-loader@7.3.1 -D
npm i node-sass@4.14.1 -D

版本对应关系:
在这里插入图片描述

3. 配置 webpack.base.conf.js 文件

提示:在 build 文件夹目录下 webpack.base.conf.js 文件中,找到 rules 添加以下代码

rules: [
  {
    test: /\.scss$/,
    loaders: ['style', 'css', 'sass']
  },
]

4. 组件中使用 scss

提示:在组件中style标签上添加属性 lang="scss",保存运行。

<style lang="scss">
#app {
  background: $color;
}
</style>

二、设置scss变量

1. 使用 sass-resources-loader 实现全局变量

安装 sass-resources-loader

cnpm install sass-resources-loader --save

2. 新建一个 public.scss 文件

在src目录下的assets文件夹里面新建一个public.scss文件,用于存放所有的公共变量。

3. 根目录下找到 build 下的 utils.js 文件

提示:resources里写 scss(公共变量文件) 路径

scss: generateLoaders('sass')
// 改为:
scss: generateLoaders('sass').concat({
  loader: 'sass-resources-loader',
  options: {
    resources: path.resolve(__dirname, '../src/assets/public.scss') // 指定单个文件
    // resources: [path.resolve(__dirname, '../src/assets/public.scss'),path.resolve(__dirname, '../src/assets/public.scss')] // 指定多个文件
    // 将匹配文件夹和子目录中的所有文件或路径数组
    // resources: path.resolve(__dirname, '../src/assets/scss/**/*.scss') // 指定单个文件夹和子目录中的所有文件
    // resources: [path.resolve(__dirname, '../src/assets/scss/**/*.scss'),path.resolve(__dirname, '../src/assets/scss/**/*.scss')] // 指定多个文件夹和子目录中的所有文件
  }
}),

4. 运行项目

重新npm run dev ,组件中就可以使用全局变量了。

三、常用全局变量

1. 设置变量

在全局变量文件里面写入变量($),混合(@mixin,括号里面为默认值,可有可无),继承(%)等语法。

// 变量
$color: #ff0;
$bac_color: #222;
$bac-color: #111;

.main {
  color: $color;
  background: $bac_color; /*$bac_color被$bac-color覆盖*/
}

// 混合
@mixin borderRadius($num: 8px) {
  color: $color;
  border-radius: $num;
}

// 继承
%cricle {
  width: 50px;
  height: 50px;
  background: red;
  border-radius: 50%;
}

2. 使用变量

在组建中使用变量($+变量名),混合(@include),继承(@extend)。

.div{
  // 变量
  background: $color;
  // 混合
  @include borderRadius(20px); /*()不传值用默认值8px*/
  // 继承
  @extend %cricle;
}

四、使用全局变量

1. 变量

1、变量以 $ 开头,用来存储一些在css中需要复用的参数;
2、变量存在作用域,内部声明的变量无法在外面使用,外部如需引用内部的变量,可在变量值的后面添加!global声明;
3、变量名中,中划线等同下划线,值会被第二次定义的变量覆盖。
scss代码

$color = #333;
$bac_color = #222;
$bac-color = #111;

.main {
  color: $color;
  background: $bac_color; /*$bac_color被$bac-color覆盖*/
}
/*编译后:*/
.main{
    color : #333;
    background: #111;
}

2. 嵌套

nav {
  ul {list-style: none;}
  li { display: inline-block; }
}
/*编译后:*/
nav ul{list-style: none;}
nav li{display: inline-block;}

3. 引入

1、scss通过 @import 可以把多个文件结合到一起;
2、以 _开头命名的文件不会直接生成为CSS文件,只在使用@import指令的位置被导入;
3、可全局引入或局部引入;
4、scss中引入片段时,可以缺省文件扩展名;
4、css原生的@import会通过额外的HTTP请求获取引入的样式片段,而scss的@import则会直接将这些引入的片段合并至当前CSS文件,并且不会产生新的HTTP请求。

/*_one.scss*/
nav {
  ul {list-style: none;}
  li { display: inline-block; }
}
/*two.scss*/
@import '_one' /*全局导入,缺省后缀*/

.main{
    @import '_one'/*局部导入*/
    color : #333;
    background: #111;
}

4. 混合

1、通过 @mixin 定义一个类或方法,在其它位置通过 @include 引用这个类或方法
2、@mixin 如果没有调用,不会被渲染
3、多个参数时,传参指定参数的名字,可以不用考虑传入的顺序

@mixin border-radius($radius:5px) {  /*设置默认值为5px*/
   border-radius: $radius;
   -ms-border-radius: $radius;
   -moz-border-radius: $radius;
   -webkit-border-radius: $radius;
}
.box {
  @include border-radius(); /*未传参数,默认值为5px*/
}
.box1 {
  @include border-radius(10px); /*传入参数,值为10px*/
}
/*编译后:*/
.box {
   border-radius: 5px;
   -ms-border-radius: 5px;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
}
.box1 {
   border-radius: 10px;
   -ms-border-radius:10px;
   -moz-border-radius: 10px;
   -webkit-border-radius:10px;
}

5. 继承

1、使用%定义一个被继承的样式,它本身不起作用,只用于被其他人继承
2、样式如果没有被继承,不会输出到最终生成的CSS文件
3、注意,不能继承 @extend .box .main 这种连续组合的类,应该写为
@extend .box, .main

%err-color {
    color:red;
}

.errBox{
    @extend %err-color;
    padding: 10px;
}
.errBox2{
    @extend %err-color;
    padding: 5px;
}
/*编译后:*/
.errBox, .errBox2{
    color:red;
}
.errBox{
    padding: 10px;
}
.errBox2{
    padding: 5px;
}

6. if / else / each / for

1、@if 和 @else

@if 条件为真 {
  //code
} @else {
  //code
}

2、 @each
遍历变量所存在的所有数据。

@each $color in red, green, yellow, blue {
  .p_#{$color} { /*插值,第七点会讲到*/
    background-color: #{$color};
  }
}
/*编译后:*/
.p_red { background-color: red; }
.p_green { background-color: green; }
.p_yellow { background-color: yellow; }
.p_blue { background-color: blue; }

3、@for循环
(1) 关键字 through 表示包括终点值这个数,
(2) 关键字 to 不包括终点值这个数。

@for $i from 1 through 3 { /*through  包括3这个终点值*/
  .item-#{$i} { 
     width: 2px * $i;
   }
}
/*编译后:*/
.item-1 {
  width: 2px;
}
.item-2 {
  width: 4xp;
}
.item-3 {
  width: 6px;
}

7. 其他

1、插值
一般我们定义的变量都为属性值,可直接使用,但是如果变量作为属性名称或在某些特殊情况下则必须要以 #{$XXX} 形式使用。

如下,变量作为属性名的情况使用插值的形式使用

@each $color in red, green, yellow, blue {
  .p_#{$color} { /*插值,第七点会讲到*/
    background-color: #{$color};
  }
}

2、注释
(1) 使用//注释的内容编译后不存在
(2) 使用/* */注释的内容编译后会存在css文件中

版权声明:本文为博主原创文章,遵循 CC 4.0 BY 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_45665171/article/details/129830928

在vue项目中使用scss语法的准备步骤-爱代码爱编程

在vue项目中使用scss语法的准备步骤 个人总结:在项目根目录cmd控制台中使用以下命令行,安装vue项目中使用scss的相关依赖;在["项目根目录/build/webpack.base.conf.js"]中的module下的rules里添加配置:在项目根目录cmd控制台中使用以下命令行: 个人总结: 在项目根目录cmd控制台中使用以下命令

如何在Vue项目中使用scss全局变量-爱代码爱编程

首先,需要安装一个loader,sass-resources-loadernpm install sass-resources-loader --save-dev找到vue.config.js文件,如果没有的话,则自己在根目录新建一个即可在文件内编写如下代码:module.exports = { css: { loaderOptions: {

VUE项目中如何使用SCSS-爱代码爱编程

VUE项目中如何使用SCSS 首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言 定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让css更加简洁、适应性更强,可读性更佳,更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、PO

在VUE项目中使用SCSS ,对SCSS的理解和使用(简单明了)-爱代码爱编程

首先要了解什么是CSS 预处理器? SCSS是一种CSS预处理语言   定义了一种新的专门的编程语言,编译后形成正常的css文件,为css增加一些编程特性,无需考虑浏览器的兼容性(完全兼容css3),让css更加简洁、适应性更强,可读性更佳,更易于代码的维护等诸多好处。CSS预处理语言有SCSS (SASS) 和LESS、POSTCSS 那么SCSS和

在vue项目中使用scss经验-爱代码爱编程

1、在assets文件夹下的styles中,文件结构如下: element-ui ele的组件样式element-variables ele主题颜色变量Index 项目全局样式Mixin 混入样式Transition 动画样式Variables 项目样式变量2、重置css样式 Normalize.css是一种CSS reset的替代方案。它在默认

vue项目中使用scss全局变量-爱代码爱编程

vue使用scss全局变量时报错: ValidationError: Invalid options object. Sass Loader has been initialized using an options object that does not match the API schema. 错误原因:ValidationError:选项对象

vue项目中引入 scss-爱代码爱编程

①安装sass 依赖包 ,在cmd界面输入: npm install sass-loader --save-dev npm install node-sass --sava-dev 1.1下载指定版本 npm i -D sass-loader@7.1.0 npm install node-sass --sava-dev ② 在build文

vue 项目中全局引入 scss 方法_tom &的博客-爱代码爱编程

在 vue.config.js 中 编写webpack参数 const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ transpileDependencies: true, css: { loaderOptions: {

vue3项目中使用scss_lalaxuan的博客-爱代码爱编程

新建的项目想要使用scss 在建立项目的时候我已经选择了scss 在main.js中引入了scss文件,样式初始化成功,但是我在我的组件样式中使用设置的变量却报了错。看了好多博客都没用,又安装了node-sass各种报错。最

【vue全家桶】组件系列(一)—组件开发基础-爱代码爱编程

【Vue全家桶】组件系列(一)—组件开发基础 文章目录 【Vue全家桶】组件系列(一)—组件开发基础前言一、注册Vue的组件1.1 注册全局组件1.2 组件的名称1.3 注册局部组件 二、Vue的开发模式三、单

【vue2从入门到精通】vue监听器watch,计算属性computed,方法methods的区别及使用场景_vue2 methods-爱代码爱编程

文章目录 人工智能福利文章前言Vue 监听器 $watch定义及作用示例使用场景 Vue 计算属性 computed定义及作用示例使用场景 Vue 方法 methods定义及作用示例使用场景

使用chatgpt实现数字自增动画_num-爱代码爱编程

num-auto-add:数字自增动画 序言 我们经常在一些好的网站上遇到数字自增的动画效果,为用户提供了更加丰富的交互体验,看起来非常酷。 我之前也有写过,为了方便以后使用,打算将它优化,并上传到npm中。 首