正文

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

IP云
IP云V管理员/5 阅读
08/14
提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

本文来自慕课网大漠。

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:;
padding:;
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:;
padding:;
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:;
padding:;
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:; padding:; list-style: none; }
nav li { display: inline-block; }
nav a { display: block; padding: 6px 12px; text-decoration: none; }

压缩输出方式compressed

编译时加参数 "--style compressed"
这个区别稍微大了点，把注释和空格给去掉了

nav ul{margin:;padding:;list-style:none}nav li{display:inline-block}nav a{display:block;padding:6px 12px;text-decoration:none}