-
嵌套-伪类嵌套 伪类嵌套和属性嵌套非常类似，只不过他需要借助“&”符号一起配合使用。 就拿经典的“clearfix”为例吧： .clearfix{ &:before, &:after { content:""; display: table; } &:after { clear:both; overflow: hidden; } } 编译出来的 CSS： clearfix:before, .clearfix:after { content: ""; display: table; } .clearfix:after { clear: both; overflow: hidden; } 避免选择器嵌套： 选择器嵌套最大的问题是将使最终的代码难以阅读。开发者需要花费巨大精力计算不同缩进级别下的选择器具体的表现效果。 选择器越具体则声明语句越冗长，而且对最近选择器的引用(&)也越频繁。在某些时候，出现混淆选择器路径和探索下一级选择器的错误率很高，这非常不值得。 为了防止此类情况，我们应该尽可能避免选择器嵌套。然而，显然只有少数情况适应这一措施。查看全部
-
嵌套-属性嵌套 Sass中还提供属性嵌套,CSS有一些属性前缀相同，只是后缀不一样，比如:border-top/border-right,与这个类似的还有margin、padding、font等属性。 例： .box{ border-top: 1px solid red; border-bottom: 1px solid green; } 在Sass中可以这样写： .box{ border:{ top: 1px solid red; bottom: 1px solid green; } }查看全部
-
嵌套-选择器嵌套 Sass 中还提供了选择器嵌套功能，但这也并不意味着你在 Sass 中的嵌套是无节制的，因为你嵌套的层级越深，编译出来的 CSS 代码的选择器层级将越深 选择器嵌套为样式表的作者提供了一个通过局部选择器相互嵌套实现全局选择的方法，Sass 的嵌套分为三种： 选择器嵌套 属性嵌套 伪类嵌套 1、选择器嵌套 假设我们有一段这样的结构： <header> <nav> <a href=“##”>Home</a> <a href=“##”>About</a> <a href=“##”>Blog</a> </nav> <header> 想选中 header 中的 a 标签，在写 CSS 会这样写： nav a { color:red; } header nav a { color:green; } 那么在 Sass 中，就可以使用选择器的嵌套来实现： nav { a { color: red; header & { color:green; } } }查看全部
-
局部变量和全局变量 如果已经存在同名的全局变量，从 3.4 版本开始，Sass 已经可以正确处理作用域的概念，并通过创建一个新的局部变量来代替。 全局变量与局部变量 //SCSS $color: orange !default;//定义全局变量(在选择器、函数、混合宏...的外面定义的变量为全局变量) .block { color: $color;//调用全局变量 } em { $color: red;//定义局部变量 a { color: $color;//调用局部变量 } } span { color: $color;//调用全局变量 } css 的结果： //CSS .block { color: orange; } em a { color: red; } span { color: orange; } 在元素内部定义的变量不会影响其他元素。如此可以简单的理解成，全局变量就是定义在元素外面的变量，如下代码： $color:orange !default; $color 就是一个全局变量，而定义在元素内部的变量，比如 $color:red; 是一个局部变量。 全局变量的影子 当在局部范围（选择器内、函数内、混合宏内...）声明一个已经存在于全局范围内的变量时，局部变量就成为了全局变量的影子。基本上，局部变量只会在局部范围内覆盖全局变量。 上面例子中的 em 选择器内的变量 $color 就是一个全局变量的影子。 //SCSS $color: orange !default;//定义全局变量 .block { color: $color;//调用全局变量 } em { $color: red;//定义局部变量（全局变量 $color 的影子） a { color: $color;//调用局部变量 } } 什么时候声明变量？ 我的建议，创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量，这丝毫没有作用。只有满足所有下述标准时方可创建新变量： 该值至少重复出现了两次； 该值至少可能会被更新一次； 该值所有的表现都与变量有关（非巧合）。 基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。查看全部
-
普通变量与默认变量 普通变量 定义之后可以在全局范围内使用 $fontSize: 12px; body{ font-size:$fontSize; } 编译后的CSS代码： body{ font-size:12px; } 默认变量 sass的默认变量仅需要在值的后面加上!default即可。 $baseLineHeight:1.5 !default; body{ line-height: $baseLineHeight; } 编译后的css代码： body{ line-height：1.5; } sass 的默认变量一般是用来设置默认值，然后根据需求来覆盖的，覆盖的方式也很简单，只需要在默认变量之前重新声明下变量即可。 $baseLineHeight: 2; $baseLineHeight: 1.5 !default; body{ line-height: $baseLineHeight; } 编译后的css代码： body{ line-height:2; } 可以看出现在编译后的 line-height 为 2，而不是我们默认的 1.5。默认变量的价值在进行组件化开发的时候会非常有用。查看全部
-
声明变量 定义变量的语法： Sass 的变量包括三个部分： 声明变量的符号“$” 变量名称 赋予变量的值 简单的示例，假设你的按钮颜色可以给其声明几个变量： $brand-primary : darken(#428bca, 6.5%) !default; // #337ab7 $btn-primary-color : #fff !default; $btn-primary-bg : $brand-primary !default; $btn-primary-border : darken($btn-primary-bg, 5%) !default; 如果值后面加上!default则表示默认值。查看全部
-
Sass 和 CSS 写法有差别： Sass 和 CSS 写法的确存在一定的差异，由于 Sass 是基于 Ruby 写出来，所以其延续了 Ruby 的书写规范。在书写 Sass 时不带有大括号和分号，其主要是依靠严格的缩进方式来控制的。 SCSS 和 CSS 写法无差别： SCSS 和 CSS 写法无差别，这也是 Sass 后来越来越受大众喜欢原因之一。简单点说，把你现有的“.css”文件直接修改成“.scss”即可使用。查看全部
-
Sass 和 SCSS 有什么区别？ Sass 和 SCSS 其实是同一种东西，我们平时都称之为 Sass，两者之间不同之处有以下两点： 文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 SCSS 是以“.scss”后缀为扩展名 语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(;)，而 SCSS 的语法书写和我们的 CSS 语法书写方式非常类似。查看全部
-
Sass 官网上是这样描述 Sass 的： Sass 是一门高于 CSS 的元语言，它能用来清晰地、结构化地描述文件样式，有着比普通 CSS 更加强大的功能。 Sass 能够提供更简洁、更优雅的语法，同时提供多种功能来创建可维护和管理的样式表。查看全部
-
CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。查看全部
-
CSS 预处理器语言 Sass（SCSS） LESS Stylus Turbine Swithch CSS CSS Cacheer DT CSS查看全部
-
减号前后有空格查看全部
-
混合宏的特点在于传参！查看全部
-
综合上述，”/ ”符号被当作除法运算符时有以下几种情况： • 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。 • 如果数值被圆括号包围。 • 如果数值是另一个数学表达式的一部分。 如下所示： //SCSS p { font: 10px/8px; // 纯 CSS，不是除法运算 $width: 1000px; width: $width/2; // 使用了变量，是除法运算 width: round(1.5)/2; // 使用了函数，是除法运算 height: (500px/2); // 使用了圆括号，是除法运算 margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算 }查看全部
-
@for $i from 1 through length($list){ .icon-#{ntn($list,$i)}{ background-position:0 - 20px * $i; } }查看全部
举报
0/150
提交
取消