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 '模块（文件）名'，可通过.访问内部属性等

// _base.scss
$font-stack:    Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

// styles.scss
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

⑤mixins混合：相当于函数方法，关键字@mixin 定义（sass是=），@include 调用

@mixin transform($property) {
  -webkit-transform: $property;
  -ms-transform: $property;
  transform: $property;
}
.box { @include transform(rotate(30deg)); }

⑥extend继承：声明标志符%，继承关键字@extend

/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

⑦操作符： +、-、*、/ 、 %等运算符

.container {
  width: 100%;
}

article[role="main"] {
  float: left;
  width: 600px / 960px * 100%;/*相当于62.5%*/
}

aside[role="complementary"] {
  float: right;
  width: 300px / 960px * 100%;
}

 

Modules