vue+webpack+sass

一、引入依赖

npm i sass sass-loader -D

二、配置webpack的loader

{
    test: /\.sass$/,
    loaders: ['style', 'css', 'sass']
}

三、使用

<style lang="scss">
@import '*.scss';
</style>

四、知识点

 1、变量

$fontSize: 20px;
$sideBarWidth: 210px;

div {
  font-size: $fontSize;
  width: calc(100% - #{$sideBarWidth});
}

2、嵌套

.out {
    color: red;
    .center {
        color: green;
        .in {
            color: blue;
        }
    }
}

3、mixin

@mixin font($family,$size,$weight) {
    font-family: $family;
    font-size: $size;
    font-weight: $weight;
}

.out {
    @include font('微软雅黑', 30px, bold);
}

@mixin transition($prop,$time) {
    -webkit-transition: $prop $time;
    -moz-transition: $prop $time;
    -ms-transition: $prop $time;
    -o-transition: $prop $time;
    transition: $prop $time;
}

.in {
    width: 100px;
    height: 100px;
    background: red;
    @include transition(width, 2s);
}

.in:hover {
    width: 300px;
}

4、扩展

.out {
    width: 100px;
    height: 30px;
    background: deepskyblue;
    color: #000;
    border-radius: 5px;
}

.in {
    @extend .out;
    background: yellow;
    color: deeppink;
}

5、函数

$count: 10;
$designWidth: 640px;

@function px2rem($px) {
    @return $px * $count / $designWidth * 1rem;
}

.out {
    width: px2rem(100px);
    height: px2rem(100px);
    background-color: red;
}

6、表达式

@for $i from 1 through 6 {
    .out > .in:nth-of-type(#{$i}) {
        height: 5px;
        background-color: green;
        border-bottom: 1px solid red;
    }
}

$someEvent: false;

@if $someEvent {
    .center {
        width: 50px;
        height: 50px;
        background-color: yellow;
    }
} @else {
    .center {
        width: 50px;
        height: 50px;
        background-color: blue;
    }
}

五、node-sass安装

一、本地指定.node文件
    1、下载node-sass：https://github.com/sass/node-sass/releases/download/v5.0.0/win32-x64-83_binding.node
    2、安装：npm i -D node-sass@5.0.0 --sass_binary_path=D:\files\win32-x64-72_binding.node
二、本地编译没有python环境
    1、网络正常的情况下安装node-sass是不需要python环境的，如果拉不下来对应的binding.node就会进入尝试【本地编译】，
      然后会检查是否具备的条件，需要python环境，报的错一般就会提示python没有安装，安装下面两个包可以快速解决
      （不过需要注意：拉包的方式需要cmd用管理员模式打开! ! !）：
        npm install -g node-gyp
        npm install --global --production windows-build-tools