sass

以后也别去别都地方找了，还是来这里找吧，比较方便

因为sass依赖于ruby环境，所以装sass之前安装ruby。ruby官网
Add Ruby executables to your PATH，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境，三个全部勾选

安装完以后，打开start command prompt with Ruby，cmd也可以

可以输入命令查看可安装哪些

            gem list             

然后直接在命令行中输入--安装sass
            gem install sass                 

安装成功后可以通过

sass -v 来查看sass都版本

sass -h 来查看帮助

sass style.scss style.css 单文件转换命令

sass --watch style.scss:style.css  单文件监听命令

sass --watch sassFileDirectory:cssFileDirectory  文件夹监听命令

如果安装不成功（一般都会不成功，至少我不同都网络环境不同都电脑都没成功），通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了，关于常用gem source命令可参看：常用的gem source

$ gem sources --remove https://rubygems.org/
$ gem sources -a https://ruby.taobao.org/ 【如果你系统不支持https，请将淘宝源更换成：gem sources -a http://gems.ruby-china.org】
$ gem sources -l
*** CURRENT SOURCES ***

https://ruby.taobao.org
# 请确保只有 ruby.taobao.org
$ gem install sass

就会成功了。

 

--------------------------------------------------分割-----------------------------------------------------

成功后，编译sass可以用start command prompt with Ruby也可以用编译工具，这里用Koala，下载地址

右边的auto compile（自动编译）把这个勾选上就可以了

output style有四种，分别是nested，expanded，compact，compressed，分别对应转换后css文件都排版格式

像我这种习惯写一长串都，还是选择 compact吧

 

sass都用法也写这这里吧，省得找了

首先

ass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点：
文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

so...如果保存成sass后缀，而又不严格遵守他都语法规则，是会报错的

 1、sass允许定义变量

$fontStack:    Helvetica, sans-serif;
$primaryColor: #333;

body {
  font-family: $fontStack;
  color: $primaryColor;
}

2、sass可以进行选择器的嵌套，表示层级关系

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }
}

3、sass中如导入其他sass文件，最后编译为一个css文件，优于纯css的@import

4、sass中可用mixin定义一些代码片段，且可传参数，方便日后根据需求调用。从此处理css3的前缀兼容轻松便捷。

@mixin box-sizing ($sizing) {
    -webkit-box-sizing:$sizing;     
       -moz-box-sizing:$sizing;
            box-sizing:$sizing;
}
.box-border{
    border:1px solid #ccc;
    @include box-sizing(border-box);
}

5、sass可通过@extend来实现代码组合声明

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

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

编译后

.message, .success {
  border: 1px solid #cccccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

6、运算

.container { width: 100%; }

article{
  float: left;
  width: 600px / 960px * 100%;       //width:62.5%;

7、颜色

$linkColor: #08c;
a {
    text-decoration:none;
    color:$linkColor;
    &:hover{
      color:darken($linkColor,10%);    //变暗10%  color: #006699;
    }
}　

参考资料  http://www.w3cplus.com/blog/tags/302.html