大家好，我是架构君，一个会写代码吟诗的架构师。今天说一说Sass和Less（预处理器）「建议收藏」,希望能够帮助大家进步!!!
Less 既可以在客户端上运行 (支持IE 6+, Webkit, Firefox)，也可在服务端运行。
Sass 是一个CSS预处理程序，至今使用广泛，它之所以流行，是因为它修复了几个CSS缺陷：
本文由 nzbin 翻译，黄利民 校稿。未经许可，禁止转载！ 英文出处：Loops in CSS Preprocessors 发表地址：http://web.jobbole.com/91016/ 如果你看过老的科幻电影，你一定知道循环的强大之处。给你的机器人克星设置无限循环，它就会爆炸，然后机器人灰飞烟灭了。 预处理器的循环并不会在太空中发生剧烈爆炸（我希望），但是它有利于书写 DRY CSS（译者注：详细介绍可以参考这篇文章 http://vanseodesign.com/css/dry-princ
Sass基于Ruby，需要安装Ruby。Less和Sass在Ruby中构建相似，但它已被移植到JavaScript中。为了使用LESS，我们可以将适用的JavaScript文件上载到服务器或通过脱机编译器编译CSS表。
最下边附结构图 在线编辑器网址如下：http://sassmeister.com/ 注意编写的时候，符号千万别用了中文的：、；、。...之类的，会报错，Sass也转换不成css。 less和sass的区别： 博客园文章—http://www.cnblogs.com/wangpenghui522/p/5467560.html 本章主要内容：变量 、混合宏 、继承 、占位 、插值 、运算 、数据类型 1：定义 Sass是css预处理器的一种，也是最早的css预处理语言。Sass采用Ruby语言编写，为css增
CSS 作为一门样式语言，语法简单，易于上手，但是由于不具备常规编程语言提供的变量、函数、继承等机制，因此很容易写出大量没有逻辑、难以复用和扩展的代码，在日常开发使用中，如果没有完善的编码规范，编写的 CSS 代码会非常冗余且难以维护。
完整高频题库仓库地址：https://github.com/hzfe/awesome-interview
SASS是一种CSS的开发工具，提供了许多便利的写法，大大节省了设计者的时间，使得CSS的开发，变得简单和可维护。
在 Sass 中，可以在父选择器中写子选择器，以嵌套的形式来表达关联的关系，这样做可以减少我们重复书写父选择器的工作量。
学过CSS的人都知道，它不是一种编程语言。 你可以用它开发网页样式，但是没法用它编程。也就是说，CSS基本上是设计师的工具，不是程序员的工具。在程序员眼里，CSS是一件很麻烦的东西。它没有变量，也没有
英文 | https://mobileappcircular.com/super-easy-sass-tutorial-and-usage-guide-6fb75946ff6c
作为通往前端大神之路的普通的一只学鸟，最近接触了一样稍微高逼格一点的神器，特与大家分享~
变量支持块级作用域，嵌套规则内定义的变量只能在嵌套规则内使用（局部变量），不在嵌套规则内定义的变量则可在任何地方使用（全局变量）。将局部变量转换为全局变量可以添加 !global 声明
SASS是一种预处理器及样式表语言，由它们自己的工具或模块捆绑器(如webpack)编译成CSS。它有几个可以用来使CSS整洁和可重用的功能，例如变量，嵌套规则，mixin，函数等。
最近在学习sass，从sass新手的角度做一个简单的总结，总结的不对的地方期望各位大大们能多多指点，本文是针对sass3.4做的一个总结~
声明： 请尊重博客园原创精神，转载或使用图片请注明： 博主：xing.org1^ 出处：http://www.cnblogs.com/padding1015/ 特别说明： 没有sass基础请移步：【Sass-学习笔记【基础篇】】http://www.cnblogs.com/padding1015/articles/7056323.html 最底部附结构图（实在是结构图太长了没办法）2017-07-07 20:17:17 正文 一、Sass的控制命令 2017-06-22 09:1
Sass的数据类型可以说是一个大家庭了，其数据类型中的数字、字符串、列表、颜色和布尔型，涵盖了大多数我们的需求。但是，正如一个框架开始的演变，在这个数据类型中还缺少一个关键性的工具：关联数组。
特别说明： 没有sass基础请移步：【Sass-学习笔记【基础篇】】http://www.cnblogs.com/padding1015/articles/7056323.html 最底部附结构图（实
没有sass基础请移步：【Sass-学习笔记【基础篇】】http://www.cnblogs.com/padding1015/articles/7056323.html
Sass： (Syntactically Awesome StyleSheets)
CSS3之前的CSS都大都是枚举属性样式，而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用，让CSS的编程黯淡无光，Sass就是一种增强CSS编程的扩展语言（CSS4也可以期待），有了像Sass这种预处理语言后，CSS的编程不再局限在枚举属性了，可以有更广阔的舞台。
1. 引言 CSS3之前的CSS都大都是枚举属性样式，而编程语言强大的变量、函数、循环、分支等功能基本都不能在CSS中使用，让CSS的编程黯淡无光，Sass就是一种增强CSS编程的扩展语言（CSS4也可以期待），有了像Sass这种预处理语言后，CSS的编程不再局限在枚举属性了，可以有更广阔的舞台。 2. Sass的原理 Sass本质就是在CSS的语法的基础上增加了自定义的变量、循环、分支、函数、mixin、继承、运算等功能，让CSS编程变得异常强大。 当然浏览器是不认识Sass语法。开发人员写完了Sass的
Sass(Scss)、Less 都是 CSS 预处理器，他们定义了一种新的语言，其基本思想是，用一种专门的编程语言为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。
在项目开发过程中，我们有时候遇到需要更换站点主题色的需求。乃至于 APP 底部的 banner 中的 icon、文案和背景图都是运营线上可配置的。还有的功能比如更换系统字体大小等。
Sass的数据类型可以说是一个大家庭了，其数据类型中的数字、字符串、列表、颜色和布尔型，涵盖了大多数我们的需求。但是，正如一个框架开始的演变，在这个数据类型中还缺少一个关键性的工具：关联数组。 这里创
1.在Python中，字典用放在花括号{}中的一些列的键-值对表示。每个键都与一个值相关联，可以使用键来访问与之相关联的值。可将任何Python对象用作字典中的值。
最近，有一则非常振奋人心的消息，CSS 即将原生支持嵌套 -- Agenda+ to publish FPWD of Nesting，表示 CSS 嵌套规范即将进入规范的 FWPD 阶段。
SASS是ruby写的，所以要想将sass编译成css文件，就给配上ruby环境。
在学习Sass之前，我们先来介绍一下什么是CSS预处理器。因为Sass就是众多CSS预处理器中的其中一种。
注意，border 后面必须加上冒号。 在嵌套的代码块内，可以使用&引用父元素。比如 a:hover 伪类，可以写成：
一、为什么使用SASS CSS不是编程语言，没有变量、条件语句等等，只是单纯的描述，因此为CSS加入编程元素（即“CSS预处理器”）。其基本思想：用一种专门的编程语言进行网页设计，然后再编译成CSS文件。SASS作为其中一种“CSS预处理器”，有许多优点（便利的写法，节省时间，就像JS中的jQuery；简单、可维护），可以用来写CSS（总之就是一门写CSS的编程语言） 二、安装 类似于bootstrap是基于jQuery的，SASS是用Ruby语言写的（但是两者语法没有关联，没有Ruby的基础没关系），所以
要创建带有函数的组件，您只需编写一个返回 JSX 或 null 的 JavaScript 函数。需要注意的重要一点是，React 要求你的函数名称以大写字母开头。
前端发展到现在都有了不小的改变，今天主要谈一下css扩展语法sass的基本用法和语法。
CSS嵌套可以节省输入时间，并使语法更易于阅读和维护。迄今为止，你必须像这样键入完整的选择器路径：
Sass 支持所有CSS3的 @规则，以及一些已知的其他特定的Sass "指令"。这些在 Sass 都有对应的效果，更多资料请查看 控制指令 (control directives) 。今天重点讲mixins/include/extend
对原对象进行浅拷贝，会生成一个和它“一样”的新对象。但是这种拷贝只会拷贝原对象第一层的基本类型属性，引用类型属性仍然和原对象共享同一个。
Bootstrap 是一个强大的框架，有助于创建响应式、以移动设备为首的网站。虽然开箱即用的 Bootstrap 样式非常出色，但在某些情况下，你可能希望进一步定制设计。这就是 Sass 的魔力发挥作用的地方，Sass 是一种预处理脚本语言，可以解释或编译成层叠样式表（CSS）。
CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器的兼容性问题 解决的问题 嵌套规则：通过花括号的方式解决复杂的css父子样式嵌套问题。 变量规则：通过变量将公告样式抽离，减少冗余css代码。 提交逻辑 ：可以像高级语言一样编写逻辑性的css代码
sass input.scss output.css :将sass文件输出到指定css文件
在Sass中，我们声明变量使用的是“$”（美元符号）开头。Sass的变量包括3部分：声明符、变量名、值。
一、源码文件： _grid.scss：格子系统类文件 Mixins/_grid.scss：支持格子系统实现的mixin集合 Mixins/_grid-framework.scss：格子系统实现的核
MVVM是Model-View-ViewModel的缩写。MVVM是一种设计思想。Model 层代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑；View 代表UI 组件，它负责将数据模型转化成UI 展现出来，ViewModel 是一个同步View 和 Model的对象。
LESS 通过编写less文件来快速生成css文件，对css的语法进行了扩展 Less语法 注释 单行注释不会被编译，多行才会被编译 变量 less：定义变量用@ scss：定义变量用$ @num: 100px; @color: red; @mar: margin; .box { width: @num; height: @num; background-color: @color; @{mar}: 100px auto; } // 代码解析后 .box { widt
在规则声明中，“选择器” 负责选取 DOM 树中的元素，这些元素将被定义的属性所修饰。选择器可以匹配 HTML 元素，也可以匹配一个元素的类名、ID, 或者元素拥有的属性。以下是选择器的例子：
循环可以执行一个代码块，只要达到指定的条件。循环很方便，因为它们节省时间，减少错误，并使代码更易读。
Less和Sass都是CSS预处理器，它们的主要目标都是扩展CSS的功能，增加逻辑性和计算能力，提高开发效率。然而，它们在实现方式和一些特性上存在一些区别。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM
