Sass预处理器

关于scsssass代码格式(及同名的拓展名):

  1. 使用scss拓展名。
  2. scss拓展名(代码格式)与sass肉眼可见的区别是,sass不具有分号和标志缩进的大括号。

命令行

sass <input-file> <output-file>
sass <input-dir>:<output-dir>

变量

$varible: value;

嵌套

div {
    h1 {
        // ...
    }
    p {
        // ...
    }
}

SASS嵌入

// _base.scss
$var: val;

// main.scss
@use 'base';

tag {
    property: $var;
}

混合

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}

.box { @include transform(rotate(30deg)); }

继承

%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

运算

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

https://sass-lang.com/guide


最后更新: 2020年1月14日