Sass入门（二）

sass在线编译—-学习用

变量

声明变量

默认变量
在默认变量之前重新声明下变量会覆盖默认变量。在进行组件化开发的时候会非常有用。

$baseLineHeight:1.5 !default;

局部变量和全局变量

//SCSS
$color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量)
.block {
  color: $color;//调用全局变量
}
em {
  $color: red;//定义局部变量
  a {
    color: $color;//调用局部变量
  }
}
span {
  color: $color;//调用全局变量
}

嵌套

选择器嵌套
css

nav a {
  color:red;
}

header nav a {
  color:green;
}

对于sass

nav {
  a {
    color: red;

    header & {
      color:green;
    }
  }  
}  //& 代表嵌套规则外层的父选择器,这里代表nav。

属性嵌套
css

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

sass

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

伪类嵌套
css

.box：before {
  content: "伪元素嵌套";
}

sass

.box{
  &：before {
    content:"伪元素嵌套";
  }
}

混合宏

简单理解就是，可以重用的代码块。
声明

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

调用

button {
    @include border-radius;
}

传参
这是ass 的混合宏强大的地方

@mixin border-radius($radius: 10px){
  -webkit-border-radius: $radius;
  border-radius: $radius;
} //10px是默认值（缺省值）

.box {
  @include border-radius(3px);
}

继承

关键词 @extend

.class1 {
　　　　border: 1px solid #ddd;
　　}
.class2 {
　　　　@extend .class1;
　　　　font-size:120%;
　　}

占位符 %placeholder

%placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。

%mt5 {
  margin-top: 5px;
}

.btn {
  @extend %mt5;
}

混合宏 VS 继承 VS 占位符

• 混合宏不会自动合并相同的样式代码，造成代码的冗余，但是它可以传参数，所以，如果代码块中涉及到变量，建议使用混合宏来创建相同的代码块。
• 继承的代码块可以合并到一起，无需用变量且有一个基类时，用继承。
• 占位符。不需要传变量时用。

插值语句 #{}

在选择器或属性名中使用变量：

$name: foo;
$attr: border;
p.#{$name} {
  #{$attr}-color: blue;
}

可以在 @extend 中使用插值

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

Sass运算

运算时碰到不同类型的单位时，编译也会报错
加减乘与JS一样
除法符号/在 CSS 中已做为一种符号使用。所以用的时候加括号

.box {
  width: (100px / 2);  
}

如果/是另一个数学表达式的一部分，或者有变量参与运算的话，不加括号也可以。