<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;"
>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;"
>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> }