css预处理——sass

浏览器不认识sass，因此使用sass就要编译，有两种方式：

1. 命令行编译
2. 工程化编译

使用

• SASS文件就是普通的文本文件，里面可以直接使用CSS语法。文件后缀名是.scss

///在屏幕上显示.scss文件转化的css代码
　sass test.scss

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

sass test.scss test.css

• SASS四个编译风格的选项：
  1. nested：默认值,嵌套缩进的css代码
  2. expanded：没有缩进的、扩展的css代码。
  3. compact：简洁格式的css代码。
  4. compressed：压缩后的css代码。（生产环境中用得最多）

sass --style compressed test.sass test.css

SASS监听某个文件或目录，一旦源文件有变动，就自动生成编译后的版本。

// 监听文件
　　sass --watch input.scss:output.css

　　// 监听目录
　　sass --watch app/sass:public/stylesheets

---

变量

• 所有变量以$开头。

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

• 变量镶嵌在字符串中，必须写在#{}之中：

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

• 允许代码使用算式：

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

• 嵌套：
• 选择器嵌套

css代码

div h1{
    color:red;
}

可以写成

div{
    h1{
        color:red;
    }
}

• 属性嵌套

如：border-color:red

p{
    border：{
        color:red;
    }
}

ps:在border后面必须加上冒号

• 在嵌套代码块内，可以加上&引用父元素
• &在前
  css代码

h1{
    font-size: 20px  ;
  margin-bottom: 10px  ;
  &.some-seclector{
       font-size: 24px  ;
    margin-bottom: 20px ;
  }
}

输出css

h3{
     font-size: 20px  ;
  margin-bottom: 10px  ;
}
h3.some-selector {  
  font-size: 24px;  
  margin-bottom: 20px;  
}  

• &在后
  css代码

h1{
    font-size: 20px  ;
  margin-bottom: 10px  ;
  .some-seclector &{
       font-size: 24px  ;
    margin-bottom: 20px ;
  }
}

输出css

h3 {  
  font-size: 20px;  
  margin-bottom: 10px;  
}  
.some-parent-selector h3 {  
  font-size: 24px;  
  margin-bottom: 20px;  
}  

• 注释
• [ ]//aaaaaaaaaaaaaaa
• [ ]/* */

---

代码的重用

• 继承

SASS允许一个选择器，继承另一个选择器

.class1 {
　　　　border: 1px solid #ddd;
　　}

class2要继承class1，就要使用@extend命令：

.class2{
    @extend.class1;
    font-size:120%;
}

• Mixin

Mixins能够包含任何在 CSS 和 Sass 中有效的内容。

@mixin link {  
    a {  
        color: blue;

        &:visited {
            color: purple;
        }  
        &:hover {
            color: white;
        }  
        &:active {
            color: red;
        }  
    }
}

可以重用代码

使用@mixin命令，定义一个代码块

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

使用@include命令，调用这个mixin

div{
    @include left;
    background-color: green;
}

解析之后

div{
    float:left;
    margin-left:10px;
    background-color: green;
}

在mixin模块的定义中还可以包含其他的mixin，如：

@mixin button-blue {  
    @include button;  
    @include link;  
}

当Mixins模块包含选择器和规则集，也就是mixins包含的内容本身就是有效的css样式时，他们就可以在其他规则集上被调用

@mixin link {  
    a {  
        color: blue;

        &:visited {
            color: purple;
        }  
        &:hover {
            color: white;
        }  
        &:active {
            color: red;
        }  
    }
}
之后可以直接调用这个模块，即使不在一个选择器上

@include link;

这段代码将会被解析：
a {  
    color: blue;

    &:visited {
        color: purple;
    }  
    &:hover {
        color: white;
    }  
    &:active {
        color: red;
    }  
}

之所以能这样调用是因为这个mixin模块内既包含了选择器也包含了样式，如果没有选择器，那么编译后将不会有内容显示。

• 参数的使用

@mixin button($background) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

.button-green {  
    @include button(green);  
}

解析后

.button-green {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: green;  
}

传递多个参数，参数间用逗号隔开

@mixin button($background, $color) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: $color;  
    background: $background;  
}

.button-green {  
    @include button(green, #fff);  
}

给参数设置默认值

@mixin button($background: green) {  
    font-size: 1em;  
    padding: 0.5em 1.0em;  
    text-decoration: none;  
    color: #fff;  
    background: $background;  
}

如果想要覆盖参数值，则：

.button-blue {  
    @include button(blue);  
}

关键字参数

一起传递关键字名称和值也被称为命名参数，你也可以以任意顺序传递命名参数。下面两种传递方式解析后会得到相同的结果。

.button-green{
    @include button($background:green,$color:#fff);
}

@mixin生成浏览器前缀：

@mixin prefixer($property,$value,$prefixers:webkit moz){
    #{$property}:$value;
    
    @each $prefixer in $prefixers{
        @if $prefix ==webkit{
            -webkit-#{$property}:#{$value};
        }
        @else if $prefix==moz{
            -moz-#{$property}:#{$value};
        }
        @else if $prefix==o{
            -o-#{$property}:#{$value};
        }
        @else if $prefix==ms{
            -ms-#{$property}:#{$value};
        }
    }
}

使用方法：
#main{
    @include prefixer(border-radius,10px,webkit moz ms o);
}

编译为：
#main {
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
  -ms-border-radius: 10px;
  border-radius: 10px; }

• 颜色函数

SASS提供了一些内置的颜色函数，以便生成系列颜色。

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

• 插入文件

@import命令，用来插入外部文件

@imoort "path/filename.scss";

如果是插入.css文件，则等同于css的import命令：

@import "foo.css";

---

条件语句

@if b+a==2 {
    border:1px solid red;
}
@else if a+b==3 {
    background-color: #fff;
}

---

循环语句

• for循环

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

• while循环

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

• each命令

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

---

自定义函数

@function double($n){
    @return $n*2;
}

#sidebar{
    width:double(5px);
}