遨翔在知识的海洋里----(css之vue中sass基本用法)

npm

cnpm install sass sass-loader node-sass --save-dev //开发环境就可以了

sass scss区别

scss

ul {
    li {
        a {
            color: $body-color;
        }
    }
}

sass

ul
    li
        a
            color: red

style

scss

<style lang="scss">

</style>

sass

<style lang="sass">

</style>

变量

#### 外面声明
$body-color: #00aaee;  
p{
    color: $body-color;
}

#### 内部声明
nav {
    $width: 100px;
    width: $width;
    color: $body-color;
    border: 1px solid #ccc;
}

嵌套

ul {
    li {
        a {
            color: $body-color;
        }
    }
}

选择器

.article {
    //后续兄弟
    ~ article {
        border-top: 1px solid #ccc;
    }
    //子级
    > section {
        background: #eee;
    }
    //当前元素的下一个兄弟
    + section {
        background: #eee;
    }
    //父级伪类
    &:hover {
        background-color: red;
    }
}

继承

.error {
    border: 1px solid red;
    background-color: #fdd;
}
.seriousError {
    @extend .error;
    border-width: 3px;
}

等同于

.seriousError {
    border: 1px solid red;
    background-color: #fdd;;
    border-width: 3px;
}

示例

实现一个button，cc-button表示基本样式，cc-button--success,cc-button--danger表示不同类型，显示不同样式

特殊api

1. @content;表示的是类里面的样式内容
2. @each后面接的是每次循环出来的item, in 后面的()里面的是要被循环的量
3. $b:'cc'; .#{$B},就是拼接等同于.cc

mixin.scss

// 全局配置
$namespace:'cc';

// 基本色鲜艳
$--color-success:#7CCD7C !default;
$--color-danger: #FF0000 !default;

@mixin b($block){
  $B: $namespace + '-' + $block;
  .#{$B} {
    @content;
  }
}

@mixin commonType($type){
    @if $type== 'success' {
    $type: $--color-success;
  }

  @if $type== 'danger' {
    $type: $--color-danger;
  }
  color: $type;
  border: 1px solid $type;
}

button.scss

@import './mixin.scss';

@include b(button){
  cursor: pointer; 
  align-items: center;  
  display: inline-flex; 
  vertical-align: middle;
  outline: 0; 
  border-radius: 6px; 
}

@each $type in (success, warning, danger){
  .cc-button--#{$type}{
    @include commonType($type)
  }
}

scss转换后的css

.cc-button {
  cursor: pointer;
  align-items: center;
  display: inline-flex;
  vertical-align: middle;
  outline: 0;
  border-radius: 6px;
}
.cc-button--success {
  color: #7CCD7C;
  border: 1px solid #7CCD7C;
}
.cc-button--danger {
  color: #FF0000;
  border: 1px solid #FF0000;
}

效果