Sass基础学习

编码规则

建议代码开头位置显式定义 @charset "encoding-name"; ，让SASS能够按照给定的字符集编译输出。

变量

$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

body {
   
  font: 100% Helvetica, sans-serif;
  color: #333; }

嵌套

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

nav ul {
   
  margin: 0;
  padding: 0;
  list-style: none; }
nav li {
   
  display: inline-block; }
nav a {
   
  display: block;
  padding: 6px 12px;
  text-decoration: none; }

引入

// _reset.scss
html, body, ul, ol {
  margin:  0;
  padding: 0;
}

// base.scss
@import 'reset';
body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

html, body, ul, ol {
   
  margin: 0;
  padding: 0; }

body {
   
  font: 100% Helvetica, sans-serif;
  background-color: #efefef; }

混合

@mixin border-radius($radius) {
          border-radius: $radius;
      -ms-border-radius: $radius;
     -moz-border-radius: $radius;
  -webkit-border-radius: $radius;
}

.box {
  @include border-radius(10px);
}

.box {
   
  border-radius: 10px;
  -ms-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px; }

继承

// 这段代码不会被输出到最终生成的CSS文件，因为它没有被任何代码所继承。
%other-styles {
  display: flex;
  flex-wrap: wrap;
}

// 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承。
%message-common {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.message {
  @extend %message-common;
}

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

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

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

.message, .success, .error, .warning {
   
  border: 1px solid #ccc;
  padding: 10px;
  color: #333; }

.success {
   
  border-color: green;