sass基本用法

1.sass介绍

Sass 是一种比较流行的”CSS预处理器”, 是对 CSS 的扩展，让 CSS 语言更强大、优雅。使得CSS像一门编程语言，编写起来更加高效，易于维护

2. 安装(Ubuntu)

Sass是Ruby语言写的，但是并不需要懂得Ruby，只需要安装Ruby即可

安装Ruby

sudo apt-get update
sudo apt-get install ruby

安装Sass

sudo gem install sass

编译

编译有多种，可以使用Sass命令，可以使用在线编译，也可以使用Koala编译，还可以使用编辑器插件，我选择使用sublime的sass-build插件进行编译。

Ctrl + b进行编译

3.基本用法

3.1 变量

能够使用变量是编程语言最基本的性质，Sass中变量以$开头

$deepBlue: #032f3e;

a {
  color: $deepBlue;
}

将变量嵌套在字符中,使用#{}引用

$pos: bottom;

div {
  margin-#{$pos}: 20px;
}

3.2 嵌套

Sass支持嵌套，使得结果更加清晰

div .title {
    color: blue;
  }

上面可以写成

div {

      .title {
        color: blue;
      }

    }

注意：不建议嵌套过深

3.3 使用选择器和伪类

可以直接写在嵌套的代码块里，需要加上&用于引用父元素

a {

      &:hover {
        color: blue;
      }

    }

3.4 运算

支持常见的运算,和calc功能类似

li {
      width: (100% / 4);
  }

3.5 Mixin

mixin是Sass中非常强大有用的功能，轻松实现代码重用

编写一个清除浮动的伪类

@mixin clearFix {
&:after {
  content: "";
  display: block;
  clear: both;
}
}

引用上面伪类

div {
      @include clearFix
    }

还可以使用参数，编写一个grid

@mixin grid($cols, $mgn) {
      float: left;
      margin-right: $mgn;
      margin-bottom: $mgn;
      width: ((100% - (($cols - 1) * $mgn)) / $cols );
      &:nth-child(#{$cols}n) {
        margin-right: 0;
      }
    }

引用

li {
      @include grid(4, 2%);
    }

3.6 引入文件

@import "styles.scss"

3.7 媒体查询以及if语法

媒体查询,@content为写入的内容

@mixin mediaQ($arg) {
      @media screen and (max-width: $arg) {
         @content;
      }
    }

引用

h1 {
      font-size: 60px;
      @include mediaQ(600px) {
        font-size: 30px;
      }
    }

上面只支持一个参数，但是媒体查询还有两个参数的情况，使用if语句判断

@mixin mediaQ($arg…) {
      @if length($arg) == 1 {
        @media screen and (max-width: nth($arg, 1)) {
           @content;
        }
      }
  @if length($arg) == 2 {
     @media screen and (max-width: nth($arg, 1)) and (min-width: nth($arg, 2)) {
       @content;
     }
  }
}

引用

h1 {
      font-size: 60px;
      @include mediaQ(1200px，600px) {
        font-size: 30px;
      }
    }

3.8 内置颜色处理函数

color: lighten($deepBlue, 6)；
color: complement($deepBlue);