less的使用

1)首先需要安装node.js,安装完成 打开cmd,输入口令npm install -g less安装less工具（
less属于预处理语言，不能直接用，可以通过less工具把less翻译成css文件）
2）less的简单使用
（1）变量
   在less中定义变量，可以直接引用 ，方法：
   @color：red;
   div{
       color:@color
   }
   在cmd通过口令：lessc ×××.less ×××.css转换成css文件准换后css代码为
   div{
       color:red;
   }
 （2）混入
   在less中定义一个类可以混入到其他类中,方法：
   .temp{
    border-top: 1px solid #999999;
    border-bottom: 1px solid #999999;
}
#header{
    width: 200px;
    .temp
}
div{
    background: none;
    .temp
}
 在cmd通过口令：lessc ×××.less ×××.css转换成css文件准换后css代码为
 .temp {
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
}
#header {
  width: 200px;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
}
div {
  background: none;
  border-top: 1px solid #999999;
  border-bottom: 1px solid #999999;
}
（3）带参数的混入：
可以定义一个变量当参数混入 方法：
.border-radius(@radius){
    border-radius: @radius;
    -webkit-border-radius:@radius;
    -moz-border-radius:@radius;
    -o-border-radius:@radius;
}
div{
    background: red;
    .border-radius(10px)
}
#header{
    width: 200px;
    .border-radius(10px);
}
在cmd通过口令：lessc ×××.less ×××.css转换成css文件准换后css代码为
div {
  background: red;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
}
#header {
  width: 200px;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
}
（4）嵌套
一个类里的元素可以通过嵌套完成 ，比较简单，方法：
#footer{
    background: red;
    >ul{
        font-size: 24px;
        li{
            a{
font-size: 14px;
            }
            &:hover{
                color: red;
            }
        }
    }
}
在cmd通过口令：lessc ×××.less ×××.css转换成css文件准换后css代码为：
#footer {
  background: red;
}
#footer > ul {
  font-size: 24px;
}
#footer > ul li a {
  font-size: 14px;
}
#footer > ul li:hover {
  color: red;
}
（5）运算
可以定义一个变量，通过运算来算出值，方法：
@width:300px;

div{
    width: @width;
    height: @width/2;
}
在cmd通过口令：lessc ×××.less ×××.css转换成css文件准换后css代码为：
div {
  width: 300px;
  height: 150px;
}
（6）内置函数
定义一个变量，通过内置函数改变他的值，方法
@color:#999;
div{
    color: lightness(@color,10%);
}
其他函数为
lighten(@color, 10%);     // 返回一个比@color低10％更轻的颜色
darken(@color, 10%);      // 返回一个比@color高10％较暗的颜色
saturate(@color, 10%);    // 返回比@color多饱和度10％的颜色
desaturate(@color, 10%);  // 返回一个比@color少饱和度10％的颜色
fadein(@color, 10%);      // 返回一个比@color少10％透明度的颜色
fadeout(@color, 10%);     // 返回一个比@color多10％透明度的颜色
fade(@color, 50%);        // 返回一个颜色透明度为50％的颜色
spin(@color, 10);         // 返回色调比@color大10度的颜色
spin(@color, -10);        // 返回一个比@color小10度色调的颜色
mix(@color1, @color2);    // 返回一个混合@ color1和@ color2的颜色
在cmd通过口令：lessc ×××.less ×××.css转换成css文件准换后css代码为：
div {
  color: 60%;
}
（7）impot导入其他less文件
通过import导入其他less公共文件，解决了大量代码一起的问题，方法
@import "./import.less";（import.less是另外一个less文件）
.home{
    color: @color;
}
import.less内容为
@color:#999999;
div{
    color: @color;
}
在cmd通过口令：lessc ×××.less ×××.css转换成css文件准换后css代码为：
div {
  color: #999999;
}
.home {
  color: #999999;
}
这些就是less的简单使用

sass的使用

1)首先需要安装node.js,安装完成 打开cmd,输入口令npm install -g sass安装less工具（
less属于预处理语言，不能直接用，可以通过less工具把less翻译成css文件 sass的后缀名为scss）
2)sass的简单使用
（1）变量
   在sass中定义变量，可以直接引用 ，方法：
  $color:red;
 div{
    color: $color;
 }
   在cmd通过口令：sass ×××.scss ×××.css转换成css文件准换后css代码为
   div {
  color: red;
}
(2)作用域
$mycolor:red;

div{
    $mycolor:black;
    color: $mycolor;
}
h1{
    color: $mycolor;
}
 在cmd通过口令：sass ×××.scss ×××.css转换成css文件准换后css代码为
 div {
  color: black;
}

h1 {
  color: red;
}
（3）嵌套
#footer{
    ul{
        
            li{
                a{
                    font-size: 25px;
                    &:hover{
                        color: red;
                    }
                }
            }
        
    }
}
 在cmd通过口令：sass ×××.scss ×××.css转换成css文件准换后css代码为
 #footer ul li a {
  font-size: 25px;
}
#footer ul li a:hover {
  color: red;
}
（4）impot导入其他sass文件
通过import导入其他sass公共文件，解决了大量代码一起的问题，方法
@import "./reset.scss";

div{
    color: green;
    font-size: 20px;
}
reset.scss内容为
*{
    padding: 0;
    margin: 0;
}
.clear{
    clear: both;
}
ul{
    list-style: none;
}
.left{
    float: left;
}
.right{
    float: right;
}
在cmd通过口令：lessc ×××.less ×××.css转换成css文件准换后css代码为：
* {
  padding: 0;
  margin: 0;
}

.clear {
  clear: both;
}

ul {
  list-style: none;
}

.left {
  float: left;
}

.right {
  float: right;
}

div {
  color: green;
  font-size: 20px;
}
(5)混入
   @mixin import-text {
    color: blue;
    font-size: 24px;
}
div{
    font-weight: normal;
    @include import-text;
}
 在cmd通过口令：sass ×××.less ×××.css转换成css文件准换后css代码为
 div {
  font-weight: normal;
  color: blue;
  font-size: 24px;
}
(6)带参数的混入
 @mixin border-radius($radius){
    border-radius: $radius;
    -webkit-border-radius:$radius;
    -moz-border-radius:$radius;
    -o-border-radius:$radius;
}
div{
    background: red;
  @include  border-radius(10px);
}
#header{
    width: 200px;
    @include  border-radius(5px);
}
在cmd通过口令：sass ×××.less ×××.css转换成css文件准换后css代码为
div {
  background: red;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -o-border-radius: 10px;
}

#header {
  width: 200px;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
}
（7）extend继承
.button-basic{
    border: 1px solid red;
    padding: 10px;
}
.button-success{
    background: green;
    @extend .button-basic;
}
.button-error{
    background: red;
    @extend .button-basic;
}
在cmd通过口令：sass ×××.less ×××.css转换成css文件准换后css代码为:
.button-basic, .button-error, .button-success {
  border: 1px solid red;
  padding: 10px;
}

.button-success {
  background: green;
}

.button-error {
  background: red;
}
这些就是sass的简单使用