sass安装 使用

一 什么是sass

     sass是一种css开发工具。提供了很多便利的写法，使得css开发变得简单  易维护

      sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种就是我们这里使用的scss文件，这种和我们平时写的css文件格式差不多，使用大括号和分号，所以一般都是用第二种写法

二 官网

     ：http://sass-lang.com/documentation/file.SASS_REFERENCE.html

     阮一峰博客（sass部分）：http://www.ruanyifeng.com/blog/2012/06/sass.html

 

三 ruby安装

因为sass依赖于ruby环境，所以装sass之前先确认装了ruby。先导官网下载个ruby

在安装的时候，请勾选Add Ruby executables to your PATH这个选项，添加环境变量，不然以后使用编译软件的时候会提示找不到ruby环境

     

四 sass安装

然后直接在命令行中输入

gem install sass

　　

按回车键确认，等待一段时间就会提示你sass安装成功。最近因为墙的比较厉害，如果你没有安装成功，那么请参考下面的淘宝的RubyGems镜像安装sass，如果成功则忽略。

如果要安装beta版本的，可以在命令行中输入

gem install sass --pre

　　

你还可以从sass的Git repository来安装，git的命令行为

git clone git://github.com/nex3/sass.git
cd sass
rake install

　　

升级sass版本的命令行为

gem update sass

　　

查看sass版本的命令行为

sass -v

　　

你也可以运行帮助命令行来查看你需要的命令

sass -h

　　

淘宝RubyGems镜像安装 sass

由于国内网络原因，导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过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/
$ gem sources -l
*** CURRENT SOURCES ***




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

 

淘宝镜像也不好用了

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

 

五 使用   

sass文件就是普通的文本文件   里面可以直接使用css语法。后缀名为.scss     （Sassy  css）

               下面的命令，可以在屏幕上显示.scss文件转化的css代码。（假设文件名为test。）

 sass test.scss

　

               如果要将显示结果保存成文件，后面再跟一个.css文件名。

          sass test.scss test.css

     sass 提供4种编译风格的选项

                         nested  嵌套缩进的css代码。是默认值

                         expanded  没有缩进 扩展的css代码

                         compact  简洁格式的css代码

                         compressed  压缩后的css代码

                         

                         生产环境中，一般使用最后一个选项： sass --style compressed test.scss test.css

      sass官方的在线转换器：http://www.sassmeister.com/

              sass 也可以监听文件，一旦文件被改动，就自动生成编辑后的版本

   sass --watch test.scss:test.css

　　

               监听文件夹：

 sass --watch sassFileDirectory:cssFileDirectory

　　

 

六 基本用法

     6.1 变量(在选择器中声明的变量会覆盖全局声明的变量)

          任何可以用作css属性值的赋值都 可以用作sass的变量值，甚至是以空格分割的多个属性值，如$basic-border: 1px solid black;，或以逗号分割的多个属性值，如$plain-font: "Myriad Pro"、Myriad、"Helvetica Neue"、Helvetica、"Liberation Sans"、Arial和sans-serif; sans-serif;变量声明后被引用才算生效。

         6.1.1 sass所以的变量以$开头  变量名中的中划线和下划线相互兼容

 $blue:#1875e7;
  div{color:$blue;}

                        

         6.1.2 如果变量需要镶嵌在字符串之中   就必须写在#{}之中

   $left:left;
 .rounded {border-#{$left}-radius:5px;}

　　

                        

                 6.1.3 默认变量：sass的默认变量仅需要在值后面加上!default即可。 sass的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可

                    6.1.4 多值变量

                         6.1.4.1  list类型

                                    list数据可通过空格，逗号或小括号分隔多个值，可用nth($var,$index)取值

$px: 5px 6px 8px 10px;//一维数组
$pxT: 10px 20px , 30px 40px;//二维数组
$trpx:(1px solid #eee ) (16px solid #aaa);//二维数组

.class8 {
    font-size: nth($px,3);
}
.class9 {
    border: nth($trpx,1);
}
.class10 {
    margin: nth($pxT,2);
}

　　

                         6.1.4.2  map类型

                                     map数据以key和value成对出现，其中value又可以是list。格式为：$map: (key1: value1, key2: value2, key3: value3);。可通过map-get($map,$key)取值。

$headings:(h1:2em,h2:1.5em,h3:1em);
.class11 {
    font-size: map-get($headings,h2);
}

@each $heade , $size in $headings {
        #{$heade} {
            font-size: $size;
        }
}

　　

    6.2 可使用算术

  $var:10;
  body{margin:(14px/2);top:50px+100px;right:$var*10%;}

　　

    6.3 嵌套

          6.3.1选择器嵌套：

div{
               color:$blue;
               h1 {
                   color:red;
               }
           }

　　

           6.3.2属性嵌套：

p {
       border:{
                  color:red;
                   }
               }
     }

　　

                       此时  border后面的冒号必须加

          

                        6.3.3&引用父元素

  a {
          &:hover {color:red;}
      }
#content aside { color: red;body.ie & { color: green }}

　　

 

 

                        6.3.4 群组选择器的嵌套

                       

  .container { h1, h2, h3 {margin-bottom: .8em} }
 nav, aside { a {color: blue} }

　　

            6.4注释

                         中文注释的报错，乱码的问题解决：

                                    步骤：1、找到下面这个文件C:\Ruby22-x64\lib\ruby\gems\2.2.0\gems\sass-3.4.22\lib\sass\engine.rb      即自己的安装目录路径

                                            2、找到require 'sass/supports'这一行，在下面一行添加Encoding.default_external = Encoding.find('utf-8')

 

                      

标准的CSS注释 /* comment */ ，会保留到编译后的文件。

单行注释 // comment，只保留在SASS源文件中，编译后被省略。

在/*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息。

 

　

　/*!
　　　　重要注释！
　　*/

　　

七  代码的重用

     7.1继承

                sass可以实现选择器的继承

   .class1 {
                   border: 1px solid #ddd;
                         }
  .calss2 {
                    @extend .class1;
                      font-size: 20px;
            }

　　

                               结果截图：

                                             

      7.2 sass代码块的重用

                    使用@mixin命令   定义一个代码块   例如下面的left

  @mixin left {
                             float: left;
                             margin-left: 10px;
                    }

　　

                    使用@include命令  调用这个mixin

  .class3 {
                             @include left;
                         }

　　

                    @mixin 还可以指定参数和缺省值

  @mixin right($value:10px) {
                             float: right;
                             margin-right: $value;
                         }

　　

                    使用的时候，根据需要加入参数：

 .class5 {
           @include right()
}

　　

如果不传参数，就是默认值

.class4 {
    @include right(40px)
}

　　

 

          常用于：生产浏览器前缀

 @mixin rounded ($vert,$horz,$radius:10px) {
    border-#{$vert}-#{$horz}-radius:$radius;
    -moz-border-#{$vert}-#{$horz}-radius:$radius;
    -webkit-border-#{$vert}-#{$horz}-radius:$radius;
}
.nav {
    @include rounded(top,left)
}
.footer {
    @include rounded(top,left,5px)
}

　　

多组值参数mixin

如果一个参数可以有多组值，如box-shadow、transition等，那么参数则需要在变量后加三个点表示，如$variables...。

 @mixin box-shadow ($shadow...) {
    -webkit-box-shadow:$shadow;
    box-shadow: $shadow;
}

　　

@content: 使@mixin接受一整块样式，接受的样式从@content开始

 @mixin max-screen ($res) {
    @media only screen and (max-width: $res) {
        @content;
    }
}
@include max-screen(480px) {
    body {color:red;}
}

　　

7.3 颜色函数

  lighten(#cc3, 10%) // #d6d65c
　　darken(#cc3, 10%) // #a3a329
　　grayscale(#cc3) // #808080
　　complement(#cc3) // #33c

　　

 

       7.4 插入文件

               @import 命令可以插入外部文件

               scss文件：@import 'path/name.scss'

     css文件：@import 'name.css' 

 

8 高级用法

      8.1 条件语句

@if  可以用来判断     配套的还有@else命令

 .class6 {
    @if 1+1 == 2 {color:red}
    @if 5 < 3 {color:blue}@else {
        background-color: #FFF
    }
}

　　

8.2循环语句

     8.2.1 for循环   for循环有两种形式，分别为：@for $var from <start> through <end>和@for $var from <start> to <end>。$i表示变量，start表示起始值，end表示结束值，这两个的区别是关键字through表示包括end这个数，而to则不包括end这个数。

    @for $i from 1 to 10 {
    .border-#{$i} {
        border: #{$i}px solid red;
    }
}

　　

8.2.2 while

   $i:6;
@while $i > 0 {
    .item-#{$i} {width:20px;}
    $i:$i - 2;
}

　　

8.2.3 each 

@each $member in a,b,c,d {
    .#{$member} {
        background-image: url("/image/#{$member}.jpg");
    }
}

　　

8.3 自定义函数 @function  @return

@function double($n) {
    @return $n * 2;
}
.class7 {
    width: double(5px);
}

　　

 

          8.4 @at-root  为了跳出选择器嵌套的。默认所以得嵌套，继承所有上级选择器。但有了这个就可以跳出所有上级选择器。

  //单个选择器跳出
.parent {
    color:red;
    @at-root .child {
        width: 100px;
    }
}
//多个选择器跳出
.parent2 {
    color:blue;
    @at-root {
        .child1 {width: 100px;}
        .child2 {width: 200px;}
    }
}

　　

        8.4.1默认@at-root只会跳出选择器嵌套，而不能跳出@media或@support，如果要跳出这两种，则需使用@at-root (without: media)，@at-root (without: support)

 //跳出父级元素嵌套
@media print {
    .parent2 {
        color: red;
        @at-root .child3 {
            color: blue;
        }
    }
}

//跳出media嵌套  父级有效
@media print4 {
    .parent4 {
        color: red;
        @at-root (without: media) {
            .child4 {
                width: 200px;
            }
        }
    }
}

//跳出media和父级
@media print5 {
    .parent5 {
        color:red;
        @at-root (without:all) {
            .child5{height: 200px;}
        }
    }
}

　　

 

8.4.2  @at-root 于 & 配合使用

.child6 {
    @at-root .parent6 & {
        height: 300px;
    }
}

　　

 

 8.4.3占位选择器%

从sass 3.2.0以后就可以定义占位选择器%。这种选择器的优势在于：如果不调用则不会有任何多余的css文件，避免了以前在一些基础的文件中预定义了很多基础的样式，然后实际应用中不管是否使用了@extend去继承相应的样式，都会解析出来所有的样式。占位选择器以%标识定义，通过@extend调用。

  %ir {
    color:transparent;
    text-shadow:none;
    background-color: transparent;
    border:0;
}
%clearfix {
    @if $ie7 {
        *zoom :1;
    }
    &:before,
    &:after {
        content: "";
        display: table;
        font: 0/0;

    }
    &:after {
        clear: both;
    }
}
#header {
    width: 2100px;
    @extend %ir;
}
.ir {
    @extend %ir;
}

　　

   

九 编译          

          9.1 sublime装SASS build插件，可以在sublime的packages文件夹下打开终端从github的https://github.com/jaumefontal/SASS-Build-SublimeText2.git上clone。然后编辑.scss直接保存即可编译

                   9.2 官方的在线转换器：http://www.sassmeister.com/

                   9.3  在项目的scss文件夹下用终端命令

               9.4  据说webstorm内置了sass的编译

               9.5  图形化工具 koala

               9.6  gulp