less & scss(sass)(前端必学五）

 一.less和sass是什么？

出现@语法的css属性值，是css的预处理语言

less是css的一个拓展语言，可以叫做css的预处理语言，浏览器不直接支持less,需要把less文档编译成css文档，利用less书写页面外观，可以很大程度的提高css的编写速度（提高工作效率）

sass是css的一个拓展语言，可以叫做css的预处理语言，浏览器不直接支持less,需要把sass文档编译成css文档，利用sass书写页面外观，可以很大程度的提高css的编写速度（提高工作效率）  sass有两个版本：旧（demo.sass  语法严格）  新（demo.scss)

二.less语法 

 1变量语法 （声明样式变量）

 2嵌套语法（有明显的层级）

 3混合语法  （可以重复使用的代码块）

 4.针对属性值进行操作的函数（循环）

 5.拓展语法（代码重复利用）

 1.声明变量（用；分割）

// 1声明变量
@color:#ff5500;
@w:1000px;
@h:80px;
@bgColor:#f3e4ca;
@pad:0 20px;
@borderCOlor:#ff5500;

.container{
  width: @w;
  height: @h;
  background-color: @bgColor;
  margin: 0 auto;
}

2.嵌套语法

.index-header {
    height: @h;
    line-height: @h;
    background-color: @bgColor;
    padding: @pad;
    .logo {
        color: @color;
        font-size: 40px;
        font-weight: bold;
    }
}

.index-nav {
    padding: @pad;
    ul {
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        border-bottom: 2px solid @color;
        li {
            margin: 0 15px;
            a {
                color: @color;
                text-decoration: none;
            }
        }
    }
}

3.混合语法

@width: 50px;
@height: 50px;

.size() {
    width: @width;
    height: @height;
}

.base() {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 50%;
}

.addColor(@c: red) {
    background-color: @c;
}

.icon-heart {
    display: inline-block;
    vertical-align: middle;
    position: relative;
    // 在less 文档 可以直接使用加减乘除 + - * / 
    margin: (@width / 2) (@width / 2);
    transform: rotate(45deg) scale(1);
    .size();
    .addColor(red);

    // 伪类元素
    &::before {
        .base();
        .size();
        .addColor(red);
        left: -(@width / 2);

    }

    &::after {
        .base();
        .size();
        .addColor(red);
        top: -(@width / 2);
    }
}

4.针对属性值进行操作的函数

.box {
    width: (1000px / 3);
    width: floor((1000px / 3));
    width: ceil((1000px / 3));
}

ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

// 5) 循环 1 2 3 4 5 6
.loop(@i) when (@i < 7) {
    // less文档中字符串
    .demo-@{i} {
        margin-top: 5px;
        width: 50px + (@i * 50);
        height: 10px;
        background-color: rgba(255,0,0, (@i / 10));
    }
    .loop(@i + 1);
}
// 使用.loop()
.loop(1);
// 字符串拼接
// @i: 1;
// .demo-@{i} {
//     width: 100px;
// }

5.拓展语法

.square {
    width: 100px;
    height: 100px;
    background-color: deepskyblue;
    margin-top: 10px;
}

.circle:extend(.square) {
    border-radius: 20px;
}

三.scss 语法

与less不同的声明方式是用$符号

 1变量语法 （声明样式变量）

 2嵌套语法（有明显的层级）

 3混合语法  （可以重复使用的代码块）

 4.针对属性值进行操作的函数（循环）

 5.拓展语法（代码重复利用）

 1变量语法

$color: red;
.box {
    color: $color;
}

2.嵌套语法

与less相同的嵌套写法
.nav {
    width: 1000px;
    ul {
        list-style: none;
        li {
            border-bottom: 1px solid #ccc;
            a {
                text-decoration: none;
                height: 40px;
                line-height: 40px;
            }
        }
    }
}

3.混合语法

//可重复使用的代码块
@mixin size(){
    width: 1000px;
    height: 100px;
}
//给一个参数防止未传值时出现报错
@mixin addColor($c:red){
    background-color: $c;
}
//使用时加@include 
.header {
    @include size();
    @include addColor();
}
.footer {
    @include size();
    @include addColor(green);
}
.nav {
    @include size();
    @include addColor(blue);
}

4.运算 （+ - * /）

除法需要加括号运算，否则无法的出结果

.image-box {
    width: (256px / 2);
}

5.针对属性值进行操作的函数（循环）

.text-box {
    width: floor(1000.99999px);
}
 //循环
// 写法1：
@for $i from 1 to 5 {
    // 字符串拼接
    .demo-#{$i}{
        width: 100px + (10px * $i);
    }
}

// 写法2：
@each $key in header nav  footer {
    .#{$key}-demo{
        width: 100px;
    }
}

6.拓展语法

代码可以重复利用  （@extend）

.square {
    width: 100px;
    height: 100px;
    background-color: pink;
}
.circle {
    @extend .square;
    border-radius: 50%;
}