Sass初入门

什么是CSS预处理器？

CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。

 

什么是Sass？

Sass是一门高于CSS的元语言，它能用来清洗地、结构化地描述文件样式，有着比普通CSS更加强大的功能。Sass能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。

 

Sass的安装步骤：

第一步进入Ruby官网安装ruby（http://rubyinstaller.org/downloads），安装在C盘并且选中第二项；

第二步在控制面板中找到Ruby，然后打开start command prompt with Ruby，输入gem install sass

跟Sass有关的命令：

检查版本号（sass -v），也可以用来确认sass是否安装成功；

更新sass（gem update sass）

卸载sass（gem uninstall sass）

 

Sass语法格式：

老式的语法通过tab键控制缩进，不带任何的分号和大括号

$font-stack:"微软雅黑",sans-ser
$primary-color:red

body
    font-family:$font-stack
    color:$primary-color

 

新式语法又称scss，书写格式几乎和css一模一样

$font-stack:"微软雅黑",sans-ser；
$primary-color:red;

body{
    font-family:$font-stack;
    color:$primary-color;
}

注意：编译新式语法的时候文件后缀名得为".scss"，而不是".sass"。不然编译会不通过

 

Sass的编译：

命令行单文件编译（一次编译，不能动态监测sass的变动）

命令行单文件编译（动态监测）

 

 

Sass界面编辑工具：Koala

http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html

（导入sass文件，在文件那里单击右键选择set output path可以编译成css文件）

 

Sass不同样式的输出方法

嵌套输出方式：sass --watch test.scss:test.css --style nested

展开输出方式：sass --watch test.scss:test.css --style expanded

紧凑输出方式：sass --watch test.scss:test.css --style compact

压缩输出方式：sass --watch test.scss:test.css --style compressed

 

Sass定义变量的语法

变量声明符 变量名称:变量值;

$width:300px;

 

Sass的全局变量和局部变量

$color: orange !default;//定义全局变量
.block {
   color: $color;//调用全局变量
}
em {
   $color: red;//定义局部变量（全局变量 $color 的影子）
a {
   color: $color;//调用局部变量
  }
}

Sass选择嵌套

nav {
    a {
        color: red;

        header & {
            color:green;
        }
    }
}

编译后：

nav a {
    color:red;
}
header nav a {
    color:green;
}

 

Sass属性嵌套

.box {
    border: {
        top: 1px solid red;
        bottom: 1px solid green;
    }
}

编译后：

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}

 

Sass伪类嵌套

.clearfix{
    &:before,
    &:after {
        content:"";
        display: table;
    }
    &:after {
        clear:both;
        overflow: hidden;
    }
}

编译后：

clearfix:before, .clearfix:after {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
    overflow: hidden;
}

Sass混合宏（声明）

//不带参数的混合宏
@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

 

//带参数的混合宏
@mixin border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}

//复杂的混合宏
@mixin box-shadow($shadow...) {
    @if length($shadow) >= 1 {
        @include prefixer(box-shadow, $shadow);
    } @else{
        $shadow:0 0 4px rgba(0,0,0,.3);
        @include prefixer(box-shadow, $shadow);
    }
}

这个 box-shadow 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代。简单的解释一下，当 $shadow 的参数数量值大于或等于“ 1 ”时，表示有多个阴影值，反之调用默认的参数值“ 0 0 4px rgba(0,0,0,.3) ”。

更为详细的说明：http://www.cnblogs.com/alice-shan/p/4956302.html

 

Sass混合宏（调用）

//声明混合宏
@mixin border-radius{
    -webkit-border-radius: 3px;
    border-radius: 3px;
}
//调用混合宏
button {
    @include border-radius;
}
//编译后
button {
    -webkit-border-radius: 3px;
    border-radius: 3px;
}

 

Sass混合宏（传参）

//传参不带默认值
@mixin border-radius($radius){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
//调用
.box {
    @include border-radius(3px);
}

//传参带默认值
@mixin border-radius($radius:3px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
//调用
.btn {
    @include border-radius;
}

//传多个参数
@mixin center($width,$height){
    width: $width;
    height: $height;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -($height) / 2;
    margin-left: -($width) / 2;
}
//调用
.box-center {
    @include center(500px,300px);
}

//传非常多参数
@mixin box-shadow($shadows...){
    @if length($shadows) >= 1 {
        -webkit-box-shadow: $shadows;
        box-shadow: $shadows;
    } @else {
        $shadows: 0 0 2px rgba(#000,.25);
        -webkit-box-shadow: $shadow;
        box-shadow: $shadow;
    }
}
//调用
.box {
    @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#000,.2));
}

Sass混合宏的不足

在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起。

 

Sass的继承

.btn {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
}
.btn-primary {
    color: #fff;
    @extend .btn;
}
.btn-second {
    color: #fff;
    @extend .btn;
}

//编译后
.btn, .btn-primary, .btn-second {
    border: 1px solid #ccc;
    padding: 6px 10px;
    font-size: 14px;
}
.btn-primary {
    color: #fff;
}
.btn-second {
    background-clor: orange;
    color: #fff;
}

Sass占位符

Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。来看一个演示：

//这段代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你
//的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码：
%mt5 {
    margin-top: 5px;
}
%pt5{
    padding-top: 5px;
}

//调用
%mt5 {
    margin-top: 5px;
}
%pt5{
    padding-top: 5px;
}
.btn {
    @extend %mt5;
    @extend %pt5;
}
.block {
    @extend %mt5;
    span {
        @extend %pt5;
    }
}

//编译后
.btn, .block {
    margin-top: 5px;
}
.btn, .block span {
    padding-top: 5px;
}

Sass混合宏、继承和占位符的使用场景

1、如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块；

2、如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承；

3、占位符和继承的主要区别的，“占位符是独立定义，不调用的时候是不会在 CSS 中产生任何代码；继承是首先有一个基类存在，不管调用与不调用，基类的样式都将会出现在编译出来的 CSS 代码中”。

 

Sass插值

使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分。让我们看一下下面的例子：

$properties: (margin, padding);
    @mixin set-value($side, $value) {
        @each $prop in $properties {
            #{$prop}-#{$side}: $value;
        }
}
.login-box {
    @include set-value(top, 14px);
}

//编译后（它可以让变量和属性工作的很完美）
.login-box {
    margin-top: 14px;
    padding-top: 14px;
}

 

当你想设置属性值的时候你可以使用字符串插入进来。另一个有用的用法是构建一个选择器。可以这样使用：

@mixin generate-sizes($class, $small, $medium, $big) {
     .#{$class}-small { font-size: $small; }
     .#{$class}-medium { font-size: $medium; }
     .#{$class}-big { font-size: $big; }
}
@include generate-sizes("header-text", 12px, 20px, 40px);

//编译后
.header-text-small { font-size: 12px; }
.header-text-medium { font-size: 20px; }
.header-text-big { font-size: 40px; }

在Sass混合宏中无法使用插值，在继承中倒是能够使用

%updated-status {
    margin-top: 20px;
    background: #F00;
}
.selected-status {
    font-weight: bold;
}
$flag: "status";
    .navigation {
        @extend %updated-#{$flag};
        @extend .selected-#{$flag};
}

Sass运算符

能够进行加减乘除

//加法，不同类型的单位在计算时会出错
.box {
    width: 20px + 8in;
}

 

//减法，不同类型的单位在计算时会出错
$full-width: 960px;
$sidebar-width: 200px;
.content {
    width: $full-width - $sidebar-width;
}

//乘法，不同类型的单位在计算时会出错
.box {
    width: 10px * 2;
}

 

//除法，不同类型的单位在计算时会出错
.box {
    width: (100px / 2);
}

 

Sass中的@if

@mixin blockOrHidden($boolean:true) {
    @if $boolean {
        @debug "$boolean is #{$boolean}";
        display: block;
    }
    @else {
        @debug "$boolean is #{$boolean}";
        display: none;
    }
}

.block {
    @include blockOrHidden;
}

.hidden{
    @include blockOrHidden(false);
}

//编译后
.block {
    display: block;
}
.hidden {
    display: none;
}        

Sass中的@for

1、@for $i from <start>through<end>

//$i表示变量，start表示起始值，end表示结束值
@for $i from 1 through 3 {
    .item-#{$i} { width: 2em * $i; }
}

//编译后
.item-1 {
    width: 2em;
}
.item-2 {
    width: 4em;
}
.item-3 {
    width: 6em;
}

2、@for $i from <start>to<end>

@for $i from 1 to 3 {
    .item-#{$i} { width: 2em * $i; }
}

编译后
.item-1 {
    width: 2em;
}
.item-2 {
    width: 4em;
}

3、@for进阶

$grid-prefix: span !default;
$grid-width: 60px !default;
$grid-gutter: 20px !default;

%grid {
    float: left;
    margin-left: $grid-gutter / 2;
    margin-right: $grid-gutter / 2;
}
@for $i from 1 through 12 {
    .#{$grid-prefix}#{$i}{
        width: $grid-width * $i + $grid-gutter * ($i - 1);
    @extend %grid;
    }
}

//检测网址

http://sassmeister.com/

 

Sass中@while

$types: 4;
$type-width: 20px;
@while $types > 0 {
    .while-#{$types} {
        width: $type-width + $types;
    }
    $types: $types - 1;
}

//编译后
.while-4 {
    width: 24px;
}
.while-3 {
    width: 23px;
}
.while-2 {
    width: 22px;
}
.while-1 {
    width: 21px;
}

 

Sass中@each循环

$list: adam john wynn mason kuroir;//$list 就是一个列表
@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}
.author-bio {
    @include author-images;
}

//检测网址

http://sassmeister.com/

 

Sass中的字符串函数之unquote（）函数

unquote() 函数主要是用来删除一个字符串中的引号，如果这个字符串没有带有引号，将返回原始的字符串。简单的使用终端来测试这个函数的运行结果：

.test1 {
    content: unquote('Hello Sass!') ;
}
.test2 {
    ontent: unquote("'Hello Sass!");
}
.test3 {
    content: unquote("I'm Web Designer");
}
.test4 {
    content: unquote("'Hello Sass!'");
}
.test5 {
    content: unquote('"Hello Sass!"');
}
.test6 {
    content: unquote(Hello Sass);
}

//检测网址

http://sassmeister.com/

注意：从测试的效果中可以看出，unquote( ) 函数只能删除字符串最前和最后的引号（双引号或单引号），而无法删除字符串中间的引号。如果字符没有带引号，返回的将是字符串本身。

 

 

Sass中的字符串函数之quote（）函数

quote() 函数刚好与 unquote() 函数功能相反，主要用来给字符串添加引号。如果字符串，自身带有引号会统一换成双引号 ""。如：

.test1 {
    content: quote('Hello Sass!');
}
.test2 {
    content: quote("Hello Sass!");
}
.test3 {
    content: quote(ImWebDesigner);
}
.test4 {
    content: quote(' ');
}

//检测网址

http://sassmeister.com/

注意：使用 quote() 函数只能给字符串增加双引号，而且字符串中间有单引号或者空格时，需要用单引号或双引号括起，否则编译的时候将会报错。同时 quote() 碰到特殊符号，比如： !、?、> 等，除中折号 - 和 下划线_ 都需要使用双引号括起，否则编译器在进行编译的时候同样会报错：

 

 

Sass中字符串函数之To-upper-case()和To-lower-case()

1、To-upper-case() 函数将字符串小写字母转换成大写字母。如：

.test {
    text: to-upper-case(aaaaa);
    text: to-upper-case(aA-aAAA-aaa);
}

//编译后
.test {
    text: AAAAA;
    text: AA-AAAA-AAA;
}

2、To-lower-case() 函数将字符串小写字母转换成大写字母。如：

.test {
    text: to-lower-case(AAAAA);
    text: to-lower-case(aA-aAAA-aaa);
}

//编译后
.test {
    text: aaaaa;
    text: aa-aaaa-aaa;
}

Sass数字函数之percentage()

percentage()函数主要是将一个不带单位的数字转换成百分比形式，语法有：

1、percentage(.2)；2、percentage(2px / 10px)；3、percentage(2em / 10em)

.footer{
    width : percentage(.2)
}

//编译后
.footer{
    width : 20%
}

Sass数字函数之round()

round() 函数可以将一个数四舍五入为一个最接近的整数，在round() 函数中可以携带单位的任何数值：

.footer {
    width:round(12.3px)
}

//编译后
.footer {
    width: 12px;
}

Sass数字函数之ceil()

ceil() 函数将一个数转换成最接近于自己的整数，会将一个大于自身的任何小数转换成大于本身 1 的整数。也就是只做入，不做舍的计算：

.footer {
    width:ceil(12.3px);
}

//编译后
.footer {
    width: 13px;
}

Sass数字函数之floor()

floor() 函数刚好与 ceil() 函数功能相反，其主要将一个数去除其小数部分，并且不做任何的进位。也就是只做舍，不做入的计算：

.footer {
       width:floor(12.3px);
}

//编译后
.footer {
    width: 12px;
}

Sass数字函数之abs()

abs( ) 函数会返回一个数的绝对值。

.footer {
    width:abs(-12.3px);
}

//编译后
.footer {
    width: 12.3px;
}

Sass数字函数之min()

min() 函数功能主要是在多个数之中找到最小的一个，这个函数可以设置任意多个参数：

 

Sass数字函数之random()

random() 函数是用来获取一个随机数：

 

Sass中length()函数

length() 函数主要用来返回一个列表中有几个值，简单点说就是返回列表清单中有多少个值：

 

Sass中nth()函数

nth() 函数用来指定列表中某个位置的值。不过在 Sass 中，nth() 函数和其他语言不同，1 是指列表中的第一个标签值，2 是指列给中的第二个标签值，依此类推。如：

//语法
nth($list,$n)

>> nth(10px 20px 30px,1)
10px
>> nth((Helvetica,Arial,sans-serif),2)
"Arial"
>> nth((1px solid red) border-top green,1)
(1px "solid" #ff0000)

 

Sass中join()函数

join() 函数是将两个列表连接合并成一个列表。

>> join(10px 20px, 30px 40px)
(10px 20px 30px 40px)
>> join((blue,red),(#abc,#def))
(#0000ff, #ff0000, #aabbcc, #ddeeff)
>> join((blue,red),(#abc #def))
(#0000ff, #ff0000, #aabbcc, #ddeeff)

不过 join() 只能将两个列表连接成一个列表，如果直接连接两个以上的列表将会报错：

>> join((blue red),(#abc, #def),(#dee #eff))
SyntaxError: $separator: (#ddeeee #eeffff) is not a string for `join'

但很多时候不只碰到两个列表连接成一个列表，这个时候就需要将多个 join() 函数合并在一起使用：

>> join((blue red), join((#abc #def),(#dee #eff)))
(#0000ff #ff0000 #aabbcc #ddeeff #ddeeee #eeffff)

Sass中append()函数

append() 函数是用来将某个值插入到列表中，并且处于最末位。

>> append(10px 20px ,30px)
(10px 20px 30px)
>> append((10px,20px),30px)
(10px, 20px, 30px)
>> append(green,red)
(#008000 #ff0000)
>> append(red,(green,blue))
(#ff0000 (#008000, #0000ff))

 

Sass中zip()函数

zip()函数将多个列表值转成一个多维的列表：

>> zip(1px 2px 3px,solid dashed dotted,green blue red)
((1px "solid" #008000), (2px "dashed" #0000ff), (3px "dotted" #ff0000))

Sass中index()函数

index() 函数类似于索引一样，主要让你找到某个值在列表中所处的位置。在 Sass 中，第一个值就是1，第二个值就是 2，依此类推：

>> index(1px solid red, 1px)
1
>> index(1px solid red, solid)
2
>> index(1px solid red, red)
3

Sass中type-of()函数

type-of() 函数主要用来判断一个值是属于什么类型：

>> type-of(100)
"number"
>> type-of(100px)
"number"
>> type-of("asdf")
"string"
>> type-of(asdf)
"string"
>> type-of(true)
"bool"
>> type-of(false)
"bool"
>> type-of(#fff)
"color"
>> type-of(blue)
"color"
>> type-of(1 / 2 = 1)
"string"

Sass中unit()函数

unit() 函数主要是用来获取一个值所使用的单位，碰到复杂的计算时，其能根据运算得到一个“多单位组合”的值，不过只充许乘、除运算：

>> unit(100)
""
>> unit(100px)
"px"
>> unit(20%)
"%"
>> unit(1em)
"em"
>> unit(10px * 3em)
"em*px"
>> unit(10px / 3em)
"px/em"
>> unit(10px * 2em / 3cm / 1rem)
"em/rem"

Sass中unitless()函数

unitless() 函数相对来说简单明了些，只是用来判断一个值是否带有单位，如果不带单位返回的值为 true，带单位返回的值为 false：

>> unitless(100)
true
>> unitless(100px)
false
>> unitless(100em)
false
>> unitless(100%)
false
>> unitless(1 /2 )
true
>> unitless(1 /2 + 2 )
true
>> unitless(1px /2 + 2 )
false

Sass中comparable()函数

comparable() 函数主要是用来判断两个数是否可以进行“加，减”以及“合并”。如果可以返回的值为 true，如果不可以返回的值是 false：

comparable(2px,1px)
true
>> comparable(2px,1%)
false
>> comparable(2px,1em)
false
>> comparable(2rem,1em)
false
>> comparable(2px,1cm)
true
>> comparable(2px,1mm)
true
>>comparable(2px,1rem)
false
>> comparable(2cm,1mm)
true

 

Sass中Miscellaneous函数

在这里把 Miscellaneous 函数称为三元条件函数，主要因为他和 JavaScript 中的三元判断非常的相似。他有两个值，当条件成立返回一种值，当条件不成立时返回另一种值：

>> if(true,1px,2px)
1px
>> if(false,1px,2px)
2px

Sass中Map函数

http://www.imooc.com/code/8454