vue+webpack+sass

一、引入依赖

npm i node-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;
   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 {
     100px;
    height: 100px;
    background: red;
    @include transition(width, 2s);
}

.in:hover {
     300px;
}

4、扩展

.out {
     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 {
     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 {
         50px;
        height: 50px;
        background-color: yellow;
    }
} @else {
    .center {
         50px;
        height: 50px;
        background-color: blue;
    }
}