站长杂谈 > web前端
web前端web前端

less简介及编译环境安装

less简介+编译环境

1. 简介
         Less css是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为        CSS的赋予了动态语言的特性,如变量、继承、运算、函数等,更方便CSS的编写和维护。     less css可以在多种语言、环境中使用,包括浏览器端、桌面客户端、服务端。
 2. 编译环境
         1:下载安装visual studio code工具
                   在扩展中装插件
                            1:easy less
                            2:easy sass
                            3:view in browser
                   注:安装好之后重新加载一次
         2: 下载node.js安装(编译环境,将所写的less和sass转换成css文件)
        

less语法一

1. less注释
         /*css形式 的注释 在 less中依然保留*/
2. 变量
         变量 允许单独定义一系列通用的样式 ,在需要时可以调用
         a. 使用@符号定义
                   eg: @base: #f938ab;
                            .box {color: @base; /*变量引用*/}        
         b. 使用@import导入(此方式也支持url)
                   eg: @images: "../img";
                            body {
                                   color: #444;
                                   background: url("@{images}/white-sand.png");
                             }
 
         c. 属性也支持变量的形式:
                  eg:   @property: color;
                            .widget {
                                  @{property}: #0ee;
                                  background-@{property}: #999;
                            }
3.混合
                   a. 普通混合---定义一些属性为一个class,在另一个class中调用
                   eg:
                            .bordered {
                                   border-top:1px dotted black;
                                   border-bottom: 2px solid black;
                            }
                            #menu a {
                                   color: #111;
                                     .bordered;
                            }
b. 混合方式一(带参数混合方式)
                   eg:
                            .border-radius (@radius) {
                                   border-radius: @radius;
                            }
                            .box{
                                     .border-radius(4px);
                            }
c. 混合方式二(给参数设置默认值混合方式)
                   eg:
                            .border-radius (@radius:5px) {
                                   border-radius: @radius;
                            }
                            .box{
                                     .border-radius        
                            }       
d. 混合方式三(不暴露在css中,其他属性集合也可以使用)
                   eg:
                            .wrap () {
                                   text-align: center;
                                    line-height:40px;
                                     color:#ccc;
                            }
                            .box { .wrap }
e. 混合方式四  @arguments变量
                   @arguments包含了所有传递进来的参数,可以处理多个参数.
                   eg:
                            ..box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {
                                   box-shadow: @arguments;
                            }
                            .box{
                                     .box-shadow(2px, 5px);
                            }
4. 嵌套规则 : 嵌套的方式可以编写层叠样式
         eg:
                   #header {
                         color: black;
                         .navigation {
                                         font-size: 12px;
                         }
                         .logo {
                                         width: 300px;
                                         &:hover { text-decoration: none }
                         }
                   }
注意:
 & 符号的使用—如果你想写串联选择器,而不是写后代选择器,就可以用到&了.
这点对伪类尤其有用如 :hover
 

less语法二

1 . 运算 :
         运算提供了加,减,乘,除操作;我们可以做属性值和颜色的运算,这样就可         以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码,如果       你愿意的话可以操作属性值。
         eg :
                   @base: 5%;
                   @filler: @base * 2;
                   @other: @base + @filler;
                   @base-color:#666;
                   @var: 1px;
                   #header a {
                            color: #888888/4;
                            background-color: @base-color + #111;
                            height: 100% / 2 + @filler;
                            border-right: @var * 2;
                            width:(@var + 4) * 2;
                   }
2 . 命名空间 :
         为了更好组织CSS或者单纯是为了更好的封装,将一些变量或者混合模块打包起     来, 可以像下面这样在#bundle中定义一些属性集之后可以重复使用
         #bundle {
                 .button () {
                                display: block;
                                border: 1px solid black;
                                background-color: grey;
                                &:hover { background-color: white }
                }
                .tab { ... }
                .citation { ... }
         }
         #header a {
                color: orange;
                #bundle > .button;
         }       
         .box{#bundle .button}
3.避免编译 :
         避免编译就是不编译,有时候需要输出一些不正确的CSS语法或者使用一些 LESS       不认识的专有语法,这时候就只需要代码直接显示,不经过编译
         eg : 动态计算宽度
                   .box{
                            width:~clac(100% - 10px);
                   }
注意:需要在前面添加 ~
4 : !important  (一般在调试的时候用)
         在less中,某个类的属性值的最后面加上!important,应用该样式的级别最高。      
         eg :
                   .box2{
                            height:300px  !important;
                   }
                   .box2{
                            height:100px;
                            border:1px solid red;
                   }
 
 

web前端ruitiancnweb前端z_vae@sina.com

web前端