Less

Less 是一门 CSS 预处理语言，它扩展了 CSS语言
增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展。

Less的安装与编译

安装
    $ npm install -g less
编译
    $ lessc styles.less styles.css

Less的使用

1.变量

//定义变量
@color:#e9232c;
#header{
    //使用变量
    color: @color;
}
div{
    color: @color;
}

less转换成css

#header {
    color: #e9232c;
}
div {
    color: #e9232c;
}

2.混入

.temp{
    border-bottom: 1px solid black;
    border-bottom: 1px solid red;
}
#header{
    color: #111111;
    .temp
}
div{
    background-color: red;
    .temp
}

less转换成css

.temp {
    border-bottom: 1px solid black;
    border-bottom: 1px solid red;
}
#header {
    color: #111111;
    border-bottom: 1px solid black;
    border-bottom: 1px solid red;
}
div {
    background-color: red;
    border-bottom: 1px solid black;
    border-bottom: 1px solid red;
}

3.带参数混入

.border-radius(@radius){
    border-radius: @radius;
    -moz-border-radius: @radius;
    -o-border-radius: @radius;
    -webkit-border-radius: @radius;
}
div{
    background: red;
    .border-radius(4px)
}
.home{
    .border-radius(10px)
}

less转换成css

div {
    background: red;
    border-radius: 4px;
    -moz-border-radius: 4px;
    -o-border-radius: 4px;
    -webkit-border-radius: 4px;
}
.home {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
}

4.嵌套

#footer{
    background-color: red;
    ul{
        font-size: 18px;
        >li{
            a{
                text-decoration: none;
            }
            &:hover{
                border: 1px solid 
                #000000;
                //&表示父级元素
            }
        }
    }
}

less转换成css

#footer {
    background-color: red;
}
#footer ul {
    font-size: 18px;
}
#footer ul > li a {
    text-decoration: none;
}
#footer ul > li:hover {
    border: 1px solid #000000;
}

5.运算

@width: 300px;
div{
    width: @width;
    height: @width / 2;
}

less转换成css

div {
    width: 300px;
    height: 150px;
}

6.内置函数

@color:red;
div{
    color: lighten(@color,10%);
}

less转换成css

div {
    color: #ff3333;
}

7.import

@import "./import.less";
.home{
    color:@color;
}

less转换成css

div {
    color: red;
}
.home {
    color: red;
}

Sass

Sass 是一种 CSS 的预编译语言。它提供了 变量（variables）、
嵌套（nested rules）、 混合（mixins）、 函数（functions）等功能，并且完全兼容 CSS 语法
。Sass 能够帮助复杂的样式表更有条理， 并且易于在项目内部或跨项目共享设计。

Sass的安装和编译

安装
    $ npm install -g sass
编译
    $ sass runoob-test.scss runoob-test.css

Sass的使用

1.变量

$color:red;
div{
    color: $color;
}

sass转换成css

div {
    color: red;
}

2.作用域

$mycolor:red;
h1{
    // $mycolor:black;
    color: $mycolor;
    //离谁最近用谁的样式
}

sass转换成css

h1 {
    color: red;
}

3.嵌套

#header{
    font-size: 20px;
    ul{
        li{
            a{
                &:hover{
                color: red;
                &表示父级元素
                }
            }
        }
    }
}

sass转换成css

#header {
    font-size: 20px;
}
#header ul li a:hover {
    color: red;
}

4.import

@import "./reset.scss";
div{
    color:red;
}
reset.scss
*{
    margin: 0;
    padding: 0;
}
a{
    text-decoration: none;
}

sass转换成css

* {
    margin: 0;
    padding: 0;
}
a {
    text-decoration: none;
}
div {
    color: red;
}

5.混入

@mixin important-text {
    color: red;
    font-size: 24px;
}
div{
    @include important-text;
}

sass转换成css

div {
    color: red;
    font-size: 24px;
}

6.混入带参数

@mixin border($radius) {
    border-radius: $radius;
    -moz-border-radius: $radius;
    -o-border-radius: $radius;
    -webkit-border-radius: $radius;
}
#header{
    @include border(10px);
}

sass转换成css

#header {
    border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -webkit-border-radius: 10px;
}

7.继承

.button-basic{
    border: 1px solid #000000;
    padding: 10px;
}
.button-success{
    color: green;
    @extend .button-basic;
}
.button-error{
    @extend .button-basic;
    color: red;
}

sass转换成css

.button-basic, .button-error, .button-success {
    border: 1px solid #000000;
     padding: 10px;
}
.button-success {
    color: green;
}
.button-error {
    color: red;
}