# Sass LESS 和 Stylus区别总结

**Repository Path**: gqni/css

## Basic Information

- **Project Name**: Sass LESS 和 Stylus区别总结
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-09-26
- **Last Updated**: 2020-12-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



### 1.什么是 CSS 预处理器

> CSS 预处理器是一种语言用来为 CSS 增加一些编程的的特性，无需考虑浏览器的兼容性问题，例如你可以在 CSS 中使用变量、简单的程序逻辑、函数等等在编程语言中的一些基本技巧，可以让CSS 更见简洁，适应性更强，代码更直观等诸多好处。

### 2.扩展名

> Sass 使用 .sass 扩展名

> Less 使用 .less 扩展名

> 而 Stylus 支持的语法要更多样性一点，它默认使用 .styl 的文件扩展名

### 3.变量

> sass变量必须是以$开头的，然后变量和值之间使用冒号（：）隔开，和css属性是一样的，例如：
```
$maincolor : #092873;
$siteWidth : 1024px;
$borderStyle : dotted;
body {
  color: $maincolor;
  border: 1px $borderStyle $mainColor;
  max-width: $siteWidth;
}

```
> Less css中变量都是用@开头的，其余与sass都是一样的，例如：
```
@maincolor : #092873;
@siteWidth : 1024px;
@borderStyle : dotted;
body {
  color: @maincolor;
  border: 1px @borderStyle @mainColor;
  max-width: @siteWidth;
}
```
> stylus对变量是没有任何设定的，可以是以$开头，或者任何的字符，而且与变量之间可以用冒号，空格隔开， 但是在stylus中不能用@开头，例如：  
```
maincolor = #092873
siteWidth = 1024px
borderStyle = dotted
body
  color maincolor
  border 1px borderStyle mainColor
  max-width siteWidth
``` 

### 4.嵌套

> 如果我们需要在CSS中相同的 parent 引用多个元素，这将是非常乏味的，你需要一遍又一遍地写 parent。例如：
```
div {
  margin: 10px;
}
div nav {
  height: 25px;
}
div nav a {
  color: #0982C1;
}
div nav a:hover {
  text-decoration: underline;
}
```
> 如果用 CSS 预处理器，就可以少写很多单词，而且父子节点关系一目了然，并且sass，Less，stylus都支持下面这样的写法，且都是相同的：
```
//scss style //-----------------------------------
nav {
    ul {
       margin: 0;
       padding: 0;
    }
    li {
       display: inline-block;
    }
    a {
       display: block;
       padding: 6px 12px;
       text-decoration: none;
    }
}
//css style //-----------------------------------
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav li {
    display: inline-block;
}
nav a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
}

```
### 5.运算符

> 在sass，Less与stylus中都是可以这样做的
```
body {
  margin: (14px/2);
  top: 50px + 100px;
  right: 80 * 10%;
}
```