1.CSS
Cascading Style Sheets,层叠样式表。具体内容不再赘述。
2.LESS
css的预处理器,为了解决一些css的弊端,和扩展一些更强大的功能,以及提高效率减少重复。
3.SCSS
同less,只不过功能更多些。(通常说的用的sass,其实是scss)
4.SASS
同scss,只是语法表达式稍有不同,以及仍旧是采用的scss后缀文件名;sass用缩减代替{},切不用分号。与less的语法区别只有less的变量是@,sass的变量是$。
5.SASS功能总结
5.1安装和预处理
安装:npm等
编译:sass source/stylesheets/index.scss build/stylesheets/index.css
监视:sass -watch xxx.scss xxx.css
5.2语法
①变量:$开头,:赋值。如$a: 100px;
②嵌套:a{ b{} }
③片段:(TODO)
④modules,模块:关键字@use '模块(文件)名',可通过.访问内部属性等
1 // _base.scss
2 $font-stack: Helvetica, sans-serif;
3 $primary-color: #333;
4
5 body {
6 font: 100% $font-stack;
7 color: $primary-color;
8 }
9
10 // styles.scss
11 @use 'base';
12
13 .inverse {
14 background-color: base.$primary-color;
15 color: white;
16 }
⑤mixins混合:相当于函数方法,关键字@mixin 定义(sass是=),@include 调用
1 @mixin transform($property) {
2 -webkit-transform: $property;
3 -ms-transform: $property;
4 transform: $property;
5 }
6 .box { @include transform(rotate(30deg)); }
⑥extend继承:声明标志符%,继承关键字@extend
1 /* This CSS will print because %message-shared is extended. */
2 %message-shared {
3 border: 1px solid #ccc;
4 padding: 10px;
5 color: #333;
6 }
7
8 // This CSS won't print because %equal-heights is never extended.
9 %equal-heights {
10 display: flex;
11 flex-wrap: wrap;
12 }
13
14 .message {
15 @extend %message-shared;
16 }
17
18 .success {
19 @extend %message-shared;
20 border-color: green;
21 }
22
23 .error {
24 @extend %message-shared;
25 border-color: red;
26 }
27
28 .warning {
29 @extend %message-shared;
30 border-color: yellow;
31 }
⑦操作符: +
、-
、*
、/
、 %等运算符
1 .container {
2 width: 100%;
3 }
4
5 article[role="main"] {
6 float: left;
7 width: 600px / 960px * 100%;/*相当于62.5%*/
8 }
9
10 aside[role="complementary"] {
11 float: right;
12 width: 300px / 960px * 100%;
13 }