SASS详解之基本语法

末蓝、 2022-09-17 10:22 221阅读 0赞

SASS大家已经知道是什么东东了，电脑上也有编辑SASS的编程软件了，浏览器也能调试SASS了，那么我们接下来就直接步入正轨，准备迎接SASS的挑战，深入的了解一下SASS的用法吧。

SASS目前有两种语法。一种是SASS，这是一种旧版的SASS语法，也被成为缩进语法，其主要特点是去除了编写CSS时候的“\{\}”，让代码看起来比较整洁，其文件的后缀名是“.sass”。另一种是SCSS，我们这是我们现在常用的比较容易掌握的SASS语法，也是新版的SASS语法，其文件的后缀名是“.scss”。为大家介绍的SASS就是最新版本SCSS。旧版本在这里只是简单带过了。

## 　SASS的变量 ##

相信广大的CSS编写人员都会遇到很多重复的属性值，那么这些重复带给我们的往往是分烦躁单一的复制粘贴。这将让我们的工作变得单一。若大家用SASS编写的话，我们只需要通过设置变量，就可以让整个编写过程中重复的东西变成变量化。变量的用处有很多，在一些日常的属性值中运用，可以在一些基本数学运算中运用，还可以在SASS函数中运用。

设定SASS变量，必须在变量前面添加“$”，后面紧变量名和变量值，而且变量名和变量值之间需要使用冒号“:”隔开。具体的实现方法如下。

*SASS代码*

/*设置变量*/
    $linkColor : green;
    $bgColor : yellow;
    $width : 700px;
    
    /*引用变量*/
    .variate {
    	background:$bgColor;
    	width:$width;
    }
    .variate a {color:$linkColor;}

*编译后的CSS代码*

.variate {
      background: yellow;
      width: 700px;
    }
    
    .variate a {
      color: green;
    }

## 　SASS的嵌套 ##

SASS的嵌套是SASS的第二个使用非常广泛的规则。SASS的嵌套能够让大家一目了然的看到其变成的结构。SASS的嵌套可以分为：属性嵌套和选择器嵌套。具体的实现方法如下。

**1、属性嵌套**

*SASS代码*

.AttributesNested {
        font : {
            size : 20px;
            family : "宋体";
            weight : bold;
        }
    }

*编译后的CSS代码*

.AttributesNested {
      font-size: 20px;
      font-family: "宋体";
      font-weight: bold;
    }

**2、选择器嵌套**

*SASS代码*

.chooserNested {
        font-size:100px;
        span {
            font-size:30px;
        }
    }

*编译后的CSS代码*

.chooserNested {
      font-size: 100px;
    }
    .chooserNested span {
      font-size: 30px;
    }

## 　SASS的模块化(Mixins) ##

在我们平时写CSS的时候，很多时候都是一模一样的属性，一模一样的属性值，我们多么多么的希望能够让他们独立起来，然后多次进行调用。而现在SASS能够让大家实现这么强大的功能。SASS的模块化(Mixins)是可以把一部分样式单独出来，作为单独定义的模块，然后可以被很多选择器重复使用。具体的实现方法如下。

*SASS代码*

@mixin setBorder($color, $width) {
      border: {
        color: $color;
        width: $width;
        style: dashed;
      }
    }
    
    p { 
    	@include setBorder(blue, 1px);
    }

*编译后的CSS代码*

p {
      border-color: blue;
      border-width: 1px;
      border-style: dashed;
    }

## 　SASS的继承(extend) ##

在编写CSS的时候，大家都会碰到群组选择器，这种选择器的特性就是同时选取多个元素进行相同样式的编写。也可以理解为，一个选择器继承另一个选择器上的所有的样式。具体的实现方法如下。

*SASS代码*

.link {
    	font-size:18px;
    }
    
    .inherit {
    	@extend .link;
    }

*编译后的CSS代码*

.link, .inherit {
      font-size: 18px;
    }

以上编译后的CSS代码不难看出，多了个类名，而且还得需要注意优先级。然后在编译之后没必要出现那个多出来的类名。若大家不想多出那个类名，可以把“.”换成“%”。在上例的基础上做以调整。

*SASS代码*

%link {
    	font-size:18px;
    }
    
    .inherit {
    	@extend %link;
    }

*编译后的CSS代码*

.inherit {
      font-size: 18px;
    }

SASS的变量、SASS的嵌套、SASS的模块化(Mixins)和SASS的继承(extend)就是SASS中比较常用的语法规则。大家若是掌握了上面这些，就能够用SASS进行编写样式了。SASS详解之基本语法就为大家介绍到这里，希望这篇SASS详解之基本语法能为大家了解SASS的基本语法有所帮助，只有掌握了基本语法，大家才能在此基础上更加深入的走下去。