Sass和Less

saas和less

sass和less是什么？

• Saas和Less都属于css预处理器，css预处理器定义了一种新的语言，其基本思想是用一种专门的编程语言，为css增加了一些编程的特性，如：变量、语句、函数和继承等概念。将css作为目标生成文件，然后开发者就只要使用这种语言进行css的编码工作。

Sass和Less相关

saas官网

less官网

    VScode插件：
        Easy LESS 
        Easy Sass

sass的常用语法

.box{
    width: 100px;
    font-size: 10px;
}
// 单行注释不会被编译
/*
    多行注释会被编译
*/

// 变量
$number : 123px;

// 插值
$key : margin;
$i : 2;

.box#{$i}{
    width: $number;
    height: $number;
    #{$key}:auto;
}

// 作用域 saas的作用域是有顺序的 跟less不同
// 嵌套
.box3{
    .span{
        width: $number;
    }
    height: $number;
    $number : 456px;
    width: $number;
    &:hover{
        color: red;
    }
    // 属性嵌套(sass独有)
    font : {
        size: 10px;
        weight:900;
        family:宋体;
    }
}
// 运算 sass中如果单位不同 是不能进行运算的
$num : 100px;
.box4{
    width: $num + 3;
    padding: 3 + $num;
    height: $num + 10px;
    margin: 10px + $num ;
    // sass默认/是分割的 并不会进行运算 需要运算的值用()括起来
    padding: (20px / 1.5);
    color: #010203 * 2;
}

// 函数

// 函数自定义
@function sum($n,$m){
    @return $n + $m
}
.box5{
    width: round(3.5px);//4px
    height: percentage(0.2);//20%
    margin: random();
    // padding: sqrt(25%);
    font-size: sum(10px,6px);
}

// 混入
@mixin show {
    display: block;
}
@mixin hide($color) {
    display: none;
    color: $color;
}
.box6{
    width: 60px;
    @include show;
    @include hide(blue)
}

// 继承
%line{
    display: inline;
}
.box8{
    @extend %line;
}
.box9{
    @extend %line;
}

// 合并
$background : (
    a : url(a.png),
    b : url(b.png)
);

$transform : (
    a : scale(2),
    b : rotate(30deg)
);
.box10{
    background:map-values($background);
    transform: zip(map-values($transform)...)
}

// 媒体查询
.box11{
    width: 100px;
    @media screen and (min-width: 768px) {
        width: 600px;
    }
    @media screen and (min-width: 1440px) {
        width: 900px;
    }
}

$count: 3;
// 条件
.box12{
    @if($count > 4){
        width: 100px + $count;
    }
    @else{
        width: 10px + $count;
    }
}

// 循环
// through 包含 同不包含
@for $i from 0 through 2 {
    .box-#{$i}{
        width: 100px + $i;
    }
}

// 导入
@import './reset.scss'

less的常用语法

.box{
    font-size: 14px;
}
// 单行注释不会被编译
/*
    多行注释会被编译
*/

// 变量
@number : 123px;
// 插值
@key : margin;
@i : 2;

.box@{i}{
    width: @number;
    height: @number;
    @{key} : auto;
}

// 作用域 作用到当前变量的这个{}
// 嵌套
.box3{
    .span{
        width: @number;
        @number : 456px;
    }
    height: @number;
    width: @number;
    &:hover{
        color: red;
    }
}

// 运算 没有单位时  以取变量的单位 单位不同时  以前一个数值的单位为准
@num : 100px;
.box4{
    width: @num + 3;
    padding: 3 + @num;
    height: @num + 10em;
    margin: 10em + @num ;
    font: 20px / 1.5;
    padding: ~"20px / 1.5";
    color: #010203 * 2;
}

// 函数
.box5{
    width: round(3.5px);//4px
    height: percentage(0.2);//20%
    // margin: random();
    padding: sqrt(25%);
}

// 混入
.show{
    display: block;
}
// 类名后加()，可以被混入 但是不会被编译 同时可以接收参数
.hide(@color){
    display: none;
    color: @color;
}
.box6{
    width: 60px;
    .show;
    .hide(blue);
}

// 命名空间 加()不被编译 否则认为是id属性

#nm(){
    .show{
        display: inline-block;
    }
}
.box7{
    #nm.show;
}

// 继承

.line{
    display: inline;
}
.box8{
    &:extend(.line);
}
.box9{
    &:extend(.line);
}

// 合并
.box10{
    background+: url(a.png);
    background+: url(b.png);
    transform+_: scale(2);
    transform+_: rotate(30deg);
}

// 媒体查询
.box11{
    width: 100px;
    @media screen and (min-width: 768px) {
        width: 600px;
    }
    @media screen and (min-width: 1440px) {
        width: 900px;
    }
}

// 条件 
@count : 3;

.get(@cn) when (@cn > 4){
    width: 100px + @cn;
}

.get(@cn) when (@cn < 4){
    width: 10px + @cn;
}


.box12{
    .get(@count);
}


// 循环
@count2: 0;
.get2(@cn) when (@cn < 3){
    .get2((@cn+1));
    .box-@{cn}{
        width: 100px + @cn;
    }
}
.get2(@count2);

// 导入
@import './reset.less';