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

posted @ 2016-05-09 11:39 lhy031 阅读(2458) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

sass安装 使用

公告

sass安装使用