css：sass小记

sass小记

1.默认变量

$baseLineHeight:1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译后的css代码：

body{
    line-height:1.5;
}

覆盖默认变量的方式也很简单，只需要在默认变量之前重新声明下变量即可:

$baseLineHeight: 2;
$baseLineHeight: 1.5 !default;
body{
    line-height: $baseLineHeight; 
}

编译后的css代码：

body{
    line-height:2;
}

2.全局变量与局部变量

$color: orange ;//定义全局变量
.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}

3.选择器嵌套

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

编译结果：

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

4.属性嵌套

.box {
    border-top: 1px solid red;
    border-bottom: 1px solid green;
}
在 Sass 中我们可以这样写：

.box {
  border: {// 需要加：
   top: 1px solid red;
   bottom: 1px solid green;
  }
}

5.伪类嵌套

.clearfix{
&:before,
&:after {
    content:"";
    display: table;
  }
&:after {
    clear:both;
    overflow: hidden;
  }
}
编译出来的 CSS：

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

6.混合宏“@mixin”

不带参数混合宏：

@mixin border-radius{
    -webkit-border-radius: 5px;
    border-radius: 5px;
}
button {
    @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 border-radius($radius:5px){
    -webkit-border-radius: $radius;
    border-radius: $radius;
}
.box {
  @include border-radius;
}
.box {
  @include border-radius(3px);
}

复杂的混合宏：

@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 的混合宏，带有多个参数，这个时候可以使用“ … ”来替代

7.混合宏的不足

@mixin border-radius{
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

.box {
  @include border-radius;
  margin-bottom: 5px;
}

.btn {
  @include border-radius;
}
编译出来的 CSS：
.box {
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin-bottom: 5px;
}
.btn {
  -webkit-border-radius: 3px;
  border-radius: 3px;
}

Sass 在调用相同的混合宏时，并不能智能的将相同的样式代码块合并在一起,所以需要使用继承“@extend”.

8.扩展/继承

.btn {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
  @extend .btn;
}

.btn-second {
  background-color: orange;
  @extend .btn;
}
编译出来之后：能够合并代码
.btn, .btn-primary, .btn-second {
  border: 1px solid #ccc;
  padding: 6px 10px;
  font-size: 14px;
}

.btn-primary {
  background-color: #f36;
}

.btn-second {
  background-clor: orange;
}

9.占位符 %xxx
如果代码没有被 @extend 调用，他并没有产生任何代码块，只是静静的躺在你的某个 SCSS 文件中。只有通过 @extend 调用才会产生代码。

%mt5 {
  margin-top: 5px;
}
%pt5{
  padding-top: 5px;
}

.btn {
  @extend %mt5;
  @extend %pt5;
}
.block {
  @extend %mt5;
  span {
    @extend %pt5;
  }
}

编译出：

编译出来的CSS

//CSS
.btn, .block {
  margin-top: 5px;
}

.btn, .block span {
  padding-top: 5px;
}

通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起

10.混合宏 VS 继承 VS 占位符

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

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

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

11.插值#{}

12.sass运算（加减乘除）/变量运算/颜色运算

进阶

13.@if

    @if 条件 {
      display: block;
    } @else { 
     display: none;
    }

14.@for

@for $i from <start> through <end>
@for $i from <start> to <end>

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

15.@while

$types: 4;
$type-width: 20px;

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

16.@each

@mixin author-images {
    @each $author in $list {
        .photo-#{$author} {
            background: url("/images/avatars/#{$author}.png") no-repeat;
        }
    }
}

.author-bio {
    @include author-images;
}

17.字符串与数字函数
18.列表函数
19.颜色函数
20.@规则