在VUE项目中使用SCSS ，对SCSS的理解和使用（简单明了）

怼烎@ 2021-09-15 16:42 660阅读 0赞

**首先要了解什么是CSS 预处理器？ SCSS是一种CSS预处理语言**

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

**那么SCSS和SASS 有什么区别呢**

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

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

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

这篇文章是记录的在VUE项目中SCSS的使用

**vue项目上安装SCSS和开发入门**

① 使用vue-cli模板创建新项目：vue init webpack myvue

② 安装sass 依赖包 ，在cmd界面输入：

npm  install  sass-loader  \--save-dev

npm install  node-sass  \--sava-dev

③ 在build文件夹下的webpack.base.conf.js的rules里面添加配置

test:  / \\.scss$ / ,

loaders: \[ 'style' ,  'css' ,  'sass' \]

④ 使用scss时候在所在的style样式标签上添加lang=”scss”即可应用对应的语法，否则报错

⑤ scss使用测试：如下测试修改字体颜色

< style  lang = "scss" >

$color : red ;

div  \{  color : $color ;\}

</ style >

**那么进一步了解SCSS 的使用语法 ??**

SCSS语法：

·注释

**注释分为三种：/\* \*/css中显示，//css中不显示，/\*重要注释!\*/压缩不会被删掉。**

**·@import 命令导入外部sass、scss、css文件**

< style  lang = "scss" >

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

.myText  \{

border : 1px  solid  red ;

</ style >

·变量

声明变量的语法是：$+变量名+：+变量值；如下

$color : red ;  //声明变量 $color

**区分默认变量**

默认变量只需要在变量值后加上 !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 关键词可以使得局部变量变成全局变量；**

body  \{

.father01  \{

width : 200px ;

height : 200px ;

$border : 1px  solid  red  !global;  //使用global关键词将$border变为了全局变量

border : $border ;

.father02  \{

width :  300px ;

height : 300px ;

border : $border ;  //使用全局变量

·变量嵌套引用：即字符串插值，需要使用 \#\{\} 来进行包裹

$left : left ;

.father02  \{

width :  300px ;

height : 300px ;

border : $border ;  //使用全局变量

border- \#\{$left\} : 2px  solid  purple ;  //使用字符串插值之前必须先声明

·变量计算

$left : left ;

.father02  \{

width :  300px ;

height : 300px ;

border : $border ;  //使用全局变量

border- \#\{$left\} : 2px  solid  purple ;  //使用字符串插值之前必须先声明

·嵌套

选择器嵌套不多说了

**属性嵌套（有相同属性前缀）如下**

border:\{

color : red ;

width : 5px ;

style : solid ;

**在嵌套时候可以使用 & 来引用父元素**

.container  \{

& > p  \{    //可以编译成CSS的 .container>p \{\} 效果

color : purple ;

·继承

** 继承 .class 使用 @extend**

.container  \{

color : purple ;

border : 2px  dashed  purple ;

.myText  \{

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

font-size :  22px ;

·SCSS占位符 %

**使用% 声明的代码块，如果不被@extend调用的话就不会被编译。编译出来的代码会将相同的代码合并在一起，代码变得十分简洁。**

%m5  \{  background-color :  lightblue ;\}

.P1  \{  @extend  %m5 ; \}

·重复代码块，使用混合@mixin命令定义，以及使用@include调用该mixin

@mixin  normalStyle  \{

//使用@mixin命令定义可重复使用的代码块

width : 300px ;

height : 100px ;

color : black ;

background-color : lightblue ;

.container  \{

@include  normalStyle ;

//使用@include 命令引用@mixin定义的代码块

** 在使用@mixin和@include时，传入参数和默认值**

@mixin  normalStyle ( $width , $height , $color , $defaultValue : orange ) \{

width : $width ;

height : $height ;

color : $color ;

background-color : $defaultValue ;

.container  \{

@include  normalStyle ( 300px , 100px , green , lightgray );

**SCSS使用编程式方法 **

·条件语句

.container  \{

p  \{

@if  1 \+ 1 < 3  \{

border : 1px  solid  blue ;

\}  @else  \{

border : 1 ps  dashed  palevioletred ;

·SCSS中的三种循环

**for循环**

在sass中的@for循环有两种方式：

①@for $i from <start> through <end>

②@for $i from <start> to <end>

其中$i表示变量，start表示开始值，end表示结束值；

through表示包括end这个数值；to表示不包括end这个数值；

**while循环**

只要@while后面的条件为true就会执行，直到表达式值为false时停止循环；

**each  in循环**

就是去遍历一个列表，然后从列表中取出对用值；他的指令形式为：@each $var in <list>($var为变量值，list为sassscript表达式）

//for 循环

@for  $i  from  1  to  5  \{

.item- \#\{$i\}  \{

border : \#\{$i\} px  solid ;

//while 循环

$m : 8 ;

@while  $m  >  0  \{

.items- \#\{$m\}  \{

width : 2em \* $m ;

$m : $m  \-  2  ;

//这里可以对$m进行运算 让它每次都减去2

//each 语法

@each  $item  in  class01 , class02 \{  //$item就是遍历了in关键词后面的类名列

. \#\{$item\}  \{

background-color : purple ;

//会编译成 .class01 , .class02 \{background-color:purple;\}

·使用@function 自定义函数及使用

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

@return  $sn \* 2 ;

.myText  \{

border : 1px  solid  red ;

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

·可以直接使用SCSS内置的颜色函数，

.myText  \{

color : black ;

& :hover \{

//以下的lighten()、darken()等是SCSS内置的颜色函数

color : lighten ( \#cc3 ,  10% );  // \#d6d65c颜色变浅

color : darken ( \#cc3 ,  10% );  // \#a3a329颜色加深

color : grayscale ( \#cc3 );  // \#d6d65c

color : complement ( \#cc3 );  // \#a3a329

在VUE项目中使用SCSS ，对SCSS的理解和使用（简单明了）

发表评论取消回复

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

相关阅读

相关 vue在scss中使用js的变量

相关在VUE项目中使用SCSS ，对SCSS的理解和使用（简单明了）

相关在vue项目中使用scss及遇到的问题

相关 vue -cli中使用Scss

相关 VUE_vue脚手架中使用scss

相关 vue项目中使用scss

相关 vue 使用scss

相关 vue中全局使用scss

相关在VUE项目中使用SCSS ，对SCSS的理解和使用（简单明了）

相关 vue 使用sass/scss