您的位置：首页 > 其它

sass入门

2015-10-16 13:10 295 查看

参考资料

sass简介

Sass: Syntactically Awesome Style Sheets, is the most mature, stable, and powerful professional grade CSS extension language in the world.（原文，来自官网）

sass和less的功能是一样的，都是css预编译器，即在css中拓展编程语法，加入变量、函数等元素。

sass安装

sass的安装依赖于Ruby，所以需要先安装Ruby。

Ruby安装

linux

通过apt package manager, rbenv, or rvm安装Ruby

[code]sudo su -c "gem install sass"

windows

从官网下载Ruby安装包，点击安装。安装完之后，将安装目录的

bin

文件夹加入环境变量中，或者安装的时候勾选

Add Ruby executables to your PATH

，这样就能在cmd里运行

ruby

指令跟

gem

指令了。

mac

mac预装了Ruby

sass安装

方法一

在命令行输入

[code]gem install sass

由于国内特殊原因，这方法时而成功时而不成功（毕竟需要访问国外）

方法二

从sass的Git repository来安装，git的命令行为

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

方法来自w3cplus，本人安装时提示加载文件错误。

方法三

淘宝RubyGems镜像安装 sass

由于国内网络原因（你懂的），导致 rubygems.org 存放在 Amazon S3 上面的资源文件间歇性连接失败。这时候我们可以通过gem sources命令来配置源，先移除默认的https://rubygems.org源，然后添加淘宝的源https://ruby.taobao.org/，然后查看下当前使用的源是哪个，如果是淘宝的，则表示可以输入sass安装命令gem install sass了。

[code]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

sass语法

sass文件后缀

sass有两种后缀名文件：一种后缀名为sass，不使用大括号和分号；另一种后缀名为scss，和我们平时写的css文件格式差不多，使用大括号和分号。在此也建议使用后缀名为scss的文件，以避免sass后缀名的严格格式要求报错。

导入

sass的导入(@import)规则和CSS的有所不同，编译时会将@import的scss文件合并进来只生成一个CSS文件。但是如果你在sass文件中导入css文件如@import ‘reset.css’，那效果跟普通CSS导入样式文件一样，导入的css文件不会合并到编译后的文件中，而是以@import方式存在。

所有的sass导入文件都可以忽略后缀名.scss。一般来说基础的文件命名方法以_开头，如_mixin.scss。这种文件在导入的时候可以不写下划线，可写成@import “mixin”。

变量

普通变量

sass的变量必须是$开头，后面紧跟变量名，而变量值和变量名之间就需要使用冒号(:)分隔开（就像CSS属性设置一样）

例子：

[code]$fontSize: 12px;
body{
    font-size:$fontSize;
}

默认变量

变量值后面加上!default则表示默认值。

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

实际上sass的变量多次声明的时候，以最后一次声明为准。但如果在默认变量之外又重新声明，则无论默认变量在何处都将被覆盖。

有趣的是，如果存在多次默认变量声明，则以第一次声明为准。

[code]//sass style
//-------------------------------
$baseLineHeight:        2;
$baseLineHeight:        1.5 !default;
body{
    line-height: $baseLineHeight; 
}

//css style
//-------------------------------
body{
    line-height:2;
}

特殊变量

一般我们定义的变量都为属性值，可直接使用，但是如果变量作为属性或在某些特殊情况下等则必须要以#{$variables}形式使用。

[code]//sass style
//-------------------------------
$borderDirection:       top !default; 
$baseFontSize:          12px !default;
$baseLineHeight:        1.5 !default;

//应用于class和属性
.border-#{$borderDirection}{
  border-#{$borderDirection}:1px solid #ccc;
}
//应用于复杂的属性值
body{
    font:#{$baseFontSize}/#{$baseLineHeight};
}

//css style
//-------------------------------
.border-top{
  border-top:1px solid #ccc;
}
body {
  font: 12px/1.5;
}

多值变量

多值变量分为list类型和map类型，简单来说list类型有点像js中的数组，而map类型有点像js中的对象。

list

list数据可通过空格，逗号或小括号分隔多个值，可用

nth($var,$index)

（注意index是从1开始的而不是从0开始的）取值。关于list数据操作还有很多其他函数如

length($list)

，

join($list1,$list2,[$separator])

，

append($list,$value,[$separator])

等，具体可参考sass Functions（搜索

List Functions

即可）

[code]//一维数据
$px: 5px 10px 20px 30px;

//二维数据，相当于js中的二维数组
$px: 5px 10px, 20px 30px;
$px: (5px 10px) (20px 30px);

用法实例：

[code]//sass style
$baseLineHeight:        1 2;
body{
    line-height: nth(append($baseLineHeight, 3), 3); 
}

// css style
body {
  line-height: 3; 
}

map

map数据以key和value成对出现，其中value又可以是list。格式为：map:(key1:value1,key2:value2,key3:value3);。可通过map−get(map: (key1: value1, key2: value2, key3: value3);。可通过map-get(map,key)取值。关于map数据还有很多其他函数如map−merge(key)取值。关于map数据还有很多其他函数如map-merge(map1,map2)，map−keys(map2)，map-keys(map)，map-values($map)等

PHP里，foreach遍历有种形式是

[code]foreach ($arr as $key => $value)

而在map中，可以像以下这样遍历map

[code]//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

全局变量

注意：本特性在3.4（含）版本后才适用

在选择器中声明的变量是局部变量，不会覆盖外面声明的全局变量。而在变量值后面加上!global即为全局变量。

[code]//sass style
//-------------------------------
$fontSize:      12px;
$color:         #333;
body{
    $fontSize: 14px;        
    $color：   #fff !global;
    font-size:$fontSize;
    color:$color;
}
p{
    font-size:$fontSize;
    color:$color;
}

//css style
//-------------------------------
body{
    font-size:14px;
    color:#fff;
}
p{
    font-size:12px;
    color:#fff;
}

嵌套

sass的嵌套包括两种：一种是选择器的嵌套；另一种是属性的嵌套。我们一般说起或用到的都是选择器的嵌套。

选择器嵌套

所谓选择器嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而增强了sass文件的结构性和可读性。

在选择器嵌套中，可以使用&表示父元素选择器。

[code]#top_nav{
  line-height: 40px;
  text-transform: capitalize;
  background-color:#333;
  li{
    float:left;
  }
  a{
    display: block;
    padding: 0 10px;
    color: #fff;

    &:hover{
      color:#ddd;
    }
  }
}

属性嵌套

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

[code]//sass style
//-------------------------------
.fakeshadow {
  border: {
    style: solid;
    left: {
      width: 4px;
      color: #888;
    }
    right: {
      width: 2px;
      color: #ccc;
    }
  }
}

//css style
//-------------------------------
.fakeshadow {
  border-style: solid;
  border-left-width: 4px;
  border-left-color: #888;
  border-right-width: 2px;
  border-right-color: #ccc; 
}

@at-root

sass3.3.0中新增的功能，用来跳出选择器嵌套的。默认所有的嵌套，继承所有上级选择器，但有了这个就可以跳出所有上级选择器。

个人没发现这个功能能用来干嘛。有兴趣的可以到sass语法查看详细的功能。

混合

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

无参数、单参数、多参数

调用时可直接传入值，如@include传入参数的个数小于@mixin定义参数的个数，则按照顺序表示，后面不足的使用默认值，如不足的没有默认值则报错。除此之外还可以选择性的传入参数，使用参数名与值同时传入。

[code]//sass style
//-------------------------------   
@mixin horizontal-line($border:1px dashed #ccc, $padding:10px){
    border-bottom:$border;
    padding-top:$padding;
    padding-bottom:$padding;  
}
.imgtext-h li{
    @include horizontal-line(1px solid #ccc);
}
.imgtext-h--product li{
    @include horizontal-line($padding:15px);
}

//css style
//-------------------------------
.imgtext-h li {
    border-bottom: 1px solid #cccccc;
    padding-top: 10px;
    padding-bottom: 10px;
}
.imgtext-h--product li {
    border-bottom: 1px dashed #cccccc;
    padding-top: 15px;
    padding-bottom: 15px;
}

多组值参数mixin

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

$variables...

。

[code]@mixin box-shadow($shadow...) {
  -webkit-box-shadow:$shadow;
  box-shadow:$shadow;
}
.box{
  border:1px solid #ccc;
  @include box-shadow(0 2px 2px rgba(0,0,0,.3),0 3px 3px rgba(0,0,0,.3),0 4px 4px rgba(0,0,0,.3));
}

继承

sass中，选择器继承可以让选择器继承另一个选择器的所有样式，并联合声明。使用选择器的继承，要使用关键词@extend，后面紧跟需要继承的选择器。

基本继承

[code]//sass style
//-------------------------------
h1{
  border: 4px solid #ff9aa9;
}
.speaker{
  @extend h1;
  border-width: 2px;
}

//css style
//-------------------------------
h1,.speaker{
  border: 4px solid #ff9aa9;
}
.speaker{
  border-width: 2px;
}

占位选择器

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

[code]%ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
%clearfix{
  &:after {
    clear: both;
  }
}
#header{
  h1{
    @extend %ir;
    width:300px;
  }
}
.ir{
  @extend %ir;
}
//css style
//-------------------------------
#header h1,
.ir{
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
#header h1{
  width:300px;
}

如上代码，定义了两个占位选择器%ir和%clearfix，其中%clearfix这个没有调用，所以解析出来的css样式也就没有clearfix部分。占位选择器的出现，使css文件更加简练可控，没有多余。所以可以用其定义一些基础的样式文件，然后根据需要调用产生相应的css。

函数

sass定义了很多函数可供使用，当然你也可以自己定义函数，以

@fuction

开始。sass的官方函数链接为：sass fuction，实际项目中我们使用最多的应该是颜色函数，而颜色函数中又以

lighten

减淡和

darken

加深为最，其调用方法为

lighten($color,$amount)

和

darken($color,$amount)

，它们的第一个参数都是颜色值，第二个参数都是百分比。

[code]//sass style
//-------------------------------                     
$baseFontSize:      10px !default;
$gray:              #ccc !defualt;        

// pixels to rems 
@function pxToRem($px) {
  @return $px / $baseFontSize * 1rem;
}

body{
  font-size:$baseFontSize;
  color:lighten($gray,10%);
}
.test{
  font-size:pxToRem(16px);
  color:darken($gray,10%);
}

//css style
//-------------------------------
body{
  font-size:10px;
  color:#E6E6E6;
}
.test{
  font-size:1.6rem;
  color:#B3B3B3;
}

其他参考资料

sass揭秘之@mixin，%，@function

Sass基础——颜色函数

Sass基础——Sass函数

运算

sass具有运算的特性，可以对数值型的Value(如：数字、颜色、变量等)进行加减乘除四则运算。请注意运算符前后请留一个空格，不然会出错。

[code]$baseFontSize:          14px !default;
$baseLineHeight:        1.5 !default;
$baseGap:               $baseFontSize * $baseLineHeight !default;
$halfBaseGap:           $baseGap / 2  !default;
$samllFontSize:         $baseFontSize - 2px  !default;

//grid 
$_columns:                     12 !default;      // Total number of columns
$_column-width:                60px !default;   // Width of a single column
$_gutter:                      20px !default;     // Width of the gutter
$_gridsystem-width:            $_columns * ($_column-width + $_gutter); //grid system width

条件判断及循环

@if判断

@if可一个条件单独使用，也可以和@else结合多条件使用

[code]//sass style
//-------------------------------
$lte7: true;
$type: monster;
.ib{
    display:inline-block;
    @if $lte7 {
        *display:inline;
        *zoom:1;
    }
}
p {
  @if $type == ocean {
    color: blue;
  } @else if $type == matador {
    color: red;
  } @else if $type == monster {
    color: green;
  } @else {
    color: black;
  }
}

//css style
//-------------------------------
.ib{
    display:inline-block;
    *display:inline;
    *zoom:1;
}
p {
  color: green; 
}

三目判断

语法为：if(condition,condition, if_true, $if_false) 。三个参数分别表示：条件，条件为真的值，条件为假的值

[code]$lte7: false;
p {
  color: if($lte7, green, red);
}
// CSS
p {
  color: red; 
}

for循环

for循环有两种形式，分别为：

@for $var from <start> through <end>

和

@for $var from <start> to <end>

。

$i

表示变量，

start

表示起始值，

end

表示结束值，这两个的区别是关键字

through

表示包括

end

这个数，而

to

则不包括

end

这个数。

[code]//sass style
//-------------------------------
@for $i from 1 through 3 {
  .item-#{$i} { width: 2em * $i; }
}

//css style
//-------------------------------
.item-1 {
  width: 2em; 
}
.item-2 {
  width: 4em; 
}
.item-3 {
  width: 6em; 
}

@each循环

语法为：@each varin<listormap>。其中var in 。其中var表示变量，而list和map表示list类型数据和map类型数据。sass 3.3.0新加入了多字段循环和map数据循环。

单个字段list数据循环

[code]//sass style
//-------------------------------
$animal-list: puma, sea-slug, egret, salamander;
@each $animal in $animal-list {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png'); 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png'); 
}
.egret-icon {
  background-image: url('/images/egret.png'); 
}
.salamander-icon {
  background-image: url('/images/salamander.png'); 
}

多个字段list数据循环

[code]//sass style
//-------------------------------
$animal-data: (puma, black, default),(sea-slug, blue, pointer),(egret, white, move);
@each $animal, $color, $cursor in $animal-data {
  .#{$animal}-icon {
    background-image: url('/images/#{$animal}.png');
    border: 2px solid $color;
    cursor: $cursor;
  }
}

//css style
//-------------------------------
.puma-icon {
  background-image: url('/images/puma.png');
  border: 2px solid black;
  cursor: default; 
}
.sea-slug-icon {
  background-image: url('/images/sea-slug.png');
  border: 2px solid blue;
  cursor: pointer; 
}
.egret-icon {
  background-image: url('/images/egret.png');
  border: 2px solid white;
  cursor: move; 
}

多个字段map数据循环

[code]//sass style
//-------------------------------
$headings: (h1: 2em, h2: 1.5em, h3: 1.2em);
@each $header, $size in $headings {
  #{$header} {
    font-size: $size;
  }
}

//css style
//-------------------------------
h1 {
  font-size: 2em; 
}
h2 {
  font-size: 1.5em; 
}
h3 {
  font-size: 1.2em; 
}

sass入门

参考资料

sass简介

sass安装

Ruby安装

sass安装

sass语法

sass文件后缀

导入

变量

普通变量

默认变量

特殊变量

多值变量

list

map

全局变量

嵌套

选择器嵌套

属性嵌套

@at-root

混合

无参数、单参数、多参数

多组值参数mixin

继承

基本继承

占位选择器

函数

其他参考资料

运算

条件判断及循环

@if判断

三目判断

for循环

@each循环

单个字段list数据循环

多个字段list数据循环

多个字段map数据循环

相关资料