Sass学习笔记--什么是sass

Posted 2020-08-14 XW_Wong

CSS 预处理器

• “CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。
• 可以在 CSS 中使用变量、简单的逻辑程序、函数，等等在编程语言中的一些基本特性，使得CSS 更加简洁、适应性更强、可读性更佳，更易于维护。

Sass官方介绍(http://sass-lang.com/)

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

SASS是最成熟的，稳定的，和在世界上强大的专业级的CSS扩展语言。

• 兼容性

Sass is completely compatible with all versions of CSS. We take this compatibility seriously, so that you can seamlessly use any available CSS libraries.

SASS是完全兼容所有版本的CSS。我们十分看重这种兼容，这样就可以无缝地使用任何可用的CSS库。

• 特性丰富

Sass boasts more features and abilities than any other CSS extension language out there. The Sass Core Team has worked endlessly to not only keep up, but stay ahead.

Sass拥有比其他任何CSS扩展语言有更多的功能和能力。我们的核心团队使sass一直处于发展与领先

• 成熟性

Sass has been actively supported for over 9 years by its loving Core Team.

Sass的核心团队9年来不断活跃地支持着这个项目

• 工业生产支持

Over and over again, the industry is choosing Sass as the premier CSS extension language.

一遍又一遍，行业选择Sass作为首要的CSS扩展语言。

• 社区庞大

Sass is actively supported and developed by a consortium of several tech companies and hundreds of developers.

SASS是积极支持并由几个高科技公司和数百名开发者联盟开发。

 Sass历史

• 最初它是为了配合 HAML而设计的，因此有着和 html 一样的缩进式风格
• 虽然缩进式风格可以有效缩减代码量，强制规范编码风格，但它一方面并不为大多数程序接受

Sass与Scss

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

  $font-stack: Helvetica, sans-serif  //定义变量
  $primary-color: #333 //定义变量
  
  body                         /*sass不带有括号*/
    font: 100% $font-stack
    color: $primary-color

   

  $font-stack: Helvetica, sans-serif;
  $primary-color: #333;
  
  body {                        /*scss带有括号*/
    font: 100% $font-stack;
    color: $primary-color;
  }