soindy

整理自慕课笔记CSS预处理器定义CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。 通俗的说，“CSS 预处理器用一种专门的编程语言，进行 Web 页面样式设计，然后再编译成正常的 CSS 文件，以供项目使用。CSS 预处理器为 CSS 增加一些编程的特性，无需考虑浏览器

Sass 和 JavaScript 语言类似，也具有自己的数据类型，在 Sass 中包含以下几种数据类型： 1. 数字: 如，1、 2、 13、 10px； 2. 字符串：有引号字符串或无引号字符串，如，”foo”、 ‘bar’、 baz； 3. 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)； 4. 布尔型：如，true、 false； 5. 空值：如，nu

注释对于一名程序员来说，是极其重要，良好的注释能帮助自己或者别人阅读源码。在 Sass 中注释有两种方式，我暂且将其命名为： 1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ” 2、类似 JavaScript 的注释方式，使用“//” 两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示，来看一个示例：//定义一个占位符%mt5 { ma

使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分。让我们看一下下面的例子：$properties: (margin, padding);@mixin set-value($side, $value) { @each $prop in $pro

初学者都常常纠结于这个问题“什么时候用混合宏，什么时候用继承，什么时候使用占位符？”其实他们各有各的优点与缺点，先来看看他们使用效果：混合宏使用@mixin mt($var){ margin-top: $var; }.block { @include mt(5px); span { display:block; @include mt(5px); }}.heade

Sass 中的占位符 %placeholder 功能是一个很强大，很实用的一个功能，这也是我非常喜欢的功能。他可以取代以前 CSS 中的基类造成的代码冗余的情形。因为 %placeholder 声明的代码，如果不被 @extend 调用的话，不会产生任何代码。来看一个演示：%mt5 { margin-top: 5px;}%pt5{ padding-top: 5px;}这段代码没有被 @

如果你的整个网站中有几处小样式类似，比如颜色，字体等，在 Sass 可以使用变量来统一处理，那么这种选择还是不错的。但当你的样式变得越来越复杂，需要重复使用大段的样式时，使用变量就无法达到我们目了。这个时候 Sass 中的混合宏就会变得非常有意义。在这一节中，主要向大家介绍 Sass 的混合宏。声明不带参数混合宏在 Sass 中，使用“@mixin”来声明一个混合宏。如：@mixin border-

整理自慕课笔记 继承对于了解 CSS 的同学来说一点都不陌生，先来看一张图： 图中代码显示“.col-sub .block li,.col-extra .block li” 继承了 “.item-list ul li”选择器的 “padding : 0;” 和 “ul li” 选择器中的 “list-style : none outside none;”以及 * 选择器中的 “box-siz

整理自慕课笔记 Sass 中还提供了选择器嵌套功能，但这也并不意味着你在 Sass 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深，这往往是大家不愿意看到的一点。这个特性现在正被众多开发者滥用。 选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，Sass 的嵌套分为三种： 1. 选择器嵌套 2. 属性嵌套 3. 伪类嵌套选择器

声明 上图非常清楚告诉了大家，Sass 的变量包括三个部分： 1. 声明变量的符号“$” 2. 变量名称 3. 赋予变量的值 来看一个简单的示例，假设你的按钮颜色可以给其声明几个变量$brand-primary : darken(#428bca, 6.5%) !default; // #337ab7$btn-primary-color : #fff !default;$btn-prim

Sass 的编译有多种方法： 1. 命令编译 2. GUI工具编译 3. 自动化编译命令编译命令编译是指使用你电脑中的命令终端，通过输入 Sass 指令来编译 Sass。这种编译方式是最直接也是最简单的一种方式。因为只需要在你的命令终端输入：单文件编译sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css这是对一个单文件进行编译，如果想对整个

整理自慕课笔记旧语法(不建议使用)这里说的 Sass 语法是 Sass 的最初语法格式，他是通过 tab 键控制缩进的一种语法规则，而且这种缩进要求非常严格。另外其不带有任何的分号和大括号。常常把这种格式称为 Sass 老版本，其文件名以“.sass”为扩展名。 来看一个 Sass 语法格式的简单示例。假设我们有一段这样的 CSS 代码：body { font: 100% Helvetica,

安装ruby因为 Sass 是基于ruby的,所以需要安装ruby环境.默认 Mac 是自带ruby的.使用下面命令可以查看本机ruby版本.没有安装的话请自行Googleruby -v安装 Sasssudo gem install sass使用’ sass -v’ 查看安装成功与否更新 Sasssudo gem update sass卸载gem uninstall sass

程序中的运算是常见的一件事情，但在 CSS 中能做运算的，到目前为止仅有 calc() 函数可行。但在 Sass 中，运算只是其基本特性之一。在 Sass 中可以做各种数学计算。加法加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。如：.box { width: 20px + 8in;}编译出来的 CSS:.box { width: 788px;}但对于携带不同类型的