html怎么引入scss,关于sass/scss的引用和使用

快来打我* 2022-10-11 13:38 13阅读 0赞

在最近的项目中，配合vue，为了让css语言更加易懂好写，我使用了scss，包括在上一篇文章中提到了运用scss来做px2rem的转换，scss是一种css的预处理语言，这里总结他的引用和使用方法，有做新的东西也会及时更新。

首先我们先来看看scss和sass的区别：

· 文件扩展名不同，文件后缀分别是“.scss”和“.sass”

· sass是以严格缩进语法规则来编写代码的，不包括大括号和分号，而scss的语法和css书写语法类似；sass的安装和使用不细说了；

· scss是sass3.0引入的语法，可以理解scss是sass的一个升级版本，是一种SCSS-like语言，弥补了sass和css之间的鸿沟；

安装和引入

项目中我们很自然而然地选择scss，首先是在vue中安装scss

npm下载：npm install -D sass-loader node-sass

然后引入~，这里我们用vue-cli3，所以十分方便，开箱即用。只需要在

div\{

color:red;

span\{

color:green;

\}

\}

如果要引入外联的样式，在main.js中import就好import './assets/css/my-style.scss'

或者在内联的css中进入scss，如下操作：

@import './test.scss'; //导入外部scss文件

.myText \{

border:1px solid red;

\}

使用tips

介绍一篇很棒的tips，scss使用

首先我用得最多的应该是他的嵌套选择器功能~，写起来比普通css舒服太多=-=

另外关于全局变量和局部变量，以下需要注意的tips：

默认变量

默认变量只需要在变量值后加上 !default , 用来设置默认值 ，对默认变量进行重新声明可以实现覆盖默认值；如$color:red !default; //声明默认变量 $color

$color:purple; //根据需求覆盖默认变量

.father01 \{

color:$color;

\}

区分全局变量和局部变量

全局变量是元素外声明的变量，局部变量是在元素里声明的变量，重复声明时局部变量会覆盖全局变量；$height:200px; //全局变量声明不在大花括号内

$bgcolor:blue;

body \{

.father01 \{  //嵌套

width:$width;

height:$height;

$border:1px solid red; //局部变量是声明在元素内的

border: $border;

$bgcolor:purple; //全局变量和局部变量名一致时，调用局部变量进行覆盖

background-color: $bgcolor;

\}

\}

局部变量值后加上 !global 关键词可以使得局部变量变成全局变量；

继承

继承 .class 使用 @extend.container \{

color:purple;

border:2px dashed purple;

\}

.myText \{

@extend .container; //这里将继承.container类的所有样式

font-size: 22px;

\}

·使用@function 自定义函数及使用@function double($sn)\{ //SCSS允许自定义函数

@return $sn\*2;

\}

.myText \{

border:1px solid red;

width:double(200px); //使用在SCSS中自定义的函数

\}

发表评论取消回复

表情：

评论列表（有 0 条评论，13人围观）

还没有评论，来说两句吧...

相关阅读

相关 html怎么引入JavaScript代码

![4deb07f1c538749b70c1d7203b782ea7.jpeg][] 学习了HTML入门教程之后，我们都知道HTML页面是静态的，要实现某些动态效果，就要引入

骑猪看日落/ 2024年03月26日 16:05/ 0 赞/ 96 阅读

相关 vue中引入scss报错的问题

以前一直在用less，没用过scss，这次写一个项目打算用scss来写的然后发现了一些坑正常我们都是在项目中直接安装scss的 > npm install st

我会带着你远行/ 2023年06月27日 12:51/ 0 赞/ 16 阅读

相关 html之css关于引入样式的优先级

结论： `!important>内联样式>内部样式>外部样式` 引入css样式的方法行内式（内联，内嵌） <p style=“font-size:2

Dear 丶/ 2023年06月23日 02:49/ 0 赞/ 25 阅读

相关 python怎么引入,python 怎么引入类

![8e3c39360cc7b2f1bf67a68db0391fe3.png][] 一、导入单个类from fun import Dog dog=Dog('husike')

逃离我推掉我的手/ 2023年01月17日 04:52/ 0 赞/ 164 阅读

相关 vue项目全局中引入scss

一、概述有一个scss文件，需要应用到每一个vue文件。如果每一个vue文件写重复代码，浪费精力。关于scss的安装，请参考链接：[https://www.cnbl

朴灿烈づ我的快乐病毒、/ 2022年10月15日 11:52/ 0 赞/ 275 阅读

相关 html怎么引入scss,关于sass/scss的引用和使用

在最近的项目中，配合vue，为了让css语言更加易懂好写，我使用了scss，包括在上一篇文章中提到了运用scss来做px2rem的转换，scss是一种css的预处理语言，这里总

快来打我*/ 2022年10月11日 13:38/ 0 赞/ 14 阅读

相关 vue引入外部js文件和scss文件

最近在做一个vue项目，已经有一段时间了。之前对在vue项目如何引入外部的js文件和scss文件一片空白。网上百度也是鱼龙混杂,很少有用的东西。后来自己通过一个线上项目学习到了

￡神魔★判官ぃ/ 2022年04月18日 02:38/ 0 赞/ 454 阅读

相关 SCSS和LESS的使用

一. Sass/Scss、Less是什么? Sass (Syntactically Awesome Stylesheets)是一种动态样式语言，Sass语法属于缩排语法，

爱被打了一巴掌/ 2022年02月18日 09:17/ 0 赞/ 446 阅读

相关 vue项目引入scss、elementui使用全局scss修改主题色，vue的路由引入；less的使用

一、vue项目引入scss [https://blog.csdn.net/Ag\_wenbi/article/details/87799557][https_blog.csd

布满荆棘的人生/ 2022年01月22日 05:49/ 0 赞/ 1478 阅读

相关 vue使用scss，并且全局引入公共scss样式

要如何在我们的vue项目中全局引入scss文件呢？ 1. `main.js`可以直接`import css`文件，而不可以直接`import scss`文件。 2. 在i

Myth丶恋晨/ 2022年01月17日 00:39/ 0 赞/ 808 阅读