SASS详解之变量($)

喜欢ヅ旅行 2022-09-17 10:27 263阅读 0赞

提到变量，很多人不禁想到很多如JavaScript、PHP等等，但是今天，SASS中也有变量的概念，这也是SASS迷人的地方之一。有了变量，我们就可以简单改改变量就可以让整个样式换一种风格，而不需要大篇幅的复制粘贴改样式了。

# 　变量的语法 #

使用方法就是在“$”后添加变量名称然后与变量值用冒号“:”链接。如下

*SASS代码*

$width : 10px;
    
    .meng {
    	width : $width;
    }

*编译后的CSS代码*

.meng {
      width: 10px;
    }

# 　变量的作用域 #

变量只在他们定义的级别嵌套选择。如果他们定义以外的任何嵌套选择，他们是随处都可以用的。但是若定义在嵌套之中，那么这个变量就只能服务于这个嵌套之内的属性了。如下

*SASS代码*

.long {
    	$width : 10px;
    	.meng {
    		width : $width;
    		height : $height;
    
    	}
    }
    .zhan {
    	height:$height;
    }
    .xiao {
    	width:$width;
    }

*编译后的CSS代码*

.long .meng {
      width: 10px;
      height: 10px;
    }
    
    .zhan {
      height: 10px;
    }

如上所见，在编译的时候，是会报错的。因为类名“.xiao”宽度的变量“$width”是在类名“.long”嵌套之中，在外面是找不到的，这就是变量的作用域问题。所以会报错的。

# 　变量的默认值(!default) #

在日常编辑过程中，可以给变量添加默认值(!default)标志。如果在其变量值没有单独设定，那么就用添加默认值的变量值。若设定了，那么就用重新设定的变量值。如下

*SASS代码*

$width : 10px !default;
    
    .meng {
    	width : $width;
    }
    
    .long {
    	$width :20px;
    	width : $width;
    }
    
    $width :30px;
    .xiao {
    	width : $width;
    }
    
    $height : 20px;
    $height : 10px !default;
    .zhan {
    	width : $width;
    	height : $height;
    }

*编译后的CSS代码*

.meng {
      width: 10px;
    }
    
    .long {
      width: 20px;
    }
    
    .xiao {
      width: 30px;
    }
    
    .zhan {
      width: 30px;
      height: 20px;
    }

上面的实例告诉我们，不管变量在哪里，只要重新设定新的值了，那么就不会再用那个带有量的默认值(!default)的变量值。

# 　变量的差值应用(  \#\{\}  ) #

变量不仅可以用在属性值，还可以用在选择器或者是属性上面。下面是变量使用在选择器上的小实例

*SASS代码*

$class : meng;
    
    .#{$class} {
    	width : 20px;
    }

*编译后的CSS代码*

.meng {
      width: 20px;
    }

通过上面的实例可以看出，使用这个小技巧可以方便省去不少的时间，因为平时我们编写的时候会有很多类似的东西，我们都可以用变量来把他们一一代替。下面是变量使用在属性上的小实例

*SASS代码*

$class : height;
    $lineHeight :30px;
    $fontSize : 20px;
    
    .meng {
        #{$class} : 20px;
        font:bold #{$lineHeight}/$fontSize "Arial";
    }

*编译后的CSS代码*

.meng {
      height: 20px;
      font: bold 30px/20px "Arial";
    }

# 　声明多个变量    #

变量可以一个一个的声明，也可以多个一起声明。多个一起声明，用起来是比较方便的，特别是声明相似功能的变量。如下

SASS代码

$linkSize: 30px 20px !default;
    
    a{
       font-size:nth($linkSize,1);
    
        &:hover{
            font-size:nth($linkSize,2);
        }
    }

编译后的CSS代码

a {
      font-size: 30px;
    }
    a:hover {
      font-size: 20px;
    }

SASS详解之变量就为大家介绍到这里了，希望大家看完SASS详解之变量会对SASS中的变量有所了解。只有了解了SASS详解之变量，才能在学习SASS的道路上走得更远。