scss用法最全简述

sass

一、什么是 sass

Sass 是一种 CSS 的预编译语言。它提供了变量（variables）、嵌套（nested rules）、混合（mixins）、函数（functions）等功能，并且完全兼容 CSS 语法。Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。

二、安装 sass

https://sass.bootcss.com/install
node.js 下 npm install -g sass
mac 系统： gem install sass
window系统: ruby安装后 gem install sass

三、将 sass编译为 css

1、可以使用 compass
2、可以使用命令行 使用 sass命令： sass 空格 目录:存放的地址

用 sass监视 sass目录下文件的变化
sass --watch sass(目录):css(指定目录)

命令行创建项目并实施监视：
1、进入到想保存项目的位置 cd 目录
2、 创建目录并进入目录 mkdir 目录 && cd $_
3、 在编译器中创建目录（一个 css 一个 sass），创建好后创建个 style.scss的文件，并在命令行中执行编译后文件格式和存放位置
执行sass sass/style.scss:css/style.css
4、由于每执行编译都需要执行上述代码，因此可以使用 sass --watch sass(目录):css(指定目录)
5、默认输出的 css样式不是嵌套的格式，为了清晰格式修改 css 编译后样式

需要在命令行 sass --watch sass(目录):css(指定目录) --style compact //紧凑格式

sass --watch sass(目录):css(指定目录) --style compressed //压缩格式

sass --watch sass(目录):css(指定目录) --style expanded //嵌套格式

3、编译器的插件 Easy Sass

四、.sass 与 .scss的区别

1. 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名
2. 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(😉，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。

//scss代码
 .a {
     
      color: blue;  
      font-weight: bold;  
      text-decoration: underline;  
      .b {
     
         color:black;  
      }  
  }

编译后的 css代码为

//css
 .a {
     
    color: blue;  
    font-weight: bold;  
    text-decoration: underline; }  
.a .b {
     
    color: black; 
 }

但是这样的代码将后缀改成.sass就不能通过编译了。首先.sass不要大括号，其次不需要分号，还有行首空格问题，比如第一个元素的属性空2个空格就不能通过编译。.sass文件需要严格的格式要求

//sass代码
  .<