SCSS 的基本使用

现在最常用的 CSS 处理器有 Less，Sass。本人比较常用Sass，选择什么看自己，主要数为了提高开发效率。今天就将一些基本用法在这里分享给大家，有不足的希望在评论区里补充哦~

首先，用一句话说明 Sass、Scss的关系：Sass就是css的预处理器，Scss是Sass3版本中引入的新语法特性。

然后，我们来看怎么使用呢？像日常一样，需要安装npm 包再使用哦：cnpm i -S node-sass sass-loader，当然这里你是用npm 、yarn 安装都是可以的！

我们一般在组件中这样使用，在 style 标签上加 lang="scss" 这样就style 里需要支持 scss 语法。

<style lang="scss" scoped>
  ...        
</style>

好啦，到这里我们就可以开始使用 scss 的魔法啦~

• 嵌套 
  • 选择器嵌套 例如 p span{color:#fff;}

    p{
           span {
               color:#fff;
           }
     }

  • 属性嵌套 例如：p {font-size:16px}

     p{
            font: {
                size: 16px;
            }
        }

  • &：在嵌套的代码块内，使用&引用父元素 例如：a:hover{color:#ddd}

    a{
            &:hover{
                color: #ddd;
            }   
        }

• 变量 ：SASS允许使用变量，所有变量以$开头

  $global-bg:#7a7a7a;
      a{
          &:hover{
              color: $global-bg;
          }   
      }

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

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

• 继承：SASS允许一个选择器，继承另一个选择器，class2要继承class1，就要使用@extend命令：

  .class1 {
  　　　　border: 1px solid #ddd;
  　　}
  .class2 {
  　　　　@extend .class1;
  　　　　font-size:120%;
  　　}

• 混入 @mixin @include
  • 使用@mixin命令，定义一个代码块。

    @mixin left($value: 10px) {
    　　　　float: left;
    　　　　margin-right: $value;
    　　}

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

    div {
    　　　　@include left(20px);
    　　}

• 引入 @import 、Partials
  • @import命令，用来插入外部文件。

    @import "path/filename.scss";

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

    @import "foo.css";

  • 文件名前添加下划线，这样会告诉 Sass 不要编译这些文件。例如，将文件命名为 _color.scss，便不会编译成 _color.css 文件。但导入语句中却不需要添加下划线（注意，不可以同时存在添加下划线与未添加下划线的同名文件，否则添加下划线的文件将会被忽略。）
• +、-、*、/、%：SASS允许在代码中使用算式

  body {
  　　　　margin: (14px/2);
  　　　　top: 50px + 100px;
  　　　　right: $var * 10%;
  　　}

• ! default !global
  • !default 变量的默认值，如果未被重新赋值
  • !global 将变量提升为全局变量
• 条件语句 @if @if else @else

  p {
  　　　　@if 1 + 1 == 2 { border: 1px solid; }
  　　　　@if 5 < 3 { border: 2px dotted; }
  　　}
  
      @if lightness($color) > 30% {
  　　　　background-color: #000;
  　　} @else {
  　　　　background-color: #fff;
  　　}

• 循环语句 @for @while @each

  @for $i from 1 to 10 {
  　　.border-#{$i} {
  　　　　border: #{$i}px solid blue;
  　　}
  }
  
  $i: 6;
  @while $i > 0 {
  　　.item-#{$i} { width: 2em * $i; }
  　　$i: $i - 2;
  }
  
  @each $member in a, b, c, d {
  　　.#{$member} {
  　　　　background-image: url("/image/#{$member}.jpg");
  　　}
  }

  @for 的使用方法：

  • @for $i from <start> through <end> （包括 end 这个数）
  • @for $i from <start> to <end> （不包括 end 这个数）

1. 1. $i 表示变量
   2. start 表示起始值
   3. end 表示结束值

 

• 自定义函数 @function

  @function double($n) {
  　　@return $n * 2;
  }
  
  #sidebar {
  　　width: double(5px);
  }

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

  lighten(#cc3, 10%) // #d6d65c
  darken(#cc3, 10%) // #a3a329
  grayscale(#cc3) // #808080
  complement(#cc3) // #33c