关于sass:css预编语言

45次阅读

共计 1842 个字符，预计需要花费 5 分钟才能阅读完成。

1. 开发环境 vue+sass
2. 电脑系统 windows10 专业版
3. 在应用 vue 开发的过程中, 咱们常常会抉择一门 css 预编语言, 为什么要应用 css 预编语言呢?

作为前端开发人员，大家都晓得，Js 中能够自定义变量，而 CSS 仅仅是一个标记语言，不是编程语言，因而不能够自定义变量，不能够援用等等。**CSS 有具体以下几个毛病：**

*   ** 语法不够弱小，比方无奈嵌套书写，导致模块化开发中须要书写很多反复的选择器；**
*   ** 没有变量和正当的款式复用机制，使得逻辑上相干的属性值必须以字面量的模式反复输入，导致难以保护。**

       这就导致了咱们在工作中无端减少了许多工作量。而应用 CSS 预处理器，** 提供 CSS 缺失的款式层复用机制、缩小冗余代码，进步款式代码的可维护性。** 大大提高了咱们的开发效率。然而，CSS 预处理器也不是万金油，CSS 的益处在于简便、随时随地被应用和调试。预编译 CSS 步骤的退出，让咱们开发工作流中多了一个环节，调试也变得更麻烦了。更大的问题在于，预编译很容易造成后辈选择器的滥用。所以咱们在理论我的项目中掂量预编译计划时，还是得想想，比起带来的额定保护开销，CSS 预处理器有没有解决更大的麻烦。

4.css 预编语言有 sass 和 less, 有什么区别呢?

** 不同之处 **

**1、Less 环境较 Sass 简略 **

Cass 的装置须要装置 Ruby 环境，Less 基于 JavaScript，是须要引入 Less.js 来解决代码输入 css 到浏览器，也能够在开发环节应用 Less，而后编译成 css 文件，间接放在我的项目中，有 less.app、SimpleLess、CodeKit.app 这样的工具，也有在线编辑地址。**2、Less 应用较 Sass 简略 **

LESS 并没有裁剪 CSS 原有的个性，而是在现有 CSS 语法的根底上，为 CSS 退出程序式语言的个性。只有你理解 CSS 根底就能够很容易上手。**3、从性能登程，Sass 较 Less 略弱小一些 **

①sass 有变量和作用域。- $variable，like php；- #{$variable}like ruby；- 变量有全局和部分之分，并且有优先级。②sass 有函数的概念；- @function 和 @return 以及函数参数（还有不定参）能够让你像 js 开发那样封装你想要的逻辑。-@mixin 相似 function 但短少像 function 的编程逻辑，更多的是进步 css 代码段的复用性和模块化，这个用的人也是最多的。-ruby 提供了十分丰盛的内置原生 api。③过程管制：- 条件：@if @else；- 循环遍历：@for @each @while
- 继承：@extend
- 援用：@import

④数据结构：-$list 类型 = 数组；-$map 类型 =object；其余的也有 string、number、function 等类型

**4、Less 与 Sass 解决机制不一样 **

前者是通过客户端解决的，后者是通过服务端解决，相比拟之下前者解析会比后者慢一点

**5、对于变量在 Less 和 Sass 中的惟一区别就是 Less 用 @，Sass 用 $。**

 ** 相同之处 **

Less 和 Sass 在语法上有些共性，比方上面这些：1、混入(Mixins)——class 中的 class；2、参数混入——能够传递参数的 class，就像函数一样；3、嵌套规定——Class 中嵌套 class，从而缩小反复的代码；4、运算——CSS 中用上数学；5、色彩性能——能够编辑色彩；6、名字空间(namespace)——分组款式，从而能够被调用；7、作用域——部分批改款式；8、JavaScript 赋值——在 CSS 中应用 JavaScript 表达式赋值。

5. 在开发的时候, 我抉择的是 sass, 为什么抉择 sass 呢?

1、Sass 在市面上有一些成熟的框架，比如说 Compass，而且有很多框架也在应用 Sass，比如说 Foundation。2、就国外探讨的热度来说，Sass 相对优于 LESS。3、就学习教程来说，Sass 的教程要优于 LESS。在国内 LESS 集中的教程是 LESS 中武官网，而 Sass 的中文教程，缓缓在国内也较为广泛。4、Sass 也是成熟的 CSS 预处理器之一，而且有一个稳固，弱小的团队在保护。5、同时还有 Scss 对 sass 语法进行了改进，Sass 3 就变成了 Scss(sassy css)。与原来的语法兼容，只是用 {} 取代了原来的缩进。

6. 本期的教程到了这里就完结啦, 让咱们一起致力走向巅峰!

正文完