Sass入门——简介+语法格式及编译调试

本文来自慕课网大漠。

Sass简介

Sass和SCSS区别

1、后缀名不同，很好理解

2、Sass以严格的缩进语法规则书写，不带大括号和分号；而SCSS的语法规则和CSS的语法很类似。

Sass:

$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也能用。

安装Sass的过程我就省略了。

编译

命令编译

命令行、gulp/grunt、工具

输出方式

嵌套输出方式nested

Sass：

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

编译时加参数 "--style expanded"

sass --watch test.scss:test.css --style expanded

跟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;
}

紧凑输出方式compact

编译时加参数 "--style compact"

sass --watch test.scss:test.css --style compact

同样没啥区别，把CSS放在一行

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

编译时加参数 "--style 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}