项目作者: EarlEcho

项目描述 :
关于LESS的基础知识:变量/混合/匹配模式/嵌套规则/@arguments变量/避免编译等
高级语言:
项目地址: git://github.com/EarlEcho/LESS.git
创建时间: 2017-07-21T03:38:05Z
项目社区:https://github.com/EarlEcho/LESS

开源协议:

下载


LESS的基本用法

一:变量

  1. 语法:@变量名:值;
  2. 例子:定义一个变量 @box-width-height: 200px;
  3. 在盒子中使用它:
  4. #box1 {
  5. height: @box-width-height;
  6. width: @box-width-height;
  7. }

二:混合

  1. 例子:定义一个混合:
  2. .box-style{
  3. width200px;
  4. height:200px;
  5. border: solid 3px pink;
  6. }
  7. 在盒子中使用它:
  8. #box{
  9. .box-style;
  10. backgroud:gray;
  11. }

三:混合(带参数)

  1. 例子:定义一个带参数的混合
  2. .boxAttr(@weight-height) {
  3. width: @weight-height;
  4. height: @weight-height;
  5. border:solid 1px pink;
  6. }
  7. 在盒子中使用它:
  8. #box2{
  9. .boxAttr(300px);
  10. }

四:混合(参数可带默认值)

  1. 例子:定义一个参数有默认值的混合
  2. .border_radius(@radius:5px){
  3. -webkit-border-radius: @radius;
  4. -moz-border-radius: @radius;
  5. border-radius: @radius;
  6. }
  7. 在盒子中使用它:
  8. #box{
  9. .border_radius;
  10. //使用.border_radius,不带后面的括号那么默认的border-radius就是5px
  11. //如果在使用时想要改变border-radius的值,使用方法是:
  12. //.border_radius(10px);
  13. height:200px;
  14. width:200px;
  15. border:solid 1px pink;
  16. }

五:匹配模式(类似于JS中的判断语句)

  1. 例子:画三角形,因为三角形有四个不同的朝向,所以我们可以在CSS中预定义4个不同的方向,在使用时指明要选用的方向就可以。
  2. 通常画一个朝左的三角形是:
  3. #box4 {
  4. width: 0;
  5. height: 0;
  6. overflow: hidden;
  7. border-width:5px;
  8. border-color: transparent pink transparent transparent;
  9. border-style: dashed solid dashed dashed;
  10. }
  11. 当要改变三角形的朝向时就必须重新复写样式,所以可以在less中庸匹配模式解决:
  12. #box4 {
  13. .triangle(left);
  14. //如上,在使用时带个参数指明索要指向的方向
  15. //要改变默认值时:.triangle(left);
  16. }
  17. .triangle(top, @width: 10px, @color: pink) {
  18. border-width: @width;
  19. border-color: transparent transparent @color transparent;
  20. border-style: dashed dashed solid dashed;
  21. }
  22. .triangle(bottom, @width: 10px, @color: pink) {
  23. border-width: @width;
  24. border-color: @color transparent transparent transparent;
  25. border-style: solid dashed dashed dashed;
  26. }
  27. .triangle(right, @width: 10px, @color: pink) {
  28. border-width: @width;
  29. border-color: transparent transparent transparent @color;
  30. border-style: dashed dashed dashed solid;
  31. }
  32. .triangle(left, @width: 10px, @color: pink) {
  33. border-width: @width;
  34. border-color: transparent @color transparent transparent;
  35. border-style: dashed solid dashed dashed;
  36. }
  37. 而匹配模式还有一个默认的值,就是无论匹配到上面哪一个,这一个都会被执{行:
  38. .triangle(@_, @width:10px , @color:pink){
  39. width: 0;
  40. height: 0;
  41. overflow: hidden;
  42. }

六:运算

  1. 可以使用加减乘除的等运算
  2. 例子:
  3. @test:200px;
  4. #box{
  5. width:(@test-20)*5;
  6. color:#ccc-10;
  7. }

七:嵌套规则

  1. 在指定一个盒子中某些元素的样式时:
  2. 比如说在这种情况下:
  3. <div id="box5">
  4. <a href="#">hello less</a>
  5. <span>这是一个span</span>
  6. <form>
  7. <input type="button" name="" id="" value="hello" />
  8. </form>
  9. </div>
  10. 指定样式可以这样写:
  11. #box5{
  12. height: 300px;
  13. width: 400px;
  14. border: solid 1px hotpink;
  15. padding: 15px;
  16. a{
  17. text-decoration: none;
  18. color: red;
  19. &:hover{
  20. color: cornflowerblue;
  21. }
  22. }
  23. span{
  24. font-size: 18px;
  25. }
  26. form{
  27. border: solid 1px pink;
  28. padding: 20px;
  29. }
  30. }
  31. //嵌套在其中表示指定在#box5这个元素盒子里面的a,span,form等元素
  32. //而&符号表示其父级元素

八:@arguments变量

  1. @arguments包含了所有传递进来的参数,当你想单独处理每一个参数的时候可以这样写:
  2. .borde-style(@width:30px , @color:red , @style:solid){
  3. border:@arguments;
  4. //即代替了之前的写法:border:(@width,@color,@style);
  5. }
  6. 在盒子中使用它:
  7. #box{
  8. .border-style(40px);
  9. //这是要改变默认值的写法,不需要改变就不带参数。
  10. }

九:避免编译

  1. 有时候我们需要输出一些不正确的CSS语法或者使用一些LESS不认识的专有语法
  2. 要输出这样的值我们可以在字符串前面加上一个~:
  3. 例如:width:~‘ clac(100%-35)’;

————————————————————By:EarlEcho————————————————————