-
在 Sass 中包含以下几种数据类型： 数字: 如，1、 2、 13、 10px； 字符串：有引号字符串或无引号字符串，如，"foo"、 'bar'、 baz； 颜色：如，blue、 #04a3f9、 rgba(255,0,0,0.5)； 布尔型：如，true、 false； 空值：如，null； 值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。查看全部
-
1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ” 2、类似 JavaScript 的注释方式，使用“//” 两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示查看全部
-
使用 CSS 预处理器语言的一个主要原因是想使用 Sass 获得一个更好的结构体系。比如说你想写更干净的、高效的和面向对象的 CSS。Sass 中的插值(Interpolation)就是重要的一部分。让我们看一下下面的例子： $properties: (margin, padding); @mixin set-value($side, $value) { @each $prop in $properties { #{$prop}-#{$side}: $value; } } .login-box { @include set-value(top, 14px); } @each...in...语句会在《Sass进级篇》中 1-6 @each循环 中讲解。 它可以让变量和属性工作的很完美，上面的代码编译成 CSS： .login-box { margin-top: 14px; padding-top: 14px; }查看全部
-
通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。 //SCSS %mt5 { margin-top: 5px; } %pt5{ padding-top: 5px; } .btn { @extend %mt5; @extend %pt5; } .block { @extend %mt5; span { @extend %pt5; } } 编译出来的CSS //CSS .btn, .block { margin-top: 5px; } .btn, .block span { padding-top: 5px; }查看全部
-
在 Sass 中的继承，可以继承类样式块中所有样式代码，而且编译出来的 CSS 会将选择器合并在一起，形成组合选择器， 用法是@extend .btn;查看全部
-
注意：带引号字符串 + 无引号字符串 = 有引号字符串 无引号字符串 + 有引号字符串 = 无引号字符串查看全部
-
列宽 = 单列宽度 * 列数 + 列间距 * （列数 - 1）查看全部
-
"/"当做除法运算符的情况： (1)如果数值被圆括号包围：height: (200px/2); (2)如果数值或者它的任意部分是存储在一个变量中或是函数的返回值： width: $width/2; (3)如果数值是另一个数学表达式的一部分:margin-left:5px + 8px/2px;查看全部
-
注意：(1)乘法运算和加减法运算略有不同，能够支持多种单位（如：em,ps,%） (2)乘法运算时，若两个单位相同，只需要提供一个单位，否则有错：eg: .box{ width:10px*2; } (3)Sass 的乘法运算和加法、减法运算一样，在运算中有不同类型的单位时，也将会报错。查看全部
-
注意：1、不同类型的单位做运算时，编译会报错 2、减号两边要空格隔开，否则编译错误查看全部
-
in是英寸。 8in即8英寸。 1英寸约=2.54厘米,1英寸大约是96像素 width:20px+8in; 8in=8*96px = 768px 即width=20px + 768px = 788px;查看全部
-
什么时候声明变量？ 我的建议，创建变量只适用于感觉确有必要的情况下。不要为了某些骇客行为而声明新变量，这丝毫没有作用。只有满足所有下述标准时方可创建新变量： 该值至少重复出现了两次； 该值至少可能会被更新一次； 该值所有的表现都与变量有关（非巧合）。 基本上，没有理由声明一个永远不需要更新或者只在单一地方使用变量。查看全部
-
默认变量的意思是说 如果该变量 有值，则获得的是该值，没有值，则默认为默认值。相当于给变量赋了个初始值查看全部
-
expanded与nested的区别在于右括号 }的位置不同，expanded的右括号另起一行，而nested的在末尾； nested的： nav li { display: inline-block; } expanded的： nav li { display: inline-block; }查看全部
-
在 Sass 中编译出来的样式风格也可以按不同的样式风格显示。其主要包括以下几种样式风格： 嵌套输出方式 nested 展开输出方式 expanded 紧凑输出方式 compact 压缩输出方式 compressed查看全部
举报
0/150
提交
取消