SASS语法►进阶

SASS语法--进阶

数字类型(Number)

For example:

1
2
3
4
5
6
7
8
/*! 数字类型 */
$n1: 1.2;
$n2: 12;
$n3: 14px;
p{
  font-size: $n3;
}

is compiled to:

1
2
3
4
/*! 数字类型 */
p {
  font-size: 14px;
}

字符串类型(String)

For example:

1
2
3
4
5
6
7
8
/*! 字符串类型*/
$s1: container;
$s2: 'container';
$s3: "container";
.#{$s3}{
  font-size: $n3;
}

is compiled to:

1
2
3
4
/*! 字符串类型*/
.container {
  font-size: 14px;
}

颜色类型

For example:

1
2
3
4
5
6
7
8
/*! 颜色类型*/
$c1: blue;
$c2: #fff;
$c3: rgba(255,255,0,0.5);
body{
  color: $c3;
}

is compiled to:

1
2
3
4
/*! 颜色类型*/
body {
  color: rgba(255, 255, 0, 0.5);
}

Boolean类型

For example:

1
2
3
/*! Bool类型*/
$bt: ture;
$bf: false;

Null类型

For example:

1
2
3
4
5
6
7
8
/*! Null类型*/
$null: null;
body{
  @if $null == null{
    color: red;
  }
}

is compiled to:

1
2
3
4
5
/*! Bool类型*/
/*! Null类型*/
body {
  color: red;
}

变量操作

For example:

1
2
3
4
5
6
$width1: 10px;
$width2: 15px;
span{
  width: $width1 - $width2;
}

is compiled to:

1
2
3
span {
  width: -5px;
}

For example:

1
2
3
a:hover{
  cursor: e + -resize;
}

is compiled to:

1
2
3
a:hover {
  cursor: e-resize;
}

For example:

1
2
3
4
5
6
a:before{
  content: "A" + bc;
}
a:before{
  content: A + 'bc';
}

is compiled to:

1
2
3
4
5
6
a:before {
  content: "Abc";
}
a:before {
  content: Abc;
}

For example:

1
2
3
4
5
6
7
p{
  padding: 3px + 4px auto; 
}
$version: 3;
p:before{
  content: 'Hello,Sass #{$version}';
}

is compiled to:

1
2
3
4
5
6
p {
  padding: 7px auto;
}
p:before {
  content: "Hello,Sass 3";
}

For example:

1
2
3
4
5
6
p{
  font: 20px / 10px;
  width: $width2 / 2; 
  width: round($width2) / 2;
  height: (100px / 2);
}

is compiled to:

1
2
3
4
5
6
p {
  font: 20px / 10px;
  width: 7.5px;
  width: 7.5px;
  height: 50px;
}

注意：
1.运算符之间的空格
2.相同运算单位

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*! Good*/
p{
  padding: 3px + 4px auto; 
}
/*! Bad*/
p{
  padding: 3px + 4px auto; 
}
/*! Good*/
p {
  font: (20px / 10px);
}
/*! Bad*/
p {
  font: (20px / 10em);
}

minix

For example:

1
2
3
4
5
6
7
@minix cont() {
  color: red;
}
body{
  @include cont();
}

is compiled to:

1
2
3
body {
  color: red;
}

For example:

1
2
3
4
5
6
7
@minix cont($color) {
  color: $color;
}
body{
  @include cont(red);
}

is compiled to:

1
2
3
body {
  color: red;
}

For example:

1
2
3
4
5
6
7
8
@mixin cont($color: red, $fontSize: 14px){
  color: $color;
  font-size: $fontSize;
}
body{
  @include cont($fontSize: 18px);
}

is compiled to:

1
2
3
4
body {
  color: red;
  font-size: 18px;
}

传递多值参数

For example:

1
2
3
4
5
6
7
8
9
@mixin box-shadow($shadow...){
  -moz-box-shadow: $shadow;
  -webkit-box-shadow: $shadow;
  box-shadow: $shadow;
}
.shadows{
  @include box-shadow(0px 4px 4px #555, 2px 6px 10px #6dd3ee);
}

is compiled to:

1
2
3
4
5
.shadows {
  -moz-box-shadow: 0px 4px 4px #555, 2px 6px 10px #6dd3ee;
  -webkit-box-shadow: 0px 4px 4px #555, 2px 6px 10px #6dd3ee;
  box-shadow: 0px 4px 4px #555, 2px 6px 10px #6dd3ee;
}

传递内容

For example:

1
2
3
4
5
6
7
8
9
@mixin style-for-iphone{
  @media only screen and (min-device-width: 320px) and (max-device-width:568px){
    @content;
  }
}
@include style-for-iphone{
  font-size: 12px;
}

is compiled to:

1
2
3
@media only screen and (min-device-width: 320px) and (max-device-width: 568px) {
  font-size: 12px;
}

用于响应式布局。

For example:

1
2
3
4
5
6
7
8
9
10
11
@function getzIndex($layer: default){
  $zindexMap: (default: 1, modal: 1000, dropdown: 500, grid: 300);
  $zindex: 1;
  @if map-has-key($zindexMap, $layer){
    $zindex: map-get($zindexMap, $layer);
  }
  @return $zindex;
}
@debug getzIndex('afd');
//$layer可选：default,modal,dropdown,grid

嵌套语法

For example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
.main-sec {
  font-family: $main-sec-ff;
  .headline {
    font: {
      family: $main-sec-ff;
      size: 16px;
    }
  }
  .detail {
    font-size: 12px;
  }
}

is compiled to:

1
2
3
4
5
6
7
8
9
10
11
12
.main-sec {
  font-family: "Microsoft YaHei";
}
.main-sec .headline {
  font-family: "Microsoft YaHei";
  font-size: 16px;
}
.main-sec .detail {
  font-size: 12px;
}