首先要了解什么是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:1ps 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
   }
}

参考:https://blog.csdn.net/zhouzuoluo/article/details/81010331

如何在VUE项目中使用SCSS的更多相关文章

  1. 如何在Vue项目中使用Typescript

    0.前言 本快速入门指南将会教你如何在Vue项目中使用TypeScript进行开发.本指南非常灵活,它可以将TypeScript集成到现有的Vue项目中任何一个阶段. 1.初始化项目 首先,创建一个新 ...

  2. 如何在VUE项目中添加ESLint

    如何在VUE项目中添加ESLint 1. 首先在项目的根目录下 新建 .eslintrc.js文件,其配置规则可以如下:(自己小整理了一份),所有的代码如下: // https://eslint.or ...

  3. 如何在Vue项目中给路由跳转加上进度条

    1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...

  4. 转:如何在Vue项目中使用vw实现移动端适配

    https://www.w3cplus.com/mobile/vw-layout-in-vue.html 有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flex ...

  5. 如何在Vue项目中引入jQuery?

    假设你的项目由vue-cli初始化 (e.g. vue init webpack my-project). 在你的vue项目目录下执行: npm install jquery --save-dev 打 ...

  6. 如何在Vue项目中使用vw实现移动端适配(转)

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...

  7. 如何在Vue项目中使用vw实现移动端适配

    有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在< 使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着 viewport 单位 ...

  8. 如何在Vue项目中,通过点击DOM自动定位VScode中的代码行?

    作者:vivo 互联网大前端团队- Youchen 一.背景 现在大型的 Vue项目基本上都是多人协作开发,并且随着版本的迭代,Vue 项目中的组件数也会越来越多,如果此时让你负责不熟悉的页面功能开发 ...

  9. 在vue项目中使用scss

    1.首先安装依赖 npm install node-sass sass-loader --save-dev 2.找到build中webpack.base.conf.js,在rules中添加scss规则 ...

随机推荐

  1. layui中load具体用法

    遮盖窗体,demo: layer.load(,{ // content: "加载中...", shade: [0.4,'#000'], //0.1透明度的白色背景 time:* } ...

  2. 初识 SpringData - JPA(一)

    概念 什么是 JPA JPA(Java Persistence API ): Java 持久化规范的 API .是 SUN 官方推出的一套基于 ORM 的规范,内部是由一系列的接口和抽象类构成.其提供 ...

  3. NX二次开发-UFUN求两个对象最短距离UF_MODL_ask_minimum_dist

    NX9+VS2012 #include <uf.h> #include <uf_modl.h> #include <uf_ui.h> UF_initialize() ...

  4. hexo next主题深度优化(三),引入require.js,适配pjax。

    文章目录 require.js的好处, hexo next中加入require.js 新建一个main.js作为所有js的入口 pjax的require.js实现 关于require js适配过程中报 ...

  5. 漏洞验证系列--MongoDB未授权访问

    本系列文章旨在对于有一定网络安全基础的人员,在日常工作中扫描出来的各种漏洞,如何进行验证,以区分该漏洞是否存在或是扫描器误报.请勿应用非法途径. 本漏洞是由于MongoDB未设置访问权限,用户可以直接 ...

  6. 如何在windows上把你的项目提交到github(转载)

    (1)如何在windows上把你的项目提交到githubhttp://michaelye1988.iteye.com/blog/1637951 (2)github错误提示:fatal:remote o ...

  7. Python-docx库的使用

    from docx import Document from docx.shared import Inches document = Document() document.add_heading( ...

  8. linux 网络监控软件nethogs iftop

    1.nethogs yum -y install nethogs 装上了这个工具之后,使用起来就非常简单了.敲入nethogs 就会给出所有的信息.看下面的例子. root@ubuntu2:~# ne ...

  9. enumrate用法

    转自*https://www.runoob.com/python/python-func-enumerate.html*侵删 描述 enumerate() 函数用于将一个可遍历的数据对象(如列表.元组 ...

  10. 2019-2020 Saint-Petersburg Open High School Programming Contest (SpbKOSHP 19)

    2019-2020 Saint-Petersburg Open High School Programming Contest (SpbKOSHP 19) easy: ABFGHI medium-ea ...