Vue项目使用SCSS

目录

 

前言

安装

基本用法

变量

计算功能

嵌套

注释

代码的重用

继承

Mixin

颜色函数

插入文件

高级用法

---

前言

安装

1.基于webpack模板创建一个Vue项目

vue init webpack scsspractice

 安装 sass。sass-loader的版本过高导致的编译错误，当前最高版本是8.x，需要指定到7.3.1

npm install sass-loader@7.3.1 --save-dev

npm install --save-dev node-sass

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

{

test: /\.scss$/,

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

}

4.修改css样式

<style scoped lang="scss">

  .div1{

    width: 300px;

    height: 100px;

    line-height: 100px;

    background-color: aquamarine;

    opacity: 50%;

    margin: 0 auto;

    .p1{

      color: tomato;

      font-size: 32px;

    }

  }

</style>

运行效果如下：

 

基本用法

变量

SASS允许使用变量，所有变量都是以$开头。

$blue:red;

.p1{

    color: $blue;

    font-size: 32px;

}

如果变量需要镶嵌在字符串之中，就必须需要写在#{}之中。

$side : left;

.rounded {

border-#{$side}-radius: 5px;

}

计算功能

body {

margin: (14px/2);

top: 50px + 100px;

right: $var * 10%;

}

嵌套

  .div1{

    width: 300px;

    height: 100px;

    line-height: 100px;

    background-color: aquamarine;

    opacity: 50%;

    margin: 0 auto;

    .p1{

      color: $blue;

      font-size: 5px + 5px +5px +5px +5px + 5px;

    }

  }

属性也可以嵌套，比如border-color属性，可以写成：

p {

border: {

color: red;

}

}

在嵌套的代码块内，可以使用&引用父元素。比如a:hover伪类，可以写成：

a {

&:hover { color: #ffb3ff; }

}

注释

SASS共有两种注释风格。

 

标准的CSS注释 /* comment */ ，会保留到编译后的文件。

 

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

 

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

/*!

　　　　重要注释！

*/

代码的重用

继承

SASS允许一个选择器，继承另一个选择器。比如下面的选择器 .div2继承了.div1

  .div1{

    width: 300px;

    height: 100px;

    line-height: 100px;

    background-color: aquamarine;

    opacity: 50%;

    margin: 0 auto;

 

  }

  .div2{

    @extend .div1;

    margin-top: 10px;

    font-size: 50px;

  }

Mixin

Mixin有点像C语言的宏（macro），是可以重用的代码块。

 

使用@mixin命令，定义一个代码块。

@mixin left {

float: left;

margin-left: 10px;

}

使用@include命令，调用这个mixin。

div {

@include left;

}

mixin的强大之处，在于可以指定参数和缺省值。

@mixin left($value: 10px) {

float: left;

margin-right: $value;

}

使用的时候，根据需要加入参数：

div {

@include left(20px);

}

颜色函数

SASS提供了一些内置的颜色函数，以便生成系列颜色。

lighten(#cc3, 10%) // #d6d65c

darken(#cc3, 10%) // #a3a329

grayscale(#cc3) // #808080

complement(#cc3) // #33c

插入文件

@import命令，用来插入外部文件。

@import "path/filename.scss";

如果插入的是.css文件，则等同于css的import命令。

@import "foo.css";

高级用法

高级用法有条件、循环以及自定义函数，日后有这方面的需求再去查阅资料。