预处理器

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>

1、单行注释

单行注释不会在CSS里出现

//单行注释
​
/*
多
行
注
释
*/

2、声明变量

定义变量，用 @ 声明变量,变量名称不能重复

@mycolor: blue;
@width:200px;
​
.box1{
    width: @width;
    height: @width;
    background-color: @mycolor;
}

2.1 全局作用域--适用于全局变量

@width:200px;
.box2{
    width: @width;
    height: @width;
    background-color: @mycolor;
}

2.2局部作用域--适用于局部变量

某个选择器里声明的变量只能作用于自身局部，不能用在其他选择器里，其他选择器访问不到的情况下引用会报错

.box3{  
    @font-size:30px;
    font-size: @font-size;
}
如若下列盒子访问不到变量会报错
.box4{
     font-size: @font-size;
}

3、嵌套

可以在声明块里继续嵌套样式声明

解析出来 在CSS 里是后代选择器

.box5{
    width: @width;
    height: @width;
    div{
        width: 50px;
        height: 50px;
        background-color: @mycolor;
    }
    a{
        text-decoration: line-through;
    }
}

4、mixins 混入技术

混入,声明一个样式块儿，直接应用，不同的声明不能重名

混入时不能嵌套

.border{
    border:2px dotted;
}
​
.box6{
    width: @width;
    height: @width;
    .border;
}

4.1 不带值（默认）

混入不带值的样式，在混入后输入值 例：

.common(@radius,@padding,@color){
    border-radius: @radius;
    padding: @padding;
    color: @color;
}
.box7{
    width: @width;
    height: @width;
    background-color: @mycolor;
    .common(100%,30px,yellow);
}

4.2 带值

混入带值的样式，在混入后可以修改默认值，传值有顺序要求。（有值的放在最后一个）

.common(@radius,@padding,@color:pink){
    border-radius: @radius;
    padding: @padding;
    color: @color;
}
.box8{
    width: @width;
    height: @width;
    background-color: @mycolor;
    .common(100%,30px,yellow);
}

5、数值可以进行四则运算

• 加法、乘法直接写
• 除法需要通过括号括起来
• 减法前后必须有空格

 @mycolor:red;
 .box9{
     width: @width*2;
     height: @width+100px;
     background-color: @mycolor;
 }
.box10{
    width: (@width / 2);
    height: @width;
    background-color: @mycolor;
}
.box11{
    width: @width - 100px;
    height: @width;
    background-color: @mycolor;
}

SASS框架应用

SASS 又名 SCSS 是 CSS 预处理器之⼀，官⽹对它的介绍是：它是全世界最成熟、最稳定、最强⼤的专业级 CSS 扩展语⾔。兼容所有版本的 CSS，在 CSS 语法基础上增加了变量、嵌套、混⼊等功能。

Sass与CSS写法的差异

由于 Sass 是基于 Ruby 写出来的所以沿⽤了 Ruby 的书写规范，不带有⼤括号 " {} "和分号" ; "

//----CSS的写法----//
body{
color: #fff;
background: #f36;
}

//----Sass的写法----//

body
color: #fff
background: #f36

//----SCSS的写法----//

body{
color: $white;
background: $f36;
}

<!--SASS 这种语法格式对于前端⼈员都不太容易接受，⽽且容易出错。
SCSS 是 SASS 的新语法格式，从外形上来判断他和 CSS ⻓得⼏乎是⼀模⼀样，其⽂件名格式常常以“.scss”为扩展名。
-->

1、变量

用 $ 声明变量,变量名称可以重复，就近原则

命名变量 $ 变量名称: 变量值；

1.1 普通变量与默认变量

//普通变量定义后可以在全局范围内使⽤//
$fontSize: 12px;
body{
 font-size: $fontSize;
}
//默认变量仅需在值后⾯加上 !default//
$baseLineHeight:1.5 !default;
body{
 line-height: $baseLineHeight; 
}

1.2 全局变量和局部变量

$color: yellow !default; //定义全局变量
.box1{
 color:$color; //调⽤全局变量
}
.box2{
 $color: red; //定义局部变量
 p{
 color: $color;
 }
}

2、嵌套

属性嵌套

.box{
 border-top: 1px solid red;
 border-right: 2px solid yellow;
}
​
//可以写做//
​
.box{
 border:{
 top: 1px solid red;
 right: 2px solid yellow;
 }
}

3、混合宏

3.1 声明混合宏

@mixin border-radius{
 border-radius: 50%; }
​
//-- @mixin 是⽤来声明混合宏的关键词，border-radius 是混合宏的名称，花括号⾥的是复⽤的样式代码。 --//

3.2 调用混合宏

使⽤@mixin声明了⼀个混合宏后，我们使⽤ @include 来调⽤声明好的混合宏：//
@mixin border-radius{ //声明混合宏
 border-radius: 50%; }
button{
 @include border-radius; //调⽤混合宏
}
​
//混合宏的参数    传⼀个不带值的参数
@mixin border-radius($radius){
 border-radius: $radius; //在混合宏"border-radius"中定义了⼀个不带任何数
值的参数"$radius"
}
.box{
 @include border-radius(10px); //在调⽤时候给这个混合宏传⼀个参数值
}
​
//混合宏的参数   传⼀个带值的参数
@mixin border-radius($radius:10px){ //给混合宏的参数传⼀个默认值；
 border-radius: $radius;
}
//在调⽤时只需要调⽤默认的混合宏"border-radius;"
button{
 @include border-radius;
}
//但有时某些元素的值⼜不⼀样，那么可以这样写：
button{
 @include border-radius(50px);
}
​
//混合宏的参数   传多个参数
@mixin center($width,$height){
 width:$width;
 height:$height;
 position: absolute;top: 50%;left: 50%;
 margin-top: -($height)/2;
 margin-left:-($width)/2;
}
.centerBox{
 @include center(500px,250px);
}

4、扩展／继承

通过关键词 "@extend" 来继承已存在的类样式块。

.button{
 border: 1px solid #ccc;
 padding: 5px 10px;
 font-size: 20px;
}
.buttonPrimary{
 background: #f36;
 color: white;
 @extend .button;
}
.buttonSecond{
 background: #ddd;
 color: #000;
 @extend .button;
}
//编译以后：
.button,.buttonPrimary,.buttonSecond{ //在 SASS 中的继承可以继承类样式块中所有样
式代码，并且编译出来会将选择器合并
 border: 1px solid #ccc;
 padding: 5px 10px;
 font-size: 20px;
}
.buttonPrimary{
 background: #f36;
 color: white;
}
.buttonSecond{
 background: #ddd;
 color: #000;
}

5、占位符

　%placeholder 声明的代码如果不被 @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;
}