-
嵌套输出方式 expanded： nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } 在编译的时候带上参数“ --style expanded”: sass --watch test.scss:test.css --style expanded 编译出来： nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }查看全部
-
嵌套输出方式 nested： nav { ul { margin: 0; padding: 0; list-style: none; } li { display: inline-block; } a { display: block; padding: 6px 12px; text-decoration: none; } } 在编译的时候带上参数“ --style nested”: sass --watch test.scss:test.css --style nested 编译出来的 CSS 样式风格： nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }查看全部
-
#### Sass中的数据类型 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、空值：如，null； 6、值列表：用空格或者逗号分开，如，1.5em 1em 0 2em 、 Helvetica, Arial, sans-serif。查看全部
-
声明混合宏的方式、声明带参数混合宏的方式、多种情况下调用混合宏的方式，尽在代码快照中...查看全部
-
#### Sass中的注释 1、类似 CSS 的注释方式，使用 ”/* ”开头，结属使用 ”*/ ” 2、类似 JavaScript 的注释方式，使用“//” 两者区别，前者会在编译出来的 CSS 显示，后者在编译出来的 CSS 中不会显示，来看一个示例：查看全部
-
#### Sass中的占位符 %placeholder %placeholder 声明的代码，如果不被 @extend 调用的话，就不会生成任何代码。 通过 @extend 调用的占位符，编译出来的代码会将相同的代码合并在一起。这也是我们希望看到的效果，也让你的代码变得更为干净。 代码快照中的编译结果： .btn, .tab { margin-top: 5px; }查看全部
-
在 Sass 中也具有继承一说，也是继承类中的样式代码块。在 Sass 中是通过关键词 “@extend”来继承已存在的类样式块，从而实现代码的继承。 继承方式就是生成组合选择器查看全部
-
compressed（压缩输出方式）编译出来的CSS样式风格（所有的样式只占一行） nav ul {margin: 0;padding: 0;list-style: none;}nav li {display: inline-block;}nav a {display: block;padding: 6px 12px;text-decoration: none;}查看全部
-
compact（紧凑输出方式）编译出来的CSS样式风格（单个大括号内的样式只占一行） nav ul {margin: 0;padding: 0;list-style: none;} nav li {display: inline-block;} nav a {display: block;padding: 6px 12px;text-decoration: none;}查看全部
-
expanded（展开输出方式）编译出来的CSS样式风格（最后一个大括号独占一行） nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }查看全部
-
nested（嵌套输出方式）编译出来的CSS样式风格（最后一个大括号不独占一行） nav ul { margin: 0; padding: 0; list-style: none; } nav li { display: inline-block; } nav a { display: block; padding: 6px 12px; text-decoration: none; }查看全部
-
less是@；sass是$;Stylus可以省略查看全部
-
混合宏的不足：并不能智能的将相同的样式代码块合并在一起。查看全部
-
p { font: 10px/8px; // 纯 CSS，不是除法运算 $width: 1000px; width: $width/2; // 使用了变量，是除法运算 width: round(1.5)/2; // 使用了函数，是除法运算 height: (500px/2); // 使用了圆括号，是除法运算 margin-left: 5px + 8px/2px; // 使用了加（+）号，是除法运算 }查看全部
-
乘法运算，支持多种单位，但是一个单位同时声明两个值是会有问题。两个值单位相同时，只需要为一个数值提供单位即可，在运算中有不同类型的单位时，也将会报错查看全部
举报
0/150
提交
取消