在VUE项⽬中使⽤SCSS，对SCSS的理解和使⽤（简单明
了）
⾸先要了解什么是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⽂件夹下的f.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 {
css变量.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 {
@if1 + 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 from1to5 {
.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允许⾃定义函数
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论