[if lt IE 9]>
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; }
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
body { font: 100% Helvetica, sans-serif; color: #333; }
$font-stack: Helvetica, sans-serif; $primary-color: #333;
@import 'foo.scss'; body { font: 100% $font-stack; color: $primary-color; }
body { font: 100% Helvetica, sans-serif; color: #333; }
@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; } .error { border-color: red; } .warning { border-color: yellow; }
article[role="main"] { float: left; width: 600px / 960px * 100%; } aside[role="complementary"] { float: right; width: 300px / 960px * 100%; }
article[role="main"] { float: left; width: 62.5%; } aside[role="complementary"] { float: right; width: 31.25%; }
#main { color: black; a { font-weight: bold; &:hover { color: red; } } }
#main { color: black; } #main a { font-weight: bold; } #main a:hover { color: red; }
.demo { // 命令空间后带有冒号: font: { family: fantasy; size: 30em; weight: bold; } }
.demo { font-family: fantasy; font-size: 30em; font-weight: bold; }
/* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appear in the CSS output. */ body { color: black; } // These comments are only one line long each. // They won't appear in the CSS output, // since they use the single-line comment syntax. a { color: green; }
/* This comment is * several lines long. * since it uses the CSS comment syntax, * it will appear in the CSS output. */ body { color: black; } a { color: green; }