动态样式语言—LESS基础知识

Posted tuna

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了动态样式语言—LESS基础知识相关的知识,希望对你有一定的参考价值。

CSS是一门非程序式语言,缺少逻辑性,不便于维护

LESS在CSS现有语法的基础上,为CSS加入程序式语言的特性

引入了变量、混入、运算、函数等功能,大大简化CSS的编写,降低了CSS的维护成本

LESS包含一套语法和一个解析器,用户用它的语法生成样式规则,这些规则通过解析器后生成CSS文件

1.变量

以{}划分作用域,变量从里往外进行查找

 

 @width : 20px; 
 #homeDiv { 
   @width : 30px; 
   #centerDiv{ 
       width : @width;// 此处应该取最近定义的变量 width 的值 30px 
              } 
 } 
 #leftDiv { 
     width : @width; // 此处应该取最上面定义的变量 width 的值 20px 

 }

 

#homeDiv #centerDiv { 
  width: 30px; 
 } 
 #leftDiv { 
  width: 20px; 
 }

2.混入(实现多重继承)

将一个类嵌套到另一个类中使用

 

// 定义一个样式选择器
 .roundedCorners(@radius:5px) { //默认值为5
 -moz-border-radius: @radius; 
 -webkit-border-radius: @radius; 
 border-radius: @radius; 
 } 
 // 在另外的样式选择器中使用
 #header { 
 .roundedCorners; 
 } 
 #footer { 
 .roundedCorners(10px); 
 }

 

 #header { 
 -moz-border-radius:5px; 
 -webkit-border-radius:5px; 
 border-radius:5px; 
 } 
 #footer { 
 -moz-border-radius:10px; 
 -webkit-border-radius:10px; 
 border-radius:10px; 
 }

混入参数

 

// 定义一个样式选择器
 .borderRadius(@radius){ 
 -moz-border-radius: @radius; 
 -webkit-border-radius: @radius; 
 border-radius: @radius; 
 } 
 // 使用已定义的样式选择器
 #header { 
 .borderRadius(10px); // 把 10px 作为参数传递给样式选择器
 } 
 .btn { 
 .borderRadius(3px);// // 把 3px 作为参数传递给样式选择器
 }

 

arguments参数:表示所有变量:

.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){ 
 -moz-box-shadow: @arguments; 
 -webkit-box-shadow: @arguments; 
 box-shadow: @arguments; 
 } 
 #header { 
 .boxShadow(2px,2px,3px,#f36); 
 }

支持命名空间,防止重名问题:

#mynamespace { 
 .home {...} 
 .user {...} 
 }

嵌套规则:

 

<div id="home"> 
 <div id="top">top</div> 
 <div id="center"> 
 <div id="left">left</div> 
 <div id="right">right</div> 
 </div> 
 </div>

 

#home{ 
   color : blue; 
   width : 600px; 
   height : 500px; 
   border:outset; 
   #top{ 
        border:outset; 
        width : 90%; 
   } 
   #center{ 
        border:outset; 
        height : 300px; 
        width : 90%; 
        #left{ 
          border:outset; 
          float : left; 
  width : 40%; 
        } 
        #right{ 
          border:outset; 
          float : left; 
  width : 40%; 
        } 
    } 
 }

&:

a { 
 color: red; 
 text-decoration: none; 
 &:hover {// 有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素
  color: black; 
  text-decoration: underline; 
 } 
 }

3.运算及函数

对数值型value(如颜色、数字)进行四则运算

专门针对color的一组函数

 

 lighten(@color, 10%); // 返回比原色亮10%的颜色
 darken(@color, 10%); //返回比原色暗10%的颜色
 saturate(@color, 10%); //返回比原色饱和10%的颜色
 desaturate(@color, 10%);// 返回比原色不饱和10%的颜色
 fadein(@color, 10%); // 返回比原色不透明10%的颜色
 fadeout(@color, 10%); // 返回比原色透明10%的颜色
 spin(@color, 10); // 比原色大10度色调比
 spin(@color, -10); // 比原色小10度色调比
//使用
init: #f04615; 
 #body { 
  background-color: fadein(@init, 10%); 
 }

 

4、注释

与JS一样

注意:单行注释不会出现在编译后的CSS文件中,若需要保留注释,使用多行注释

5.使用方式:

客户端:

//注意文件的先后顺序
<link rel="stylesheet/less" type="text/css" href="styles.less"> <script type="text/javascript" src="less.js"></script>

实际项目开发中常用:

编写LESS文件后,直接将它编译成CSS文件,然后引入页面

 

以上是关于动态样式语言—LESS基础知识的主要内容,如果未能解决你的问题,请参考以下文章

8.9随笔

sass/scss 和 less的区别

Less前端框架--编写模块化的样式文件

每日分享

less

Less