-
nth()函数 语法： nth($list,$n) nth()函数用来指定列表中某个位置的值。在Sass中，nth()函数和其他语言不同，1是指列表中的第一个标签值，2是指列表中的第二个标签值，依此类推。如： 1 >> nth(10px 20px 30px,1) 2 10px 3 >> nth((Helvetica,Arial,sans-serif),2) 4 "Arial" 5 >> nth((1px solid red) border-top green,1) 6 (1px "solid" #ff0000) 注：在 nth($list,$n) 函数中的 $n 必须是大于 0 的整数： 1 >> nth((1px solid red) border-top green 1 ,0) 2 SyntaxError: List index 0 must be a non-zero integer for `nth'查看全部
-
什么是CSS预处理器？ 定义： CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了 一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。 通俗的说，“CSS预处理器用一种专门的编程语言”，进行页面样式设计，然后在编译成正常的CSS文件，以供项目使用。CSS预处理器为CSS 增加了一些编程的慝，无须考虑浏览器的兼容性问题”，例如你可以在CSS中肆变量、溅的逻辑程序、函数（如右侧代码编辑器中使用了变量$color）等等在编程语言中的一些基本特性，可以让你的CSS更加简洁、适应性更强、可读性更佳、更易于代码的维护等诸多好处。 其他CSS预处理器语言： CSS预处理器计数已经非常的成熟，而且也涌现出了多种不同的CSS预处理器语言，比如说： sass(scss);less；stylus；Turbine；Swithch CSS； CSS Cacheer;DT CSS；查看全部
-
如果你的代码块不需要专任何变量参数，而且有一个基类已在文件中存在，那么建议使用 Sass 的继承。查看全部
-
如果你的代码块中涉及到变量，建议使用混合宏来创建相同的代码块。查看全部
-
[Sass运算]字符运算 在 Sass 中可以通过加法符号“+”来对字符串进行连接。例如： $content: "Hello" + "" + "Sass!"; .box:before { content: " #{$content} "; } 编译出来的CSS： .box:before { content: " Hello Sass! "; } 除了在变量中做字符连接运算之外，还可以直接通过 +，把字符连接在一起： div { cursor: e + -resize; } 编译出来的CSS: div { cursor: e-resize; } 注意，如果有引号的字符串被添加了一个没有引号的字符串 （也就是，带引号的字符串在 + 符号左侧）， 结果会是一个有引号的字符串。 同样的，如果一个没有引号的字符串被添加了一个有引号的字符串 （没有引号的字符串在 + 符号左侧）， 结果将是一个没有引号的字符串。 例如： p:before { content: "Foo " + Bar; font-family: sans- + "serif"; } 编译出来的 CSS： p:before { content: "Foo Bar"; font-family: sans-serif; } 小伙伴们，到此为止《sass基础入门（基础篇）》的课程已经全部讲解完了，后面还有《sass基础入门（进阶篇）》即将上线，欢迎小伙伴们到时学习。 同时小伙伴们如果想看一下 sass 的案例课程可观看《Sass和Compass必备技能之Sass篇》课程查看全部
-
[Sass运算]颜色运算 所有算数运算都支持颜色值，并且是分段运算的。也就是说，红、绿和蓝各颜色分段单独进行运算。如： p { color: #010203 + #040506; } 计算公式为 01 + 04 = 05、02 + 05 = 07 和 03 + 06 = 09， 并且被合成为： 如此编译出来的 CSS 为： p { color: #050709; } 算数运算也能将数字和颜色值 一起运算，同样也是分段运算的。如： p { color: #010203 * 2; } 计算公式为 01 * 2 = 02、02 * 2 = 04 和 03 * 2 = 06， 并且被合成为： p { color: #020406; }查看全部
-
[Sass运算]数字运算 在 Sass 运算中数字运算是较为常见的，数字运算包括前面介绍的：加法、减法、乘法和除法等运算。而且还可以通过括号来修改他们的运算先后顺序。和我们数学运算是一样的，一起来看个示例。 .box { width: ((220px + 720px) - 11 * 20 ) / 12 ; } 编译出来的 CSS: .box { width: 60px; } 上面这个简单示例是一个典型的计算 Grid 单列列宽的运算。查看全部
-
任务 在编辑器第六行输入正确代码，计算出每列的列宽 ?不会了怎么办 列宽 ＝ 单列宽度 x 列数 + 列间距 x (列数 - 1) $col-width * $i + $col-gap * ($i - 1)查看全部
-
[Sass运算]变量计算 在 Sass 中除了可以使用数值进行运算之外，还可以使用变量进行计算，其实在前面章节的示例中也或多或少的向大家展示了。在 Sass 中使用变量进行计算，这使得 Sass 的数学运算功能变得更加实用。一起来看一个简单的示例： $content-width: 720px; $sidebar-width: 220px; $gutter: 20px; .container { width: $content-width + $sidebar-width + $gutter; margin: 0 auto; } 编译出来的CSS .container { width: 960px; margin: 0 auto; }查看全部
-
[Sass运算]减法 Sass 的减法运算和加法运算类似，我们通过一个简单的示例来做阐述： $full-width: 960px; $sidebar-width: 200px; .content { width: $full-width - $sidebar-width; } 编译出来的 CSS 如下： .content { width: 760px; } 同样的，运算时碰到不同类型的单位时，编译也会报错，如： $full-width: 960px; .content { width: $full-width - 1em; } 编译的时候，编译器报“Incompatible units: 'em' and ‘px’.”错误。查看全部
-
[Sass运算]加法 程序中的运算是常见的一件事情，但在 CSS 中能做运算的，到目前为止仅有 calc() 函数可行。但在 Sass 中，运算只是其基本特性之一。在 Sass 中可以做各种数学计算，在接下来的章节中，主要和大家一起探讨有关于 Sass 中的数学运算。 （一）、加法 加法运算是 Sass 中运算中的一种，在变量或属性中都可以做加法运算。如： .box { width: 20px + 8in; } 编译出来的 CSS: .box { width: 788px; } 但对于携带不同类型的单位时，在 Sass 中计算会报错，如下例所示： .box { width: 20px + 1em; } 编译的时候，编译器会报错：“Incompatible units: 'em' and ‘px'.”查看全部
-
[Sass运算]乘法 Sass 中的乘法运算和前面介绍的加法与减法运算还略有不同。虽然他也能够支持多种单位（比如 em ,px , %），但当一个单位同时声明两个值时会有问题。比如下面的示例： .box { width:10px * 2px; } 编译的时候报“20px*px isn't a valid CSS value.”错误信息。 如果进行乘法运算时，两个值单位相同时，只需要为一个数值提供单位即可。上面的示例可以修改成： .box { width: 10px * 2; } 编译出来的 CSS: .box { width: 20px; } Sass 的乘法运算和加法、减法运算一样，在运算中有不同类型的单位时，也将会报错。如下面的示例： .box { width: 20px * 2em; } 编译时报“40em*px isn't a valid CSS value.”错误信息。查看全部
-
综合上述，”/ ”符号被当作除法运算符时有以下几种情况： • 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。 • 如果数值被圆括号包围。 • 如果数值是另一个数学表达式的一部分。 如下所示： //SCSS p { font: 10px/8px; // 纯 CSS，不是除法运算 $width: 1000px; width: $width/2; // 使用了变量，是除法运算 width: round(1.5)/2; // 使用了函数，是除法运算 height: (500px/2); // 使用了圆括号，是除法运算 margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算 } 编译出来的CSS p { font: 10px/8px; width: 500px; height: 250px; margin-left: 9px; } Sass 的除法运算还有一个情况。我们先回忆一下，在乘法运算时，如果两个值带有相同单位时，做乘法运算时，出来的结果并不是我们需要的结果。但在除法运算时，如果两个值带有相同的单位值时，除法运算之后会得到一个不带单位的数值。如下所示： .box { width: (1000px / 100px); } 编译出来的CSS如下： .box { width: 10; }查看全部
-
[Sass运算]除法 Sass 的乘法运算规则也适用于除法运算。不过除法运算还有一个特殊之处。众所周知“/”符号在 CSS 中已做为一种符号使用。因此在 Sass 中做除法运算时，直接使用“/”符号做为除号时，将不会生效，编译时既得不到我们需要的效果，也不会报错。一起先来看一个简单的示例： .box { width: 100px / 2; } 编译出来的 CSS 如下： .box { width: 100px / 2; } 这样的结果对于大家来说没有任何意义。要修正这个问题，只需要给运算的外面添加一个小括号( )即可： .box { width: (100px / 2); } 编译出来的 CSS 如下： .box { width: 50px; } 除了上面情况带有小括号，“/”符号会当作除法运算符之外，如果“/”符号在已有的数学表达式中时，也会被认作除法符号。如下面示例： .box { width: 100px / 2 + 2in; } 编译出来的CSS： .box { width: 242px; } 另外，在 Sass 除法运算中，当用变量进行除法运算时，“/”符号也会自动被识别成除法，如下例所示： $width: 1000px; $nums: 10; .item { width: $width / 10; } .list { width: $width / $nums; } 编译出来的CSS: .item { width: 100px; } .list { width: 100px; } 综合上述，”/ ”符号被当作除法运算符时有以下几种情况： • 如果数值或它的任意部分是存储在一个变量中或是函数的返回值。 • 如果数值被圆括号包围。 • 如果数值是另一个数学表达式的一部分。 如下查看全部
-
[Sass]值列表 所谓值列表 (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
提交
取消