您的位置：首页 > Web前端 > CSS

关于Less里的css一些规则，了解入门less

2016-11-28 15:42 274 查看
1、.class1{&:hover{ //&表示当前标签、类、id的hover      opacity: 0.9;    }}2、只要修改Less的代码，CSS会自动生成/* Less */@color: #4D926F;//自定义color的颜色#header {  color: @color;}h2 {  color: @color;}/* 生成的 CSS */#header {  color: #4D926F;}h2 {  color: #4D926F;}3、在引入less.js前先要把样式文件引入 :<link rel="stylesheet/less" type="text/css" href="styles.less"><script src="less.js" type="text/javascript"></script>4、混合：混合可以将一个定义好的class A轻松的引入到另一个class B中，从而简单实现class B继承class A中的所有属性。我们还可以带参数地调用，就像使用函数一样。// LESS.rounded-corners (@radius: 5px) {  border-radius: @radius;  -webkit-border-radius: @radius;  -moz-border-radius: @radius;}#header {  .rounded-corners;}#footer {  .rounded-corners(10px);}/* 生成的 CSS */#header {  border-radius: 5px;  -webkit-border-radius: 5px;  -moz-border-radius: 5px;}#footer {  border-radius: 10px;  -webkit-border-radius: 10px;  -moz-border-radius: 10px;}5、嵌套规则：我们可以在一个选择器中嵌套另一个选择器来实现继承，这样很大程度减少了代码量，并且代码看起来更加的清晰。// LESS#header {  h1 {    font-size: 26px;    font-weight: bold;  }  p { font-size: 12px;    a { text-decoration: none;      &:hover { border-width: 1px }    }  }}/* 生成的 CSS */#header h1 {  font-size: 26px;  font-weight: bold;}#header p {  font-size: 12px;}#header p a {  text-decoration: none;}#header p a:hover {  border-width: 1px;}6、函数 & 运算运算提供了加，减，乘，除操作；可以做属性值和颜色的运算，这样就可以实现属性值之间的复杂关系。LESS中的函数一一映射了JavaScript代码，可以操作属性值。// LESS@the-border: 1px;@base-color: #111;@red:        #842210;#header {  color: @base-color * 3;  border-left: @the-border;  border-right: @the-border * 2;}#footer {   color: @base-color + #003300;  border-color: desaturate(@red, 10%);}/* 生成的 CSS */#header {  color: #333;  border-left: 1px;  border-right: 2px;}#footer {   color: #114411;  border-color: #7d2717;}7.在客户端使用引入你的 .less 样式文件的时候要设置 rel 属性值为 “stylesheet/less”:<link rel="stylesheet/less" type="text/css" href="styles.less">然后点击页面顶部download按钮下载 less.js, 在<head> 中引入:<script src="less.js" type="text/javascript"></script>注意你的less样式文件一定要在引入less.js前先引入。备注：请在服务器环境下使用！本地直接打开可能会报错！监视模式监视模式是客户端的一个功能，这个功能允许你当你改变样式的时候，客户端将自动刷新。要使用它，只要在URL后面加上'#!watch'，然后刷新页面就可以了。另外，也可以通过在终端运行less.watch()来启动监视模式。8、用变量名定义为变量@fnord: "I am fnord.";@var: 'fnord';content: @@var;输出： content: "I am fnord.";9 定义不带参数属性集合,如果你想隐藏这个属性集合，不让它暴露到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;}10 @arguments 变量包含了所有传递进来的参数. 如果你不想单独处理每一个参数的话就可以像这样写:.box-shadow (@x: 0, @y: 0, @blur: 1px, @color: #000) {  box-shadow: @arguments;  -moz-box-shadow: @arguments;  -webkit-box-shadow: @arguments;}.box-shadow(2px, 5px);将会输出:  box-shadow: 2px 5px 1px #000;  -moz-box-shadow: 2px 5px 1px #000;  -webkit-box-shadow: 2px 5px 1px #000;11 模式匹配和导引表达式有些情况下，我们想根据传入的参数来改变混合的默认呈现，比如下面这个例子：.mixin (@s, @color) { ... }.class {  .mixin(@switch, #888);}如果想让.mixin根据不同的@switch值而表现各异，如下这般设置：.mixin (dark, @color) {  color: darken(@color, 10%);}.mixin (light, @color) {  color: lighten(@color, 10%);}.mixin (@_, @color) {  display: block;}现在，如果运行:@switch: light;.class {  .mixin(@switch, #888);}就会得到下列CSS:.class {  color: #a2a2a2;  display: block;}如上，.mixin就会得到传入颜色的浅色。如果@switch设为dark，就会得到深色。具体实现如下：第一个混合定义并未被匹配，因为它只接受dark做为首参第二个混合定义被成功匹配，因为它只接受light第三个混合定义被成功匹配，因为它接受任意值只有被匹配的混合才会被使用。变量可以匹配任意的传入值，而变量以外的固定值就仅仅匹配与其相等的传入值。我们也可以匹配多个参数：.mixin (@a) {  color: @a;}.mixin (@a, @b) {  color: fade(@a, @b);}Now if we call .mixin with a single argument, we will get the output of the first definition, but if we call it with two arguments, we will get the second definition, namely @a faded to @b.引导当我们想根据表达式进行匹配，而非根据值和参数匹配时，导引就显得非常有用。如果你对函数式编程非常熟悉，那么你很可能已经使用过导引。为了尽可能地保留CSS的可声明性，LESS通过导引混合而非if/else语句来实现条件判断，因为前者已在@media query特性中被定义。以此例做为开始：.mixin (@a) when (lightness(@a) >= 50%) {  background-color: black;}.mixin (@a) when (lightness(@a) < 50%) {  background-color: white;}.mixin (@a) {  color: @a;}when关键字用以定义一个导引序列(此例只有一个导引)。接下来我们运行下列代码：.class1 { .mixin(#ddd) }.class2 { .mixin(#555) }就会得到：.class1 {  background-color: black;  color: #ddd;}.class2 {  background-color: white;  color: #555;}导引中可用的全部比较运算有： > >= = =< <。此外，关键字true只表示布尔真值，下面两个混合是相同的：.truth (@a) wh4000en (@a) { ... }.truth (@a) when (@a = true) { ... }除去关键字true以外的值都被视示布尔假：.class {  .truth(40); // Will not match any of the above definitions.}导引序列使用逗号‘,’—分割，当且仅当所有条件都符合时，才会被视为匹配成功。.mixin (@a) when (@a > 10), (@a < -10) { ... }导引可以无参数，也可以对参数进行比较运算：@media: mobile;.mixin (@a) when (@media = mobile) { ... }.mixin (@a) when (@media = desktop) { ... }.max (@a, @b) when (@a > @b) { width: @a }.max (@a, @b) when (@a < @b) { width: @b }最后，如果想基于值的类型进行匹配，我们就可以使用is*函式：.mixin (@a, @b: 0) when (isnumber(@b)) { ... }.mixin (@a, @b: black) when (iscolor(@b)) { ... }下面就是常见的检测函式：iscolorisnumberisstringiskeywordisurl如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：ispixelispercentageisem最后再补充一点，在导引序列中可以使用and关键字实现与条件：.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }使用not关键字实现或条件.mixin (@b) when not (@b > 0) { ... }

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                less
                                                css
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航