Less学习笔记 -- Variables （变量）

最新推荐文章于 2025-01-06 14:35:03 发布

转载最新推荐文章于 2025-01-06 14:35:03 发布 · 142 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://yq.aliyun.com/articles/554080

本文介绍了Less预处理器中的变量使用方法，包括如何定义和调用变量，以及变量在实际项目中的运用示例。还展示了如何利用变量简化样式表的编写与维护。

几个学习Less的网站：（主体内容都差不多）

http://www.bootcss.com/p/lesscss/

http://www.lesscss.net/

http://www.css88.com/doc/less/features/

关于Less的安装方法有很多介绍，这里出于学习方便，使用 Koala 工具

今天主要学习的是Less中的变量，与其他语言中的变量一样，Less中的变量允许我们单独定义一系列的通用样式，然后在需要的时候调用，给代码维护也带来了方便。

需要注意的是，由于Less中的变量只能定义一次，实际上相当于是一个常量。

Less代码：

 
         @charset 
         "UTF-8"
         ; 
        
         @nice-blue:
         #5b83ad
         ; //这是一个变量 
        
         @light-blue:@nice-
         blue 
         + 
         #111
         ;  
         /*这也是一个变量*/

CSS代码编译：

 
         @charset 
         "UTF-8"
         ; 
        
         /*这也是一个变量*/

这里需要指出的就是Less中有关注释的两种不同用法，注释方法和Javascript中一样，所不同的是以//注释的注释内容不会编译成CSS内容，而以/**/注释的内容会自动编译成CSS的编译内容。

HTML代码：

 
   
         <!DOCTYPE html>
        
 
         <
         html
         > 
        
 
         <
         head 
         lang
         =
         "en"
         > 
        
 
             
         <
         meta 
         charset
         =
         "UTF-8"
         > 
        
 
             
         <
         title
         ></
         title
         > 
        
 
             
         <
         link 
         rel
         =
         "stylesheet" 
         href
         =
         "css/style.css"
         > 
        
 
         </
         head
         > 
        
 
         <
         body
         > 
        
 
         <
         div 
         id
         =
         "header"
         >我就是我，颜色不一样的水果</
         div
         > 
        
 
         <
         p 
         class
         =
         "text"
         >My name is Li Lei!</
         p
         > 
        
 
         <
         div 
         id
         =
         "menu"
         ></
         div
         > 
        
 
         <
         div 
         id
         =
         "img"
         ></
         div
         > 
        
 
         </
         body
         > 
        
 
         </
         html
         > 
        

  

Less代码

 
    
         @nice-blue:
         #5b83ad
         ;  
        
 
         @aWidth:
         200px
         ; 
        
 
         @aHeight:
         200px
         ; 
        

          
        

         //引用定义好的变量
        
 
         #header{
         color
         :@light-
         blue
         ;} 
        
 
         #menu{
         width
         :@aWidth; 
         height
         :@aHeight; 
         background
         :@nice-
         blue
         +
         #f00
         ;} 
        

  

CSS代码

这里需要特别提出对文件路径的引入，变量是怎么写的

Less代码

 
    
         @images:
         '../images'
         ; 
        
 
         #img{
         width
         :@aWidth+
         300
         ; 
         height
         :@aHeight+
         300
         ; 
         background
         :
         url
         (
         '@{images}/1.jpg'
         );} 
        

  

CSS代码

 
         #img {
        
           width: 500px;
        
           height: 500px;
        
           background: url('../images/1.jpg');
        
         }
        
   本文转自   frwupeng517   51CTO博客，原文链接:http://blog.51cto.com/dapengtalk/1855879