sass

我们大家都知道html、css不属于编程语言属于标记语言，所以很难像js一样定义变量、编写方法实现模块化，而目前的css编写模式中都是定义一些公共样式类名，那一块的html需要这个样式，就去增加对应的样式类名，所以我们经常会看到一个标签上存在很多的样式类名，在这种模式中我们需要时常关注css优先级，避免样式的重叠覆盖..

为了解决css的这一困境，css预处理预编译的思想脱颖而出，比较具有代表性的有less，sass，stylus，在传统的css基础上增加了大量的新的语法，编写方式，常用的函数等，可以让css像js一样成为一门编程语言，基于less我们可以把一些经常用到的样式定义成变量或者函数，以后有需要直接调用即可，这样不仅有利于我们的开发速度，也有利于项目的后期维护与可用性

less、sass写完之后不能直接应用到页面当中，我们需要把它编译成css，然后再拿过来使用，我们把它叫做预处理

less、sass的编译有两大类 第一类：基于node环境编译less 第二类：基于浏览器环境

less、sass是一门新的语法，不能被浏览器直接识别，只是方便我们开发用的，最终我们需要把他们编译成正常的css，浏览器识别css

Sass 是采用 Ruby 语言编写的一款 CSS 预处理语言，它诞生于2007年，是最大的成熟的 CSS 预处理语言。最初它是为了配合 HAML（一种缩进式 HTML 预编译器）而设计的，因此有着和 HTML 一样的缩进式风格。

Sass 和 SCSS 有什么区别？ 1、文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 2、语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

sass安装 在 Windows 平台下安装 Ruby 需要先有 Ruby 安装包，大家可以到 Ruby 的官网（http://rubyinstaller.org/downloads）下载对应需要的 Ruby 版本。

当你的电脑中安装好 Ruby 之后，接下来就可以安装 Sass 了。只需要在你的命令终端输入一行命令即可。

1、通过命令安装 Sass 打开电脑的命令终端，输入下面的命令： gem install sass sass -v //查看版本是否安装成功 gem update sass//更新到最新的sass版本 gem uninstall sass//卸载sass（不要点） ws配置路径：program：C:\Ruby23-x64\bin\sass.bat

mixin

@mixin alert($color:blue){
  color: $color;
}
.block{
  margin: 10px;
  padding: 20px;
  @include alert(#fff);
}

扩展继承

.message {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  @extend .message;
  border-color: green;
}

运算

.a{
  width: 100px+200px;
}

颜色

$color1:red;
.div{
  background: darken($color1,10%);
}

$padding:10px 5px 10px 5px;

.div{
  padding: $padding;
  padding-left: nth($padding,2);
}

$maps:(
    color:red,
    background:blue
);
.div{
   background: map-get($maps,background);
}

@at-root .con{
   //跳出嵌套
}

@function  dobule($cc){
   @return $cc*2;
}
.ccc{
  width: dobule(5px);
}

$aa:8;
.c{
   content: #{$aa};
}

$srceen:800;
@if $srceen  > 900{
   body{
     background: yellow;
   }
}
@else {
   body{
     background: blue;
   }
}

@for $i from 1 to 5{
  .span#{$i}{
     width: 20% * $i;
  }
}

.#{content}{
   background: red;
}