# 预处理器 less和scss

一、less

 <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3">今天中午吃什么</div>
    <div class="box4">
        <div>渔粉</div>
        <p><a href="">原味</a></p>
    </div>
    <div class="box5">
        <div class="box6"></div>
    </div>
    <div class="box7">传参数</div>
    <div class="box8">带值</div>
    <div class="box9"></div>
    <div class="box10"></div>
    <div class="box11"></div>
    <div class="box12"></div>
    
 /*（单行注释）
 多行注释（shift+alt+A）
 定义变量，用@声明变量,变量名称不能重复 */
@mywidth: 100px;
@mycolor: pink;
@mymargin:10px;

.box1 {
    width: 100px;
    height: 100px;
    background-color: @mycolor ;
}

/*全局作用域    全局变量*/
.box2 {
    width: @mywidth;
    height: @mywidth;
    background-color: @mycolor ;
}

/* 局部作用域   局部变量*/
.box3 {
    @font-size: 30px;
    font-size: @font-size ;
}

/* 某个选择器里面声明的变量不能用在其他选择器里，会报错*/

 /* 嵌套，解析出来的是后代选择器*/
.box4 {
    width: @mywidth;
    height: @mywidth;
    background-color: green;

div {
    width: 50px;
    height: 50px;
    background-color: @mycolor ;
}

a {
    text-decoration: line-through;
}
}
 /* 混入,声明一个样式块儿，直接应用，不同的声明不能重名*/
.border {
    border: 3px dotted;
}
 /*混入时不能嵌套*/
.box6 {
    width: 50px;
    height: 50px;
   .border;
}

 /* 默认不带值*/
.common(@radius,@padding,@size,@color){
    border-radius:@radius ;
    padding:@padding ;
    font-size:@size ;
    color: @color;
}
.box7{
    width: @mywidth;
    height: @mywidth;
    background-color: @mycolor ;
   .common(50%, 20px,30px, green);
}
 /* 带值，带值的最好买放在后面，传值有顺序要求*/
.common1(@radius,@padding,@size,@color:pink){
    border-radius:@radius ;
    padding:@padding ;
    font-size:@size ;
    color: @color;
}
.box8{
    width: @mywidth;
    height: @mywidth;
    background-color: green ;
   .common1(50%,20px,30px);
}
  /* 数值可以进行四则运算
 加法和乘法直接写*/
.box9{
    width: @mywidth+20px;
    height: @mywidth;
    background-color: @mycolor ;
    margin: @mymargin;
}
.box10{
    width: @mywidth*3;
    height: @mywidth;
    background-color: @mycolor ;
    margin: @mymargin;
}
 /* 减号前后要空一格*/
.box11{
    width: @mywidth - 20px;
    height: @mywidth;
    background-color: @mycolor ;
    margin: @mymargin;
}
/*除必须括起来*/
.box12{
    width: (@mywidth/2);
    height: @mywidth;
    background-color: @mycolor ;
    margin: @mymargin;
}
/* 与CSS的区别：
1、注释：单行，不会在CSS里面出现
2、可以根据dom结构嵌套
3、数值可以进行四则运算
4、定义变量：全部、局部
5、mixins混入，声明一个样式块儿，直接运用
 */ 
 

二、scss

     <div class="box1"></div>
<div class="box2"></div>
<button>点餐</button>
<div class="box3">脑瓜疼</div>
<div class="box4"></div>

    /*定义变量，用$声明变量,变量名称可以重复，就近原则*/
/*default表示默认值*/
$mycolor:pink !default;
$margin:20px 0;

.box1 {
    width: 100px;
    height: 100px;
    background-color: $mycolor;
}

$mycolor:green;
.box2 {
    width: 100px;
    height: 100px;
    background-color: $mycolor;
    margin: $margin;
}


@mixin border-radius {
    border-radius: 10%;
}
/* @mixin 是⽤来声明混合宏的关键词，border-radius 是混合宏的名称，花括号⾥的是复⽤的样式代码，注意引入混合宏时类名前面没有点*/

button {
    @include border-radius;
    font-size: 30px;
}

/*使⽤@mixin声明了⼀个混合宏后，需要使⽤ @include 来调⽤声明好的混合宏 
 混合宏传多个参数与less的混入规则相同*/
@mixin center($width, $height) {
    width: $width;
    height: $height;
}

.centerBox {
    @include center(500px, 250px);
}
/*继承，通过@extend来继承，注意继承的类名前有点*/
.common {
    border: 1px solid #ccc;
    padding: 5px 10px;
    font-size: 20px;
}

.box3 {
    width: 100px;
    height: 100px;
    background: $mycolor;
    color: white;
    @extend .common;
}
/*占位符 %bianju声明的代码如果不被@extend调⽤的话，不会产⽣任何代码。取代从前CSS中的代码冗余的情形。*/
%bianju {
    margin-top: 5px;
    padding-top: 5px;
}
/*这段代码没有被 @extend 调⽤，他并没有产⽣任何代码块，只是静静的躺在你的某个 SCSS ⽂件中。
只有通过 @extend 调⽤才会产⽣代码：*/
.size {
    width: 100px;
    height: 100px;
}

.box4 {
    @extend .size ;
    background-color: $mycolor;
    @extend %bianju;
}