关于Less里的css一些规则，了解入门less
来源：互联网 发布：linux max map count 编辑：程序博客网 时间：2024/06/05 15:25
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)) { ... }下面就是常见的检测函式：iscolorisnumberisstringiskeywordisurl如果你想判断一个值是纯数字，还是某个单位量，可以使用下列函式：ispixelispercentageisem最后再补充一点，在导引序列中可以使用and关键字实现与条件：.mixin (@a) when (isnumber(@a)) and (@a > 0) { ... }使用not关键字实现或条件.mixin (@b) when not (@b > 0) { ... }0 0
- 关于Less里的css一些规则，了解入门less
- LESS CSS入门简介
- Less的嵌套规则
- 另一篇关于Less的入门文章
- 了解LESS
- CSS——LESS入门
- Css编译之Less入门
- less css
- Less-CSS
- Less css了解与相关心得
- less入门
- Less 入门
- Less CSS框架的简介
- 关于less
- 关于less
- 关于less
- 关于less
- less的一些用法整理
- opencv3.1中利用SIFT特征及RANSAC筛选进行图像矫正
- 云SIM带来的革命
- 常用APDU指令错误码
- ORA-00221 ORA-00206 ORA-00206 ORACLE用户对ASM没权限
- C++Builder建立及调用DLL
- 关于Less里的css一些规则，了解入门less
- PHP连接SQLserver中文字符编码报错的解决
- 代理模式
- 多渠道打包
- 字符集与编码格式
- CTF中常见的隐藏手段总结
- 将一个字符串转换成一个整数，要求不能使用字符串转换整数的库函数
- Android Service 同时使用bindservice和startservice启动的问题
- 第1章 BashShell命令------------(设置环境变量)
