sass变量的详细使用

  • sass变量的详细使用已关闭评论
  • 17 次浏览
  • A+
所属分类:Web前端
摘要

sass变量同javascript变量,可以用来存储一些信息,并且可以重复使用。先来对比一下css中的变量

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变量的定义

定义规则:

  1. 变量以美元符号($)开头,后面跟变量名;
  2. 变量名是不以数字开头的可包含字母、数字、下划线、横线(连接符);
  3. 写法同css,即变量名和值之间用冒号(:)分隔;
  4. 变量一定要先定义,后使用;

连接符与下划线

通过连接符(-)与下划线(_) 定义的同名变量为同一变量,建议使用连接符(-)

例如

$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; }