当前位置 : 主页 > 网页制作 > html >

预处理器Less和Sass

来源:互联网 收集:自由互联 发布时间:2021-06-12
什么是CSS预处理器 使用一种专门的编程语言,对web样式进行编码,然后再编译成正常的css文件,他对css进行扩展,比css多出来很多功能,比如变量、嵌套、混合、继承等。 less语法 (

什么是CSS预处理器

使用一种专门的编程语言,对web样式进行编码,然后再编译成正常的css文件,他对css进行扩展,比css多出来很多功能,比如变量、嵌套、混合、继承等。

less语法

(1)变量

less允许开发者自定义变量,变量可以在全局样式中使用,变量使得样式修改起来更加简单。

@color: #4D926F; 
#header { 
    color: @color; 
} 
h2 { 
    color: @color; 
}

(2)Mixins(混入)代码复用

很多动态语言都支持Mixins特性,它是多重继承的一种实现,在less中,混入是指在一个class中引入另外一个已经定义的class,就像在当前class中增加一个属性一样。

less文件

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

经过编译生成的css文件

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

Mixins其实是一种嵌套,它允许将一个类嵌套到另外一个类中使用,被嵌套的类也可以称作变量。

(3)嵌套规则

#home{ 
  color : blue; 
  width : 600px; 
  height : 500px; 
  border:outset; 
  #top{ 
       border:outset; 
       width : 90%; 
  } 
}

less的嵌套规则的写法是与DOM结构相对应的,这样使我们的样式表书写更加简洁和更好的可读性,同时,嵌套规则使得对伪元素的操作更加方便。

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

 

  Less和Sass两者都属于css的预处理器,功能上大同小异,都是使用类似程序式语言的方式书写CSS,都具有变量、混入、嵌套、继承等特性,最终目的都是方便CSS的书写和维护。

 

缺点:需要编译成css,是一种额外的开销。

网友评论