sass变量（sass变量的详细使用）

sass变量同javascript变量  
    
    
   ，可以用来存储一些信息

     


     


     

，并且可以重复使用    
    
    
。

先来对比一下css中的变量

同css变量对比

CSS 变量是由 CSS 作者定义的 




 




 




，它包含的值可以在整个文档或指定的范围内重复使用   


     


     


   。

用CSS变量来实现简单的代码：

:root{ --font-size:18px; } .container{ font-size: var(--font-size); }

Sass变量

$font-size:14px; .container{font-size: $font-size;}

编译后：

.container { font-size: 14px; }

可以看出  

   

   

  ，两种达到的效果一样

     

     

     
，但sass更符合程序员的编程模式的方式  




  




  




，可编程    
    
    
、可维护   


     


     


   、可扩展....

更多强大的功能是css变量没法做到的

Sass变量的定义

定义规则：

变量以美元符号($)开头  


  


  


 ，后面跟变量名； 变量名是不以数字开头的可包含字母



 




 




 

、数字   

   

   

、下划线    

     

     

  、横线（连接符）； 写法同css
     
     
     ，即变量名和值之间用冒号(:)分隔； 变量一定要先定义
   




   




   




，后使用；

连接符与下划线

通过连接符（-）与下划线（_） 定义的同名变量为同一变量 



 



 



，建议使用连接符（-）

例如

$font-size:14px; $font_size:16px; .container{font-size: $font-size;}

编译后：

.container { font-size: 16px; }

局部变量

在选择器内容定义的变量                ，只能在选择器范围内使用

    




    




    



，这种变量称为局部变量

.container{ $font-size:14px; font-size: $font-size; }

如果这样用就不行

.container{ $font-size:14px; font-size: $font-size; } .footer{ font-size: $font-size; }

全局变量

定义后能全局使用的变量

第一种：在选择器外面的最前面定义的变量

$font-size:16px; .container{ font-size: $font-size; } .footer{ font-size: $font-size; }

第二种：使用 !global 标志定义全局变量

.container{ $font-size:16px !global; font-size: $font-size; } .footer{ font-size: $font-size; }

变量值类型

变量值的类型可以有很多种

支持 6 种主要的数据类型

数字














，1, 2, 13, 10px 字符串                ，有引号字符串与无引号字符串

     



     



     


，"foo", bar, baz 颜色














，blue, #04a3f9, rgba(255,0,0,0.5) 布尔型  
    
    
   ，true, false 空值

     


     


     

，null 数组 (list) 




 




 




，用空格或逗号作分隔符  

   

   

  ，1.5em 1em 0 2em, Helvetica, Arial, sans-serif maps, 相当于 JavaScript 的 object

     

     

     
，(key1: value1, key2: value2)

例如：

$layer-index:10; $border-width:3px; $font-base-family:Open Sans, Helvetica, Sans-Serif; $top-bg-color:rgba(255,147,29,0.6); $block-base-padding:6px 10px 6px 10px; $blank-mode:true; $var:null; // 值null是其类型的唯一值



 




 




 

。它表示缺少值  




  




  




，通常由函数返回以指示缺少结果   

   

   

。 $color-map: (color1: #fa0000, color2: #fbe200, color3: #95d7eb); $fonts: (serif: "Helvetica Neue",monospace: "Consolas"); .container{ $font-size:16px !global; font-size: $font-size; @if $blank-mode { background-color:#000; }@else{ background-color:#fff; } content: type-of($var); content:length($var); color: map-get($color-map,color2); } .footer{ font-size: $font-size; } // 如果列表中包含空值  


  


  


 ，则生成的CSS中将忽略该空值    

     

     

  。 .wrap{ font: 18px bold map-get($fonts, "sans"); }

默认值

定义变量时可以用!default来定义默认值

$color:#333; // 如果$color之前没定义就使用如下的默认值 $color:#666 !default; .container{ border-color: $color; }