学习笔记--SASS编程基础（一）变量

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/gavincz/article/details/79701215

变量——Variables

SASS 中的变量，必须是$符号开头，后面紧跟变量名，变量名称和变量值之间要使用冒号:进行分隔（参考 CSS 属性和值的设定语法），如果值后面加上[!default]就表示默认值。

变量的使用：

引用变量的值，只需直接使用变量名称，即可引用定义的变量的值。

例如：   sass编译： $color:#fff;                                          css监听效果：

                                body{                                                         body{

                                        color:$color;                                               color:#fff;

                                }                                                                 }

sass编译中，一般会用到以下几种变量

 1、普通变量

        普通变量，定义之后可以在全局范围内使用，如：

        $background:#ac0;                    

         #box{

                    height:auto;

                    background:$background;

         }       

        title_p{

                    width:100%;

                     background:$background;

        }

 2、默认变量

        sass 的默认变量是基于组件化开发的过程中，进行优化处理的；默认变量需要在值的后面加上 !default  进行标识

        默认变量的覆盖：在默认变量前后，重新声明变量并赋值即可

        $fontsize : 12px  !default  ; 

        font-size : $fontsize ;

 3、特殊变量

一般情况下，我们定义的变量都是属性值，可以直接使用，但是如果变量作为属性或者其他的特殊情况下，必须使用#{$variable}的形式进行调用。  #{$variable}就是取值的一种特殊形式，符合特殊用法。

比如：     $marginDirection : top  !default ;  

               $boxfontsize : 16px ;

               $boxlineheight : 1.5 ;

                margin - #{ $marginDirection } : 15px ; // 变量$marginDirection 作为 margin 的属性（top）

                font : #{ $boxfontsize : 16px } / #{ $boxlineheight : 15 }  // 其他的特殊情况

即            margin - top : 15px ;

                font : 16px /1.5 ;