Sass预处理器

Sass简介

        Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

        Sass 是一个 CSS 预处理器。

        Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

        Sass 完全兼容所有版本的 CSS。

        Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

        Sass 生成良好格式化的 CSS 代码，易于组织和维护。

        Sass 文件后缀为 .scss。

什么是预处理器？

        预处理器是一个能够通过预处理器独有的语法来生成css文件的程序

为什么要使用Sass？

CSS 本身语法不够强大，导致重复编写一些代码，无法实现复用，而且在代码也不方便维护。

Sass 引入合理的样式复用机制，增加了规则、变量、混入、选择器、继承、内置函数等等特性。

我们可以举个例子，我们会在 CSS 中重复使用很多次十六进制的颜色代码，当有了变量之后，如果要改变颜色代码，只要修改变量的值就好了

Sass语法格式

他有两种语法格式，首先是SCSS（Sassy CSS）——也是本文示例所使用的格式——这种格式仅在Css3语法的基础上进行拓展，所有Css语法在SCSS中都是通用的，同时加入Sass特色功能。.scss为拓展名

中文网：Sass世界上最成熟、稳定和强大的CSS扩展语言 | Sass中文网

Sass定义变量

//声明一个变量 格式  $变量名:值
//对中线或下划线的使用不区分
$text_color:red;
//使用变量
p{
    color:$text_color;
}

嵌套规则

选择器相同放外边 选择器不同放里边

//sass嵌套语法
div {
  width: 100px;
  height: 100px;
  background-color: #ccc;
  p {
    font-size: 16px;
    span {
      color: red;
    }
  }
}
//编译后的css语法
div {
  width: 100px;
  height: 100px;
  background-color: #ccc;
}
div p {
  font-size: 16px;
}
div p span {
  color: red;
}

伪类选择器嵌套需要使用&

父选择器&

div {
  border: 1px solid red;
  ul {
    background-color: blue;
    li {
      font-size: 30px;
      display: inline-block;
      margin-right: 30px;
      a {
        color: yellow;
        &:hover {
          color: black;
        }
      }
    }
  }
}

嵌套属性

div{
    border{
        style:solid;
        radius:20px;
        width:3px;
    }
}

引用Sass文件

将sass文件命名前加_下划线则不对该sass文件进行编译

比如说有一些居中颜色边距等公共样式，不想编译sass文件又想用这些样式时可以用@import引入，多个sass文件之间用逗号隔开

@import "_demo2","demo3";

混入语法

通过@mixin来创建混入样式

自定义样式，类似于Bootstrap封装的一些样式添加类名使用 而混入语法是在某个样式中使用@include 混入名 来进行调用

@mixin important-text {
  color: red;
  font-size: 25px;
  font-weight: bold;
  border: 1px solid blue;
}

混入样式使用

selector {
  @include mixin-name;
}

默认变量

$bgcolor:blue !default;//当变量声明但未使用时 会找默认变量
$bgcolor:blue !global;//全局作用域

sass注释

/*星号注释会显示解析到css文件中*/

Vs Code Sass插件

Live Sass Compiler 3.版本支持四种css样式格式

"format": "expanded", // nested 结束大括号在样式后, expanded 结束大括号独占一行, compact 每个元素样式占一行, compressed 没有换行没有空格 

Live Sass Compiler 5.版本支持两种css样式格式

"format": "expanded", expanded 结束大括号独占一行, compressed 没有换行没有空格

当安装完插件没有没有效果时需要修改添加配置文件

/* sass压缩设置 */
  "liveSassCompile.settings.formats": [
    // This is Default.
    {
      "format": "expanded", // nested 结束大括号在样式后, expanded 结束大括号独占一行, compact 每个元素样式占一行, compressed 没有换行没有空格 5.版本只有缩进和不缩进
      "extensionName": ".min.css",
      "savePath": "~/../css" // 为 null 表示当前目录
    }
  ],
​
  /* 排除目录 */
  "liveSassCompile.settings.excludeList": ["**/node_modules/**", ".vscode/**"],
​
  /* 是否生成对应的map */
  "liveSassCompile.settings.generateMap": false,
​
  /* 是否添加兼容前缀 如： -webkit- , -moz- ... */
  "liveSassCompile.settings.autoprefix": ["> 1%", "last 2 versions"],
​
  "liveSassCompile.settings.showOutputWindow": true

 

将配置代码粘贴到打括号中并给上一级加一个逗号