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的常用语法，我写在注释里了。

　　丑丑页面预览：

* {
  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 */