【滑稽】每日一记 LESS&SASS基础

LASS部分：

注释方式：

//less中的一种注释，但不会被编译
/*这也是less中的一种注释，但可以被编译*/

LESS中的变量：
声明变量：使用@变量名：变量值
使用变量：@变量名
LeSS中变量的类型：
 　　数字类：10px；10
　　 字符串：有引号字符串：red
　　 无引号字符串："哈哈"
 　　颜色类：red；rgb(0,0,0)；十六进制#ffffff
 　　值列表类型：用逗号或空格分隔
 变量使用原则：多次频繁出现的值设为变量，还有需要修改的值也可设为变量

 混合（Mixins）：
 无参混合 声明：.name{} 选择器中调用：.name
 带参混合
 　　无默认值声明：.name(@param){} 调用：.name(paramValue);
 　　有默认值声明： .name(@param:value){} 调用：.name(paramValue);paramValue可省略
如果声明时没有默认值，则调用时必须赋值，否则报错
无参混合会在css中编译出同名的class选择器，有参的不会

LESS的匹配模式:
 使用混合进行匹配，类似if结构：
 声明：.name(条件一，参数){} .name(条件二，参数){} .name(条件三，参数){}
 调用：.name(条件值，参数值)
匹配规则：根据调用时提供的条件值，寻找与之匹配的Mixins执行，其中@_表示永远需要执行的部分

LESS中的运算：+、-、/、* 可以带单位也可不带
 进行颜色（十六进制形式）运算时，红绿蓝分开计算，即每组两位之间可以进位，组间不可进位

 LESS中的嵌套：保留html中的代码结构，嵌套默认是后代选择器，如果需要子代选择器，则在子代前面加>
　　　　　　　　&表示上一层，&:hover表示上一层的hover事件，&主要用来进行伪类事件的设置

$length:100px;
$left:left;

.class{
    padding: 10px;
    
}
@mixin hong{
    color: blue;
    
}


#div1{
    width: $length;
    background-color: red;
    @extend.class;
    border-#{$left}:10px solid blue ;
    @include hong;
}


section{
    p{
        color: red;
        background-color: cyan;
    }
    ul{
        padding: 0;
        list-style: none;
        li{
            float: left;
            width: 100px;
            margin: 10px;
            border: {
                color: green;
                style:solid;
                width: 5px;
            };
            &:hover{
                background-color: yellow;
            }
        }
    }
}

 

SASS部分：

注释方式：

//注释一 不会被编译
/*注释二 非压缩模式会被编译*/
/*!注释三 主要注释，在压缩模式下也会被编译*/

1、SASS中的变量：
使用$变量名:变量值 来声明变量
如果变量需要在字符串中嵌套，则需要使用#{}包裹
2、SASS中允许使用算式：
但是会将单位也进行运算，使用时需注意最终单位：100px*10px = 1000 px*px
3、SASS中的嵌套：
选择器嵌套　ul{ li{} } 后代选择、ul{ >li{} } 子代选择、&表示上一层 div{ ul{ li{ &=="div ul li" } } }
属性嵌套　　border:{color: green;style:solid;width: 5px;}
伪类嵌套　　ul{ li{ &:hover{} } }
4、混合宏、继承、占位符
混合宏：声明：@mixin name($param:value){} 调用：@include name(value);
　　　　声明时可以有参可以无参，可以带默认值也可不带，但调用时必须符合声明规范，同less
优点：可以传参 缺点：会将混合宏中代码，copy到对应的选择器中，产生冗余代码
继承：声明：.class{} 调用:@extend .class;
优点：继承的相同代码，会提取到并集选择器中，减少冗余代码；缺点：无法进行传参，会在CSS中生成一个同名class
占位符：声明：%class{} 调用：@extend %class;
优点：继承的相同代码，会提取到并集选择器中，减少冗余代码，不会在CSS中生成一个同名class；缺点：无法进行传参
综上，当需要传递参数时用混合宏，当有现成class时用继承，当不需要参数也不需要class时用占位符
使用...将传进来的所有参数接收到一个变量中 ：@mixin border{$param...} border:$param;  （类似less的@arguments）

5、if条件结构：
 @if条件{} @else{}
6、for 循环结构:
 @for $i from 1 to/through 10; (to不包括10，through包括10 )
7、whlie 循环结构：
$j;
@while $j<10{.while #{$j}{
background-color: red;
}$j:$j+1;}
8、each循环遍历
@each item in a,b,c,d{

}
9、函数

 

$length:100px;
$left:left;

.class{
    padding: 10px;
}
@mixin hong{
    color: blue;
}

#div1{
    width: $length;
    background-color: red;
    @extend.class;
    border-#{$left}:10px solid blue ;
    @include hong;
    
    @if 2>0 {
        background-color: cadetblue;
    }
    @else {
      background-color: blueviolet;  
    }
}

section{
    p{
        color: red;
        background-color: cyan;
    }
    ul{
        padding: 0;
        list-style: none;
        li{
            float: left;
            width: 100px;
            margin: 10px;
            border: {
                color: green;
                style:solid;
                width: 5px;
            };
            &:hover{
                background-color: yellow;
            }
        }
    }
}