sass安装和语法
1.简介
sass 它的基本思想是，用一种专门的编程语言，进行网页样式设计，然后再编译成正常的CSS文件。这被叫做“css预处理器”（css preprocessor）。它提供了很便利的语法，节省了我们写css的时间。
2.安装
(1)首先确保你的电脑安装了 ruby （传送门 https://www.ruby-lang.org/zh_cn/downloads/）
// 控制台查看是否安装成功 ruby -v
(2)安装 sass
gem install sass
3.使用
（1）用编辑器 新建文件夹 demo ，在demo里新建文件 demo.scss ，代码如下
.list_1 {
ul {padding-left: 1.6rem;}
li {
border-bottom: 1px solid #ddd;padding-right: 1.6rem;
a {
display: block;height: 4rem;line-height: 4rem;overflow: hidden;font-size: 1.4rem;
background:url("../image/icon_goto.png") right center no-repeat;
background-size: auto 1.4rem;
padding-right: 1.5rem;
}
time {float: right;color: #999;}
}
}
（2）控制台 进入demo文件夹下
// demo.css 是生成后的css文件名 sass demo.scss demo.css
4.sass提供的四种编译风格
// nested：嵌套缩进的css代码，它是默认值。 // expanded：没有缩进的、扩展的css代码。 // compact：简洁格式的css代码。 // compressed：压缩后的css代码。
比如
sass --style compressed test.sass test.css
5.sass 语法
我觉得sass的格式和jade书写格式很像，结合sass的语法写了个demo,希望能帮助大家。
注意 ： 这里的是在控制台下直接用sass编译下的语法（不需要｛｝和；等），但是如果你需要在grunt下使用，请参考 http://www.w3cplus.com/sassguide/syntax.html
页面结构很简单，这里主要讲scss的常用语法，我写在注释里了。
丑丑页面预览：
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="index.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<div class="lay01">
<a href="#">cynthia</a>
<label for="">something</label>
<br>
<br>
<div class="lay01-1">
<h1>hello sass</h1>
</div>
</div>
</body>
</html>
css.scss
* padding: 0 margin: 0 border: 0 outline: 0 font-size: 12px body background: #f4f4f4 a text-decoration: none &:hover cursor: pointer // each循环 $headings: (h1:2em,h2:1.5em,h3:1.2em) @each $header,$size in $headings #{$header} font-size: $size // for循环 @for $i from 1 through 3 .item-#{$i} width: 2em * $i // 多个字段的数据循环 $animal-data: (puma,black,default),(sea-sulg,blue,pointer),(egret,white,move) @each $animal,$color,$cursor in $animal-data .#{$animal}-icon background: url(img/#{$animal}.png) border: 1px #ddd solid cursor: $cursor
css.scss生成的css.css
* { padding: 0; margin: 0; border: 0; outline: 0; font-size: 12px; } body { background: #f4f4f4; } a { text-decoration: none; } a:hover { cursor: pointer; } h1 { font-size: 2em; } h2 { font-size: 1.5em; } h3 { font-size: 1.2em; } .item-1 { width: 2em; } .item-2 { width: 4em; } .item-3 { width: 6em; } .puma-icon { background: url(img/puma.png); border: 1px #ddd solid; cursor: default; } .sea-sulg-icon { background: url(img/sea-sulg.png); border: 1px #ddd solid; cursor: pointer; } .egret-icon { background: url(img/egret.png); border: 1px #ddd solid; cursor: move; } /*# sourceMappingURL=css.css.map */
index.scss
// 引入外部css文件 @import "css.css" // 变量 $blue:#1875e7 // 代码块 @mixin font1 font-family: 'Microsoft Yahei' color: #ddd // 嵌套 .lay01 background: $blue border: 1px #ddd solid a @include font1 // 计算 font-size: 16px - 1px label background: red font-size: 12px display: block width: 100px height: 30px line-height: 30px text-align: center .lay01-1 width: 100px height: 100px background: yellow h1 font-size: 20px color: green
index.scss生成的index.css
@import url(css.css); .lay01 { background: #1875e7; border: 1px #ddd solid; } .lay01 a { font-family: "Microsoft Yahei"; color: #ddd; font-size: 15px; } .lay01 label { background: red; font-size: 12px; display: block; width: 100px; height: 30px; line-height: 30px; text-align: center; } .lay01 .lay01-1 { width: 100px; height: 100px; background: yellow; } .lay01 .lay01-1 h1 { font-size: 20px; color: green; } /*# sourceMappingURL=index.css.map */
