当前位置:   article > 正文

VUE中使用SCSS ,SCSS的使用_vue scss

vue scss

什么是scss?什么是css预处理器?sass和scss的区别。

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-cli模板创建新项目:vue init webpack myvue

② 安装sass 依赖包 ,在cmd界面输入:

  1. npm  install sass-loader --save-dev
  2. npm install node-sass --sava-dev

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

  1. {
  2. test: / \.scss$ / ,
  3. loaders: [ 'style' , 'css' , 'sass' ]
  4. }

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

CSS 的使用语法

  1. 注释
    1. 1.//注释内容
    2. 2./*注释内容*/
    3. 3./*!注释内容*/

    1.//注释内容

    在Sass中,这种注释方式在编译后不会保留下来。

    2./*注释内容*/

    在Sass中,这种注释方式在编译之后会保留下来。因为这种注释方式跟CSS注释方式是相同的,所以编译后会保留下来。

    3./*!注释内容*/

    我们都知道压缩工具会删除所有的注释,有些时候为了保留一些版权声明的注释说明,可以采用这个方式注释声明。

  2. 导入外部文件
    1. < style lang = "scss" >
    2. @import './test.scss' ; //导入外部scss文件
    3. .myText {
    4. border : 1px solid red ;
    5. }
    6. </ style >
  3. 变量
    1. 全局变量
      1. $height : 200px ; //全局变量声明不在大花括号内
      2. $bgcolor : blue ;
      3. body {
      4. .father01 { //嵌套
      5. width : $width ;
      6. height : $height ;
      7. $border : 1px solid red ; //局部变量是声明在元素内的
      8. border : $border ;
      9. $bgcolor : purple ; //全局变量和局部变量名一致时,调用局部变量进行覆盖
      10. background-color : $bgcolor ;
      11. }
      12. }

      全局变量是声明在元素大括号外面的变量,局部变量会覆盖全局变量

    2. 局部变量
      1. body {
      2. .father01 {
      3. width : 200px ;
      4. height : 200px ;
      5. $border : 1px solid red !global; //使用global关键词将$border变为了全局变量
      6. border : $border ;
      7. }
      8. .father02 {
      9. width : 300px ;
      10. height : 300px ;
      11. border : $border ; //使用全局变量
      12. }
      13. }

      局部变量是声明在元素内的变量,后面添加!global 会提升为全局变量

    3. 默认变量
      1. $color : red !default ; //声明默认变量 $color
      2. $color : purple ; //根据需求覆盖默认变量
      3. .father01 {
      4. color : $color ;
      5. }
  4. 变量嵌套引用  即字符串插值,需要使用 #{} 来进行包裹
    1. $left : left ;
    2. .father02 {
    3. width : 300px ;
    4. height : 300px ;
    5. border : $border ; //使用全局变量
    6. border- #{$left} : 2px solid purple ; //使用字符串插值之前必须先声明
    7. }
  5. 嵌套
    1. 除了选择器嵌套外,还可以使用&来引用父元素
      1. .container {
      2. & > p { //可以编译成CSS的 .container>p {} 效果
      3. color : purple ;
      4. }
      5. }
  6. 继承
    1. .container {
    2. color : purple ;
    3. border : 2px dashed purple ;
    4. }
    5. .myText {
    6. @extend .container; //这里将继承.container类的所有样式
    7. font-size : 22px ;
    8. }
  7. 占位符 
    1. %m5 { background-color : lightblue ;}
    2. .P1 { @extend %m5 ; }
    使用% 声明的代码块,如果不被@extend调用的话就不会被编译。编译出来的代码会将相同的代码合并在一起,代码变得十分简洁。
  8. 混入   使用混合@mixin命令定义,以及使用@include调用该mixin
    1. @mixin normalStyle {
    2. //使用@mixin命令定义可重复使用的代码块
    3. width : 300px ;
    4. height : 100px ;
    5. color : black ;
    6. background-color : lightblue ;
    7. }
    8. .container {
    9. @include normalStyle ;
    10. //使用@include 命令引用@mixin定义的代码块
    11. }

    在使用@mixin和@include时,还可以传入参数和默认值

    1. @mixin normalStyle ( $width , $height , $color , $defaultValue : orange ) {
    2. width : $width ;
    3. height : $height ;
    4. color : $color ;
    5. background-color : $defaultValue ;
    6. }
    7. .container {
    8. @include normalStyle ( 300px , 100px , green , lightgray );
    9. }
  9. 条件语句
    1. .container {
    2. p {
    3. @if 1 + 1 < 3 {
    4. border : 1px solid blue ;
    5. } @else {
    6. border : 1 ps dashed palevioletred ;
    7. }
    8. }
    9. }
  10. 函数
    1. @function double ( $sn ){ //SCSS允许自定义函数
    2. @return $sn * 2 ;
    3. }
    4. .myText {
    5. border : 1px solid red ;
    6. width : double ( 200px ); //使用在SCSS中自定义的函数
    7. }
  11. 循环

        1.for循环

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

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

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

                其中$i表示变量,start表示开始值,end表示结束值;

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

        2.while循环

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

        3.each  in循环

                就是去遍历一个列表,从列表中取出对应值;他的指令形式为:@each $var in <list>

  1. /for 循环
  2. @for $i from 1 to 5 {
  3. .item- #{$i} {
  4. border : #{$i} px solid ;
  5. }
  6. }
  7. //while 循环
  8. $m : 8 ;
  9. @while $m > 0 {
  10. .items- #{$m} {
  11. width : 2em * $m ;
  12. }
  13. $m : $m - 2 ;
  14. }
  15. //这里可以对$m进行运算 让它每次都减去2
  16. //each 语法
  17. @each $item in class01 , class02 { //$item就是遍历了in关键词后面的类名列
  18. . #{$item} {
  19. background-color : purple ;
  20. }
  21. }
  22. //会编译成 .class01 , .class02 {background-color:purple;}
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/82565
推荐阅读
相关标签
  

闽ICP备14008679号