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

拼搏现实的明天。 2022-07-14 05:06 202阅读 0赞

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) when (@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)) \{ ... \}  
下面就是常见的检测函式：  
iscolor  
isnumber  
isstring  
iskeyword  
isurl  
如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：  
ispixel  
ispercentage  
isem  
最后再补充一点，在导引序列中可以使用and关键字实现与条件：  
.mixin (@a) when (isnumber(@a)) and (@a > 0) \{ ... \}  
使用not关键字实现或条件  
.mixin (@b) when not (@b > 0) \{ ... \}