sass

一.sass简介

    sass和less都是css预处理器，（css预处理器：一种专门的编程语言，然后在编译成css文件）

    sass是最早的css预处理器，基于ruby。这里提供两种使用方式

        (1)需要在命令行 编译sass wyc.scss wyc.css,然后在html页面引入编译好的css文件

        (2)或者在gulp中引入（待完善）

    有两套语法规则。.sass文件采用缩进作为分隔符。.scss文件采用{}作为分隔符, 在Sass3之后的版本都支持这种语法规则。

文件名：wyc.sass
div           //正确
  .primary
    color: blue
div{          //报错
  .erro{
    color: red;
  }
}

//文件名：wyc.scss
div{          //正确
  .erro{
    color: red;
  }
}

上面也是一种语法，叫选择器嵌套，详情看后面

less与sass类似，但基于javascript引擎，使用时需要引入less.js，其中bootstrap框架就是使用了less

二.sass安装

    sass是基于ruby的，windows下需要先安装ruby

    (1)下载ruby安装文件，勾选add ruby excutables to your path。打开命令行ruby -v返回版本信息即为安装完成

    (2)

gem install sass

这是安装国外的，推荐用翻墙软件。或者使用国内镜像，但有可能会报缺少证书错误（看了好多文章，没能有很好的解决方式，待解决）

gem sources --remove https://rubygems.org/
gem sources -a https://gems.ruby-china.org/
gem sources -l

三.sass语法

1.变量

声明：和php有点像，使用$美元符

//默认变量——！default
$baseFontSize: 12px !default;
body{
  line-height: $baseFontSize;
}

//全局变量
$color: red;
.bg1{
  $color: blue !global;
  background-color: $color;
}
.bg2{
  background-color: $color;
}

//特殊变量
$direction: bottom !default;
.border-#{$direction}{
  border-#{$direction}:1px solid #ccc;
}

//多值变量
  //一维数据
  $btn-color: blue green orange red;
  //一维数据使用方式
  .success{
    display: nth($display,3);
    background-color: nth($btn-color,2);
    &:hover {
      color: nth($btn-color, 4);
    }
  }
  //二维数据（两种定义方式）
  $margin:10px 20px,5px 10px;
  $margin:(10px 20px) (5px 10px);
  .margin{
    margin: nth($margin,1);
  }
  //map
  $padding:(mid:10px 20px,sm:5px 10px);
  //map使用方式
  @each $key,$value in $padding{
    .#{$key} {
      padding: $value;
    }
  }

2.属性嵌套

所谓属性嵌套指的是有些属性拥有同一个开始单词，如border-width，border-color都是以border开头。

//scss代码
.border-common {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: aqua;
    }
    right: {
      width: 2px;
      color: lightblue;
    }
  }
}
//编译好的css代码
.border-common {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: aqua;
  border-right-width: 2px;
  border-right-color: lightblue; }
//tip:设置border-style

3.选择器嵌套

//scss代码
article {
  ~ article { border-top: 1px dashed #ccc }
}
//编译好的css代码
article ~ article { border-top: 1px dashed #ccc }

4.混合器mixin

使用方法：sass中使用@mixin声明混合，可以传递参数，参数名以$符号开始，多个参数以逗号分开，也可以给参数设置默认值。声明的@mixin通过@include来调用。

使用场景： 如果你发现自己在不停地重复一段样式，那就应该把这段样式构造成优良的混合器，尤其是这段样式本身就是一个逻辑单元，比如说是一组放在一起有意义的属性。

//scss代码
@mixin wyc($width,$height) {
  display: block;
  width: $width;
  height: $height;
  border: 1px solid aqua;
}
.wyc1{
  @include wyc(100px,100px);
}
.wyc2{
  @include wyc(200px,200px);
}
//编译好的css代码
.wyc1 {
  display: block;
  width: 100px;
  height: 100px;
  border: 1px solid aqua; }

.wyc2 {
  display: block;
  width: 200px;
  height: 200px;
  border: 1px solid aqua; }

5.继承（相比混合器，不能传参，重用语义化的类）

使用方法： 通过@extend语法实现

使用场景： 继承是基于类的（有时是基于其他类型的选择器），所以继承应该是建立在语义化的关系上。 你发现你的某个类（比如说.son）另一个类（比如说.parent）的细化。 就可以使用继承了

.parent{
  width: 100px;
  height: 50px;
}
.son{
  @extend .parent;
  background-color: aqua;
}

说明：.son不仅会继承.error自身的所有样式，而且跟.parent相关的组合选择器样式也会以组合选择器的形式继承，相当于替换。

继承与混合器相比：

(1)不能传参，重用语义化的类

(2)继承相当于在html里同时引入父，子类class="parent son",遵循css层叠的规则，代码量少,

    而混合器把样式直接放在css规则中，相当于复制一份，没有css层叠的问题。

6.条件语句

//结合@mixin和@include使用不然会报错
@mixin wrap-bgcolor {
  @if ($width > 100px) {
    background-color: #0086B3;
  } @else {
    background-color: #445588;
  }
}
.wrap-bgcolor{
  @include wrap-bgcolor();
}

7.for循环

@for $i from 0 to 9{
  .block-size-#{$i}{
    width: 10px*$i;
    height: 10px*$i;
    border: ($i)px solid #009926;
  }
}

8.枚举

//map
  $padding:(mid:10px 20px,sm:5px 10px);
  //map使用方式
  @each $key,$value in $padding{
    .#{$key} {
      padding: $value;
    }
  }

9.自定义函数

@function eason($a){
  @return ($a $a);
}
.eason{
  margin: eason(50px);
}

四.sass对比css

1.利用编程思维写样式，减少重复做的事情

2.变量类似android中的变量，利于统一调整

五.sass编译

1.命令行编译

sass style.scss style.css

2.gui编译（koala）

koala中文报错解决办法：

进入Koala安装目录，例如：C:\Program Files (x86)\Koala\rubygems\gems\sass-3.4.9\lib\sass

找到engine.rb文件，在该文件中找到最后一个require元素，在该元素之后添加以下代码即可。

六.sass调试

目前sass的调试分为两种，一种为开启debug-info，一种为开启sourcemap（这个将成为主流）。

、 如开启的是sourcemap，则在解析的css文件同目录下生成一个.css.map的后缀名文件。

七.sass框架

compass：待完善。

转载于:https://my.oschina.net/wyc1219/blog/857065