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;

div {
  font-size: $fontSize;
}

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;
    }
}

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。