weniger

WBOY
Freigeben: 2016-09-29 09:19:05
Original
1133 Leute haben es durchsucht

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

<span style="color: #008080;"> 1</span> <span style="color: #000000;">使用 @ 定义变量

</span><span style="color: #008080;"> 2</span> <span style="color: #000000;">    变量可以做运算

</span><span style="color: #008080;"> 3</span>    

<span style="color: #008080;"> 4</span> <span style="color: #000000;">    @color : #000;

</span><span style="color: #008080;"> 5</span> <span style="color: #000000;">    @width : 1000px;

</span><span style="color: #008080;"> 6</span>    

<span style="color: #008080;"> 7</span> <span style="color: #000000;">使用 & 表示当前类

</span><span style="color: #008080;"> 8</span> <span style="color: #000000;">    .box{

</span><span style="color: #008080;"> 9</span> <span style="color: #000000;">        &:hover{

</span><span style="color: #008080;">10</span> <span style="color: #000000;">            color : #000;

</span><span style="color: #008080;">11</span> <span style="color: #000000;">        }

</span><span style="color: #008080;">12</span> <span style="color: #000000;">    }

</span><span style="color: #008080;">13</span>

<span style="color: #008080;">14</span> <span style="color: #000000;">css 可以嵌套

</span><span style="color: #008080;">15</span>

<span style="color: #008080;">16</span> <span style="color: #000000;">    ul{

</span><span style="color: #008080;">17</span> <span style="color: #000000;">        display : block;

</span><span style="color: #008080;">18</span> <span style="color: #000000;">        li{

</span><span style="color: #008080;">19</span> <span style="color: #000000;">            float : left;

</span><span style="color: #008080;">20</span> <span style="color: #000000;">            a{

</span><span style="color: #008080;">21</span> <span style="color: #000000;">                font-size : 18px;

</span><span style="color: #008080;">22</span> <span style="color: #000000;">            }

</span><span style="color: #008080;">23</span> <span style="color: #000000;">        }

</span><span style="color: #008080;">24</span> <span style="color: #000000;">    }

</span><span style="color: #008080;">25</span>

<span style="color: #008080;">26</span> <span style="color: #000000;">继承 : 直接在需要的地方引用 class或者 id 类

</span><span style="color: #008080;">27</span>

<span style="color: #008080;">28</span> <span style="color: #000000;">.clearfix{

</span><span style="color: #008080;">29</span> <span style="color: #000000;">    zoom : 1;

</span><span style="color: #008080;">30</span> <span style="color: #000000;">    display : block;

</span><span style="color: #008080;">31</span> <span style="color: #000000;">    &:after{

</span><span style="color: #008080;">32</span> <span style="color: #000000;">        content: "";

</span><span style="color: #008080;">33</span> <span style="color: #000000;">        visibility: hidden;

</span><span style="color: #008080;">34</span> <span style="color: #000000;">        clear: both;

</span><span style="color: #008080;">35</span> <span style="color: #000000;">        height: 0;

</span><span style="color: #008080;">36</span> <span style="color: #000000;">        display: block;

</span><span style="color: #008080;">37</span> <span style="color: #000000;">    }

</span><span style="color: #008080;">38</span> <span style="color: #000000;">}

</span><span style="color: #008080;">39</span>

<span style="color: #008080;">40</span> <span style="color: #000000;">.radius(@radius : 15px){

</span><span style="color: #008080;">41</span> <span style="color: #000000;">    border-radius: @radius;

</span><span style="color: #008080;">42</span> <span style="color: #000000;">}

</span><span style="color: #008080;">43</span>

<span style="color: #008080;">44</span> <span style="color: #000000;">.box{

</span><span style="color: #008080;">45</span> <span style="color: #000000;">    .clearfix;

</span><span style="color: #008080;">46</span> <span style="color: #000000;">    .radius(10px);

</span><span style="color: #008080;">47</span> <span style="color: #000000;">}

</span><span style="color: #008080;">48</span>

<span style="color: #008080;">49</span> <span style="color: #000000;">混合 : 类似 js 中的函数, [或者叫继承]

</span><span style="color: #008080;">50</span> <span style="color: #000000;">.layout(){

</span><span style="color: #008080;">51</span> <span style="color: #000000;">    ...

</span><span style="color: #008080;">52</span> <span style="color: #000000;">}

</span><span style="color: #008080;">53</span>

<span style="color: #008080;">54</span>

<span style="color: #008080;">55</span> <span style="color: #000000;">作用域 : 限制继承的条件,可以继承一个 类的部分内容

</span><span style="color: #008080;">56</span>

<span style="color: #008080;">57</span> <span style="color: #000000;">延伸 : &:extend(.box); 括号中可以填写多个 类名  编译后的效果就是 css 中的分组

</span><span style="color: #008080;">58</span>

<span style="color: #008080;">59</span>

<span style="color: #008080;">60</span> <span style="color: #000000;">when 用来做条件判断

</span><span style="color: #008080;">61</span>

<span style="color: #008080;">62</span> <span style="color: #000000;">when not 不等于

</span><span style="color: #008080;">63</span>

<span style="color: #008080;">64</span> <span style="color: #000000;">/*

</span><span style="color: #008080;">65</span> <span style="color: #000000;">    使用 isnumber 来判断某个参数是否为 数字

</span><span style="color: #008080;">66</span> <span style="color: #000000;"> * */

</span><span style="color: #008080;">67</span>

<span style="color: #008080;">68</span> <span style="color: #000000;">.border(@width : 1px , @style : solid, @color : #d1d1d1) when (isnumber(@width)){

</span><span style="color: #008080;">69</span> <span style="color: #000000;">    border: @width @style @color;

</span><span style="color: #008080;">70</span> <span style="color: #000000;">}

</span><span style="color: #008080;">71</span>

<span style="color: #008080;">72</span> <span style="color: #000000;">/*

</span><span style="color: #008080;">73</span> <span style="color: #000000;">    使用 iscolor 来判断某个参数是否为 颜色

</span><span style="color: #008080;">74</span> <span style="color: #000000;"> * */

</span><span style="color: #008080;">75</span>

<span style="color: #008080;">76</span> <span style="color: #000000;">.border(@color) when (iscolor(@color)){

</span><span style="color: #008080;">77</span>    

<span style="color: #008080;">78</span> <span style="color: #000000;">    .border(1px , solid , @color);

</span><span style="color: #008080;">79</span> <span style="color: #000000;">}

</span><span style="color: #008080;">80</span>

<span style="color: #008080;">81</span>

<span style="color: #008080;">82</span> <span style="color: #000000;">.border(@solid) when not ( iscolor(@solid)) , ( isnumber(@solid) ){

</span><span style="color: #008080;">83</span> <span style="color: #000000;">    .border(1px , @solid);

</span><span style="color: #008080;">84</span> }

Nach dem Login kopieren

Verwenden Sie @, um Variablen zu definieren. @color: #000;@width: 1000px verwenden Sie &, um die aktuelle Klasse darzustellen verschachtelt sein
ul{display : block;li{float : left;a{font-size : 18px;}}}
Vererbung: Verweisen Sie bei Bedarf direkt auf die Klasse oder ID-Klasse
.clearfix{zoom : 1;display: block;&:after{content: ""; sichtbarkeit: versteckt; klar: beide; height: 0; radius;}
.box{.clearfix;.radius(10px);}
Mischen: Ähnlich wie Funktionen in js, [oder Vererbung].layout(){...}

Umfang : Vererbungsbedingungen einschränken, Sie können einen Teil einer Klasse erben.
Erweiterung: &:extend(.box); Sie können bei Verwendung mehrere Klassennamen in Klammern eingeben Um eine bedingte Beurteilung vorzunehmen
wenn nicht gleich
/* Verwenden Sie isnumber, um zu beurteilen, ob ein Parameter eine Zahl ist * */
.border(@width: 1px, @style: solid, @color: #d1d1d1 ) when (isnumber(@width)){ border: @width @style @color;}
/* Verwenden Sie iscolor, um zu bestimmen, ob ein Parameter eine Farbe ist * */
.border(@color) when (iscolor (@color)){ .border(1px, solid, @color);}

.border(@solid) wenn nicht ( iscolor(@solid)) , ( isnumber(@solid) ){ .border (1px , @solid);}



Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage