SCSS 教程

$ 的使用

渲染效果

$primary-color: #333;

body {
  color: $primary-color;
}

body { color: #333; }

& 的使用，使用当前容器名称

a { font-weight: bold; &:hover { text-decoration: underline; } body.firefox & { font-weight: normal; } }

#main { color: black;
 &-sidebar { border: 1px solid; } a { font-weight: bold; &:hover { color: red; } } }

a { font-weight: bold; } a:hover { text-decoration: underline; } body.firefox a { font-weight: normal; }

#main { color: black; }

  #main-sidebar { border: 1px solid; }

#main a { font-weight: bold; }
 #main a:hover { color: red; }

nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } }

nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; }

//这是_reset.scss 的文件 html, body, ul, ol { margin: 0; }

// 这是 base.scss的文件 @import ‘reset‘; body { font: 100% Helvetica, sans-serif; }

html, body, ul, ol { margin: 0;} body { font: 100% Helvetica, sans-serif; }

@mixin border-radius($radius) { border-radius: $radius; -ms-border-radius: $radius; } .box { @include border-radius(10px); }

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

// 下面代码会正常输出到生成的CSS文件，因为它被其接下来的代码所继承 

%message-common { padding: 10px; color: #333; }

.message { @extend %message-common; }

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

.message, .success { padding: 10px; color: #333; }

.success { border-color: green; }

运算符，例如+、-、*、/、%

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

div[role="main"] { width: 62.5%; }

.demo { // 命令空间后带有冒号: font: { family: fantasy; size: 30em; } }

.demo { font-family: fantasy; font-size: 30em; }

.demo { font: 20px/24px fantasy { weight: bold; } }

.demo { font: 20px/24px fantasy; font-weight: bold; }