css (Cascading Style Sheets)

x{
    /* 宽度设置 */
    width: calc(100%-1em),
    width: calc(100% / 6);
    width: calc(1.5rem + 3vw);
}

// 申明变量
$height: 500;
p{
   height: $height;
}
h1{margin: 0 0 $height 0;}

// 1
#main {
    p {
        a {
            color: red;
        }
    }
    .name{margin:0;}
    h1{font-size: 2px;}
}

// 编译为 css
#main p a{color: red;}
#main .name{margin:0;}
#main h1{font-size: 2px;}


// 2
// 属性嵌套
nav {
  border: {
  style: solid;
  width: 1px;
  color: #ccc;
  }
}
// => 
nav {
  border-style: solid;
  border-width: 1px;
  border-color: #ccc;
}

#content aside {
  color: red;
  body.ie & { color: green }
}

/*编译后*/
#content aside {color: red};
body.ie #content aside { color: green }

nav, aside {
  a {color: blue}
}

/*编译后*/
nav a, aside a {color: blue}

//通过选择器继承继承样式
.error {
  border: 1px solid red;
  background-color: #fdd;
}
.seriousError {
  @extend .error;
  border-width: 3px;
}