sass入门（变量和嵌套）

素颜马尾好姑娘i 2021-09-13 15:44 335阅读 0赞

## **1.嵌套规则** ##

Sass 允许将一套 CSS 样式嵌套进另一套样式中，内层的样式将它外层的选择器作为父选择器，例如：

#main p { 
      color: #00ff00;
      width: 97%;
    
      .redbox { 
        background-color: #ff0000;
        color: #000000;
      }
    }

## **2. 父选择器 & 可以用 & 代表嵌套规则外层的父选择器** ##

a { 
      font-weight: bold;
      text-decoration: none;
      &:hover {  text-decoration: underline; }
      body.firefox & {  font-weight: normal; }
    }

**编译后的 CSS 文件中 & 将被替换成嵌套外层的父选择器，如果含有多层嵌套，最外层的父选择器会一层一层向下传递：**

#main { 
      color: black;
      a { 
        font-weight: bold;
        &:hover {  color: red; }
      }
    }

**& 必须作为选择器的第一个字符，其后可以跟随后缀生成复合的选择器，例如**

#main { 
      color: black;
      &-sidebar {  border: 1px solid; }
    }

## **3.属性嵌套** ##

Sass 允许将属性嵌套在命名空间中，比如 font-family, font-size, font-weight 都以 font 作为属性的命名空间。例如：

.funky { 
      font: { 
        family: fantasy;
        size: 30em;
        weight: bold;
      }
    }

## **4.占位符选择器 %foo** ##

Sass 额外提供了一种特殊类型的选择器：占位符选择器 。与常用的 id 与 class 选择器写法相似，只是 \# 或 . 替换成了 %。必须通过 @extend 指令调用。当占位符选择器单独使用时（未通过 @extend 调用），不会编译到 CSS 文件中。

## ***5.注释 / / 与 //*** ##

单行注释  //单行注释不会存在css文件
    
     多行注释  /*多行注释会存在css文件中*/

**6.::before和::after下特有的content，用于在css渲染中向元素逻辑上的头部或尾部添加内容。::before和::after必须配合content属性来使用，content用来定义插入的内容，content必须有值，至少是空。**  
![在这里插入图片描述][2020022113481590.png]

## **7.Sass允许使用变量，变量以美元符号$开头** ##

$width: 5em;
    直接使用即调用变量：
    
    #main { 
      width: $width;
    }

**如果变量需要镶嵌在字符串之中，就必须需要写在\#\{\}之中**

$left: left;
    div{ 
        margin-#{$left}:40px;
    }

**好处：ss生成时，变量会被他们的值替代，以后只需要改变这个变量的值，所有引用变量的地方的值都会改变。**

## **8.将局部变量转换为全局变量可以添加 !global 声明：** ##

#main { 
      $width: 5em !global;
      width: $width;
    }
    
    #sidebar { 
      width: $width;
    }
    编译为
    
    #main { 
      width: 5em;
    }
    
    #sidebar { 
      width: 5em;
    }

## **9.数据类型** ##

SassScript 支持 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)

## 10.在/\*后面加一个感叹号，表示这是"重要注释"。即使是压缩模式编译，也会保留这行注释，通常可以用于声明版权信息 ##

/*! 　　　　重要注释！ 　　*/

[2020022113481590.png]: /images/20210913/5c6d664459c442acaa0b83b7ba99b9a1.png