CSS, LESS, SCSS, SASS总结
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 }