less-sass_basic/style1.less at master · bigkaiwu/less-sass_basic · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
//注释
// 单行注释，不会被编译
/*
    多行注释，会被编译
*/
//变量 @
@number : 100px;
.box{
    width: @number; //100px
    height: @number; //100px
}
//插值 @key @{key}
@margin : margin;
@index : 2;
.box@{index}{
    @{margin} : 0 auto;
}
//作用域 同js 就近原则 无顺序
.box2{
    height: @number; //200px sass100px
    @number : 200px;
    width: @number; //200px
}
//选择器嵌套
ul{
    list-style: none;
    li{
        float: left;
        p{
            margin: 10px;
            span{margin: 10px;}
        }
        a{
            text-decoration: none;
        }
    }
    &:hover{ //伪类 &
        color: red;
        //less没有属性嵌套的写法 sass yes
        //font: {
        //    size: 14x;
        //   family: 宋体;
        //    weight: bold;
        //}
    }
}
//计算
@num : 100px;
.box3{
    width: @num * 2;
    height: @num + 10em; //110px 相加时单位不同，会以第一个数的单位为准进行转化
    margin: 10em + @num; //110em
    padding: 20px / 1.5; //13.33333333px;
    padding: ~"20px / 1.5"; //20px / 1.5 转义
    color: #111111 * 2; //支持颜色运算#222222;
}
//函数
.box4{
    width: round(3.5px);//4px
    height: percentage(0.2);//20%
    margin: random();//random() 无法生成随机数
    padding: sqrt(25);
}
//混入
.show{
    display: block;
}
.hidden(@color){
    display: none;
    color: @color;
}
.box5{
    width: 100px;
    .show;//混入show并渲染
    .hidden(blue);//只混入 .hidden不会被渲染 ()内可以传参
}
//命名空间
#nm(){
    .show{display: inline-block;}
}
.box6{
    .show; //display: block;
    #nm.show; //display: inline-block;
}
//继承
.line{
    display: inline;
}
.box7{
    &:extend(.line);
}
.box8{
    &:extend(.line);
}
//.line,
//.box7,
//.box8 {
//  display: inline;
//}

//合并
.box9{
    background+: url(1.png);
    background+: url(2.png);
    //transform+: scale(2);
    //transform+: rotate(30deg);  transform: scale(2), rotate(30deg)
    transform+_: scale(2);
    transform+_: rotate(30deg);//transform: scale(2) rotate(30deg);
}
//媒体查询
.box10{
    width: 100px;
    @media all and (min-width :768px ) {
        width: 600px;
    }
    @media all and (min-width : 1440px) {
        width: 980px;
    }
}
//条件
@count : 5;
.get(@cn) when (@cn > 4 ){
    width : 100px + @cn;
}
.box11{
    .get(@count)
}