前端不会用SASS是因为不会命令行。
用命令行可以实现SCSS到CSS的自动化。
- 全局安装Node-sass node-sass
npm install -g node-sass
（事实上SASS是Ruby社区写的） - 为了演示实现过程，我先把目录已有的一个style.css后缀改成style.scss
mv style.css style.scss
这样直接改后缀是没有问题的，因为SCSS是完全兼容CSS的，它只是在CSS语法上加上一些更高级的用法。 - 现在可以用node-sass把SCSS翻译成CSS了
node-sass style.scss style.css
实际上现在只是将排版变得漂亮了一点，因为我们并没有改SCSS的内容。 - 在style.scss写一些新语法，例如：
.topNavBar{
nav {
padding-top: 5px;
> ul {
list-style: none;
margin: 0;
padding: 0;
> li {
float: left;
margin-left: 17px;
margin-right: 17px;
position: relative;
> a {
font-size: 12px;
color: inherit;
font-weight: bold;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
padding-top: 5px;
padding-bottom: 5px;
display: block;
position: relative;
}
}
}
}
}
- 再次运行命令
node-sass style.scss style.css，可以看到style.css里对应内容已经被翻译成CSS语法：
.topNavBar nav {
padding-top: 5px; }
.topNavBar nav > ul {
list-style: none;
margin: 0;
padding: 0; }
.topNavBar nav > ul > li {
float: left;
margin-left: 17px;
margin-right: 17px;
position: relative; }
.topNavBar nav > ul > li > a {
font-size: 12px;
color: inherit;
font-weight: bold;
border-top: 3px solid transparent;
border-bottom: 3px solid transparent;
padding-top: 5px;
padding-bottom: 5px;
display: block;
position: relative; }
- 由于不能直接引入style.scss，现在每次改style.scss都要执行一次命令将其翻译成CSS语法，这样写岂不是很傻？
- 使用
-w监听style.scss的变动，每次style.scss有改动都自动翻译
node-sass style.scss style.css -w
如此就实现了从SCSS到CSS的自动化。
