标签：
本文来自慕课网大漠。
Sass简介
Sass和SCSS区别
$font-stack: Helvetica, sans-serif //定义变量
$primary-color: #333 //定义变量
body
font: 100% $font-stack
color: $primary-color
SCSS:
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
编译出来的CSS：
body { font: 100% Helvetica, sans-serif; color: #333; }
SCSS写法和CSS没什么区别，所以Sass大家更喜欢（什么鬼？）。简单说就是，你把.css改成.scss也能用。
nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } }
编译时戴上参数"--style nested"
sass --watch test.scss:test.css --style nested
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
展开输出方式expanded
sass --watch test.scss:test.css --style expanded
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
紧凑输出方式compact
sass --watch test.scss:test.css --style compact
nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }
压缩输出方式compressed
nav ul{margin:0;padding:0;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}
标签：
原文地址：http://www.cnblogs.com/dearzui/p/5396917.html
