码迷，mamicode.com
首页 > Web开发 > 详细

CSS和LESS

时间：2019-10-14 14:48:19      阅读：128      评论：0      收藏：0      [点我收藏+]

标签：var   less   重复   bottom   代码   inf   range   data   12px   

1、CSS

　　层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 

 

　　CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
 
　　
.form-control-static {
  min-height: 34px;
  padding-top: 7px;
  padding-bottom: 7px;
  margin-bottom: 0;
}
.form-control-static.input-lg,
.form-control-static.input-sm {
  padding-right: 0;
  padding-left: 0;
}
.input-sm {
  height: 30px;
  padding: 5px 10px;
  font-size: 12px;
  line-height: 1.5;
  border-radius: 3px;
}

 

　　
 　　爱思考的小伙伴肯定会发现css样式总是一大推一大堆的出现，无法合理的实现复用、运算。下面less成功的解决这个问题。
　　　　　　　　　　　　　　　　　　　　　　

技术图片

 


2、LESS

　　2.1 less概述

 

　　

　　LESS 将 CSS 赋予了动态语言的特性，如 变量， 继承， 运算， 函数. LESS 既可以在 客户端 上运行 (支持IE 6+, Webkit, Firefox)，也可以借助Node.js或者Rhino在服务端运行。bootstrap默认使用LESS。

 

　　2.2 LESS 语法

 

　　LESS 做为 CSS 的一种形式的扩展，它并没有阉割 CSS 的功能，而是在现有的 CSS 语法上，添加了很多额外的功能，所以学习 LESS 是一件轻而易举的事情，果断学习之！　

　变量
　　很容易理解:

　　@nice-blue: #5B83AD;
　　@light-blue: @nice-blue + #111;

　　#header { color: @light-blue; }

　　输出:

　　#header { color: #6c94be; }


 




　　甚至可以用变量名定义为变量:




　　@fnord: "I am fnord.";
　　@var: ‘fnord‘;
　　content: @@var;





　　解析后:




　content: "I am fnord.";


 


　


　混合


　　在 LESS 中我们可以定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性. 下面有这样一个class，那如果我们现在需要在其他class中引入那些通用的属性集，那么我们只需要在任何class中像下面这样调用就可以了:


.bordered {
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}


#menu a {
  color: #111;
  .bordered;
}
.post a {
  color: red;
  .bordered;
}


.bordered class里面的属性样式都会在 #menu a 和 .post a中体现出来:


#menu a {
  color: #111;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}
.post a {
  color: red;
  border-top: dotted 1px black;
  border-bottom: solid 2px black;
}



　　任何 CSS class, id 或者 元素 属性集都可以以同样的方式引入.


 


　带参数混合


　　在 LESS 中，你还可以像函数一样定义一个带参数的属性集合:


.border-radius (@radius) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}



　　然后在其他class中像这样调用它:


#header {
  .border-radius(4px);
}
.button {
  .border-radius(6px);  
}



　　我们还可以像这样给参数设置默认值:


.border-radius (@radius: 5px) {
  border-radius: @radius;
  -moz-border-radius: @radius;
  -webkit-border-radius: @radius;
}



　　所以现在如果我们像这样调用它的话:


#header {
  .border-radius;  
}



　　radius的值就会是5px.


　　你也可以定义不带参数属性集合,如果你想隐藏这个属性集合，不让它暴露到CSS中去，但是你还想在其他的属性集合中引用，你会发现这个方法非常的好用:


.wrap () {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}

pre { .wrap }



　输出:


pre {
  text-wrap: wrap;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  word-wrap: break-word;
}


　　




 


　　嵌套规则


LESS 可以让我们以嵌套的方式编写层叠样式. 让我们先看下下面这段 CSS:


#header { color: black; }
#header .navigation {
  font-size: 12px;
}
#header .logo { 
  width: 300px; 
}
#header .logo:hover {
  text-decoration: none;
}



在 LESS 中, 我们就可以这样写:


#header {
  color: black;

  .navigation {
    font-size: 12px;
  }
  .logo {
    width: 300px;
    &:hover { text-decoration: none }
  }
}



或者这样写:


#header        { color: black;
  .navigation  { font-size: 12px }
  .logo        { width: 300px;
    &:hover    { text-decoration: none }
  }
}


 


代码更简洁了，而且感觉跟DOM结构格式有点像.


 


注意 & 符号的使用—如果你想写串联选择器，而不是写后代选择器，就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus.


 


例如:


 


.bordered {
  &.float {
    float: left; 
  }
  .top {
    margin: 5px; 
  }
}



 


会输出


 


.bordered.float {
  float: left;  
}
.bordered .top {
  margin: 5px;
}


 


 


 


 


　　Math 函数


 


LESS提供了一组方便的数学函数，你可以使用它们处理一些数字类型的值:


 


round(1.67); // returns `2`
ceil(2.4);   // returns `3`
floor(2.6);  // returns `2`



 


如果你想将一个值转化为百分比，你可以使用percentage 函数:


 


percentage(0.5); // returns `50%`



 


　　


　　命名空间


 


有时候，你可能为了更好组织CSS或者单纯是为了更好的封装，将一些变量或者混合模块打包起来, 你可以像下面这样在#bundle中定义一些属性集之后可以重复使用:


 


#bundle {
  .button () {
    display: block;
    border: 1px solid black;
    background-color: grey;
    &:hover { background-color: white }
  }
  .tab { ... }
  .citation { ... }
}



 


你只需要在 #header a中像这样引入 .button:


 


#header a {
  color: orange;
  #bundle > .button;
}



 


　　作用域


 


LESS 中的作用域跟其他编程语言非常类似，首先会从本地查找变量或者混合模块，如果没找到的话会去父级作用域中查找，直到找到为止.


 


@var: red;

#page {
  @var: white;
  #header {
    color: @var; // white
  }
}

#footer {
  color: @var; // red  
}


 挥一挥衣袖，不带走一片云彩


技术图片


 


 




 


我是飞奔的企鹅，欢迎说出你的故事


      此内容仅作学习交流之用，如有不正，敬请指出


        　　
CSS和LESS
标签：var   less   重复   bottom   代码   inf   range   data   12px   
原文地址：https://www.cnblogs.com/flyPenguinblog/p/11671141.html

                

                

                    

                        

                            

                                

                                    踩

                                

                                    (0)

                            

                            

                                

                                    赞

                                

                                    (0)

                            

                        

                        

                            

                                    
                                
                            

                        

                    

                    

                        举报
                    

                    
                    

                        

                            评论 一句话评论（0）
                        

                        

                            
                            

                                
                            

                        

                        

                            

                            

                                

                                

                                

                                    
                                

                            

                            

                                登录后才能评论！
                                
                            

                            

                        

                    

                

                
            

        

        

            
            





            
            


    

        

            分享档案

        

            更多>
        

    

    

        
                
                    2021年07月29日
                    (22)

            
                
                    2021年07月28日
                    (40)

            
                
                    2021年07月27日
                    (32)

            
                
                    2021年07月26日
                    (79)

            
                
                    2021年07月23日
                    (29)

            
                
                    2021年07月22日
                    (30)

            
                
                    2021年07月21日
                    (42)

            
                
                    2021年07月20日
                    (16)

            
                
                    2021年07月19日
                    (90)

            
                
                    2021年07月16日
                    (35)

            
    




            


    

        
周排行

        

            mamicode.com排行更多图片

        

            更多

    

    

        
    




            
        

        

        

    

    
    

    

        

            友情链接
        

        

            兰亭集智  
			国之画  
			百度统计   
			 站长统计  
			阿里云  
			chrome插件  
			新版天听网
        

    





    

        

            关于我们 - 联系我们 - 留言反馈
        

        

            © 2014 mamicode.com
            版权所有   联系我们:gaon5@hotmail.com
        

        

            迷上了代码！