-
1in = 2.54cm = 25.4 mm = 72pt = 6pc = 96px查看全部
-
避免选择器嵌套： 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。 为了防止此类情况，我们应该尽可能避免选择器嵌套。然而，显然只有少数情况适应这一措施。查看全部
-
nav { a { color: red; header & { color:green; } } } 注意区分&符的位置，置前表示它为父集，置后代表它为子集查看全部
-
当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。查看全部
-
除此之外，Sass 现在还提供一个 !global 参数。!global 和 !default 对于定义变量都是很有帮助的。我们之后将会详细介绍这两个参数的使用以及其功能。查看全部
-
&选择符置前表示该元素为嵌套元素的子级，置后表示该元素为嵌套元素的父级。查看全部
-
对于 GUI 界面编译工具，目前较为流行的主要有： Koala (http://koala-app.com/) Compass.app（http://compass.kkbox.com/） Scout（http://mhs.github.io/scout-app/） CodeKit（https://incident57.com/codekit/index.html） Prepros（https://prepros.io/） 相比之下，我比较推荐使用以下两个： Koala (http://www.w3cplus.com/preprocessor/sass-gui-tool-koala.html) CodeKit (http://www.w3cplus.com/preprocessor/sass-gui-tool-codekit.html)查看全部
-
单文件编译： sass <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css 多文件编译：（表示将项目中“sass”文件夹中所有“.scss”(“.sass”)文件编译成“.css”文件，并且将这些 CSS 文件都放在项目中“css”文件夹中。） sass sass/:css/ 上面的命令，只能一次性编译。每次个性保存“.scss”文件之后，都得重新执行一次这样的命令 开启“watch”功能，这样只要你的代码进行任保修改，都能自动监测到代码的变化，并且给你直接编译出来： sass --watch <要编译的Sass文件路径>/style.scss:<要输出CSS文件路径>/style.css查看全部
-
Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。 SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。 scss和sass是同一种东西。查看全部
-
什么时候声明变量？ 我的建议，创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量，这丝毫没有作用。只有满足所有下述标准时方可创建新变量： 该值至少重复出现了两次； 该值至少可能会被更新一次； 该值所有的表现都与变量有关（非巧合）。 基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。查看全部
-
@mixin 不会把代码相同的样式合并; @extend 会把相同的样式的选择器合并; @extend %placeholder 引用时才编译生成对应的代码，不然不会生成查看全部
-
[理解混合宏 VS 继承 VS 占位符概念](http://img1.sycdn.imooc.com//55263aa30001913307940364.jpg)查看全部
-
如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串 字符串拼接以 + 左边的为主。查看全部
-
//SCSS p { font: 10px/8px; // 纯 CSS，不是除法运算 $width: 1000px; width: $width/2; // 使用了变量，是除法运算 width: round(1.5)/2; // 使用了函数，是除法运算 height: (500px/2); // 使用了圆括号，是除法运算 margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算 }查看全部
-
所谓值列表 (lists) 是指 Sass 如何处理 CSS 中： margin: 10px 15px 0 0 或者： font-face: Helvetica, Arial, sans-serif 像上面这样通过空格或者逗号分隔的一系列的值。 事实上，独立的值也被视为值列表——只包含一个值的值列表。 Sass列表函数（Sass list functions）赋予了值列表更多功能（Sass进级会有讲解）： nth函数（nth function） 可以直接访问值列表中的某一项； join函数（join function） 可以将多个值列表连结在一起； append函数（append function） 可以在值列表中添加值； @each规则（@each rule） 则能够给值列表中的每个项目添加样式。 值列表中可以再包含值列表，比如 1px 2px, 5px 6px 是包含 1px 2px 与 5px 6px 两个值列表的值列表。如果内外两层值列表使用相同的分隔方式，要用圆括号包裹内层，所以也可以写成 (1px 2px) (5px 6px)。当值列表被编译为 CSS 时，Sass 不会添加任何圆括号，因为 CSS 不允许这样做。(1px 2px) (5px 6px)与 1px 2px 5px 6px 在编译后的 CSS 文件中是一样的，但是它们在 Sass 文件中却有不同的意义，前者是包含两个值列表的值列表，而后者是包含四个值的值列表。 可以用 () 表示空的列表，这样不可以直接编译成 CSS，比如编译 font-family: ()时，Sass 将会报错。如果值列表中包含空的值列表或空值，编译时将清除空值，比如 1px 2px () 3px 或 1px 2px null 3px。查看全部
举报
0/150
提交
取消