Sass 基本特性-基础笔记

一、变量声明 $

　　变量的声明使用 $ 所有的变量必须声明到变量调用之前

　　从3.4版本开始，Sass已经可以正确处理作用域的概念
　　在局部范围声明一个已经存在于全局内的变量时，局部变量就会成为全局变量的影子。局部变量只会在局部范围内覆盖全局变量。
　　　　 sass中的变量声明示意图

$btn-primary-color:#000;

　　定义默认变量 !default
　　如果有重名变量，则不管声明是否在默认变量之前，都将覆盖默认变量

1 $btn-primary-color:#000;
2 $btn-primary-color:#fff !default;//加上 ！default 表示默认值
3 $btn-primary-border:darken($btn-primary-color,5%);
4 
5 
6 body {
7     color:$btn-primary-color;
8     background-color:$btn-primary-border;
9 }

　　输出为:

1 body {
2   color: #000;
3   background-color: black; }

二、嵌套写法

　　1.选择器嵌套　　

1 nav {
2     a{
3         color:red;
4         header & {
5             color:green;
6         }
7     }
8 }

　　输出为:

1 nav a {
2   color: red; }
3   header nav a {
4     color: green; }

　　避免选择器嵌套：
1.选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。
2.选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。

　　2.属性嵌套

　　　　个人理解：选择器嵌套和属性嵌套的区别就是，属性嵌套器的属性名加":" 而属性嵌套器没有

1 box {
2     border: { //加了:就是属性嵌套，不加就是选择器嵌套
3         top: 1px solid red;
4         bottom: 2px solid green;
5     }

　　输出为:

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

　　3.伪类嵌套

 1 clearfix {
 2     &:before,
 3     &:after {
 4         content:"";
 5         display: table;
 6     }
 7     &:after {
 8         clear:both;
 9         overflow: hidden;
10     }
11 }

　　输出为:

1 .clearfix:before, .clearfix:after {
2   content: "";
3   display: table; }
4 .clearfix:after {
5   clear: both;
6   overflow: hidden; }

三、混合宏

　　　　给我的感觉就是这就是一个函数；可调用，可传参，返回计算后的值放到调用函数的位置

　　声明混合宏 - 使用"@mixin" 声明混合宏。
      可定义参数的默认值，可定义多个参数
      一个特别的参数"..."; 当混合宏的参数过多之时，可以使用参数来替代
           示例:

1 @mixin border-radius {//不带参数
2     -webkit-border-radius: 5px;
3     border-radius: 5px;
4 }

1 /*
2     声明带参数的混合宏
3 */
4 @mixin border-radius2($radius:3px) {
5     //调用时不传递参数则使用默认值3px；传递参数怎使用传递过来的参数
6     -webkit-border-radius: $radius;
7     border-radus: $radius;
8 }

 1 @mixin box-shadow($shadows...){
 2     @if length($shadows)>=1 {
 3         -webkit-box-shadow: $shadows;
 4         box-shadow: $shadows;
 5     } @else {
 6         $shadows: 0 0 2px rgba(#000,.25);
 7         -webkit-box-shadow: $shadows;
 8         box-shadow: $shadows;
 9     }
10 }

　　    调用混合宏 - 使用 @include
   　　　　优点：复用重复代码块
   　　　　缺点：不能智能的将相同的样式代码块合并在一起，生成冗余代码块。

　　调用不带参数混合宏:

1 button {
2     @include border-radius;
3 }

　　输出为:

1 button {
2   -webkit-border-radius: 5px;
3   border-radius: 5px; }

　　调用带参数(但不传递参数)混合宏:

1 button {
2     @include border-radius2;//使用默认值
3 }

　　输出为:

1 button {
2   -webkit-border-radius: 3px;
3   border-radus: 3px; }

　　调用带参数(传递参数)混合宏:

1 button {
2     @include border-radius2(10px);//传递值
3 }

　　输出为:

1 button {
2   -webkit-border-radius: 10px;
3   border-radus: 10px; }

　　调用多参数... 的混合宏

1 .box {
2     @include box-shadow(0 0 1px rgba(#000,.5),0 0 2px rgba(#fff,.2));
3 }

　　输出为:

1 .box {
2   -webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(255, 255, 255, 0.2);
3   box-shadow: 0 0 1px rgba(0, 0, 0, 0.5), 0 0 2px rgba(255, 255, 255, 0.2); }

四、扩展/继承 - @extend 继承已存在的类样式块

　　　与要继承的类样式块，组成组合选择器

　　　示例：

 1 .btn {
 2     border: 1px solid #ccc;
 3     padding: 6px 10px;
 4     font-size: 14px;
 5 }
 6 .btn-primary {
 7     background-color: #f36;
 8     color: #fff;
 9     @extend .btn;
10 }
11 .btn-second {
12     background-color: orange;
13     color: #fff;
14     @extend .btn;
15 }

　　输出为:

 1 .btn, .btn-primary, .btn-second {
 2   border: 1px solid #ccc;
 3   padding: 6px 10px;
 4   font-size: 14px; }
 5 
 6 .btn-primary {
 7   background-color: #f36;
 8   color: #fff; }
 9 
10 .btn-second {
11   background-color: orange;
12   color: #fff; }

五、占位符 %placeholder

　　　它可以取代以前css中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。
　示例：

 1 %mt5 {
 2     margin-top: 5px;
 3 }
 4 %pt5 {
 5     margin-top: 5px;
 6 }
 7 
 8 .btn {
 9     @extend %mt5;
10     @extend %pt5;
11 }

　　输出为:

1 .btn, .btn-primary, .btn-second {
2   margin-top: 5px; }
3 
4 .btn, .btn-primary, .btn-second {
5   margin-top: 5px; }

六、插值 - #{}

　　当你想设置属性值的时候你可以使用字符串插入进来，构建一个选择器。

　　示例:

1 $properties: (margin, padding);
2 @mixin set-value($side, $value){
3     @each $prop in $properties {
4         #{$prop}-#{$side}: $value;
5     }
6 }
7 .login-box {
8     @include set-value(top, 14px);
9 }

　　输出为:

1 .login-box {
2   margin-top: 14px;
3   padding-top: 14px; }

七、混合宏扩展/继承占位符比较

学习大漠老师 - Sass入门篇笔记 http://www.w3cplus.com/

Sass 基本特性-基础 笔记

Sass 基本特性-基础笔记