CSS Less框架基础教程_ Div+Css教程-查字典教程网
CSS Less框架基础教程
CSS Less框架基础教程
发布时间:2016-12-27 来源:查字典编辑
摘要:通俗的来讲,Less是一个Css预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函...

通俗的来讲,Less 是一个Css 预编译器,意思指的是它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions) 和许多其他的技术,从而可以让Css更具维护性,主题性,扩展性。

本文为Less入门与语法梳理教程。其中包括了一些入门级例子,适合于对Less有入门级了解的开发者查阅。

LESS 源文件的引入方式与标准CSS文件的引入方式一样:

<link rel="stylesheet/less" type="text/css" href="styles.less">

在我们需要引入 LESS 源文件的 HTML 中加入如下代码:

<script src="less.js" type="text/javascript"></script>

导入文件:

@import “variables.less”;

@import “variables.css”;

/*也可以将标准的 CSS 文件直接改成 .less 格式*/

变量与作用域

/*用变量管理值*/

@width : 20px; //全局变量

#homeDiv {

#centerDiv{

width : @width; // 此处应该取最近定义的变量 width 的值 30px

}

@width : 30px; //局部变量,变量和混合是延迟加载的,不一定要在使用前声明

}

#leftDiv {

width : @width; // 此处应该取最上面定义的变量 width 的值 20px

}</p> <p>/*用变量管理选择器名称、URLs、属性*/

@mySelector: banner; // 定义一个变量用于选择器名称

@images: "../img"; // 变量可以是字符串

@property: color; // 定义一个变量用于属性名称

.@{mySelector} { //选择器名称使用变量的用法

background: url("@{images}/white-sand.png"); //URLs使用变量的用法

@{property}: #0ee;

…… //其它常规属性等

}</p> <p>/*编译生成的CSS文件*/

.banner {

background: url("../img/white-sand.png");

color: #0ee;

……

}

变量可以嵌套定义与使用

@fnord: "I am fnord.";

@var: "fnord";

content: @@var;//嵌套使用

content: "I am fnord."; //编译后结果

/*当一个变量定义两次时,只会使用最后定义的变量,Less会从当前作用域中向上搜索。*/

数值,颜色和变量可运算

@init: #111111;

@transition: @init*2;

@var: 1px + 5 // Less能够判断颜色和单位之间的区别

.switchColor {

color: @transition;

}

/*编译生成的CSS文件*/

.switchColor {

color: #222222;

}

混合(Mixins)与函数

.roundedCorners(@radius:5px) { //定义参数并且给予默认值

-moz-border-radius: @radius;

-webkit-border-radius: @radius;

border-radius: @radius;

}</p> <p> // 在另外的样式选择器中使用

#header {

.roundedCorners; //使用类并且参数为默认值

}</p> <p> #footer {

.roundedCorners(10px); //自定义参数值

}</p> <p>.bordered {

border-top: dotted 1px black;

border-bottom: solid 2px black;

}</p> <p>#menu a {

color: #111;

.bordered;

/*在另一个规则集内部使用上面类的属性,则直接访问属性所在类名(或Id名)即可*/

}

@arguments变量:当 Mixins 引用这个参数时,该参数表示所有的变量(多参数)。

.boxShadow(@x:0,@y:0,@blur:1px,@color:#000){

-moz-box-shadow: @arguments;

-webkit-box-shadow: @arguments;

box-shadow: @arguments;

}

#header {

.boxShadow(2px,2px,3px,#f36);

}

命名空间:

#mynamespace {

.home {...}

.user {...}

}

//如果我们要复用 user 这个选择器的时候,我们只需要在需要混入这个选择器的地方这样使用就可以了。#mynamespace > .user

嵌套规则:

<>

<div id="home">

<div id="top">top</div>

</div>

/*使用嵌套规则的LESS 文件*/

#home{

color : blue;

width : 600px;

height : 500px;

border:outset;

#top{

border:outset;

width : 90%;

}

}

/*编译生成的CSS文件*/

#home {

color: blue;

width: 600px;

height: 500px;

border: outset;

}

#home #top {

border: outset;

width: 90%;

}

a {

color: red;

text-decoration: none;

&:hover {

/*有 & 时解析的是同一个元素或此元素的伪类,没有 & 解析是后代元素,&表示当前选择器的父选择器*/

color: black;

text-decoration: underline;

}

}

/*编译生成的CSS文件*/

a {

color: red;

text-decoration: none;

}

a:hover {

color: black;

text-decoration: underline;

}

Extend:

extend是一个Less伪类,为扩展选择器;扩展选择器必须在所有伪类的最后

nav ul:extend(.inline)

background: blue;

}

.inline {

color: red;

}</p> <p>/*编译生成的CSS文件*/

nav ul { // 声明块保持原样

background: blue;

}</p> <p>.inline,nav ul {

color: red;

}</p> <p>pre:hover , .some-class {

&:extend(div pre);

}</p> <p>/*以上与给每个选择器添加一个extend完全相同*/

pre:hover:extend(div pre),

.some-class:extend(div pre) {}

从本质上讲extend会查找编译后的CSS,而不是原始的less

.bucket {

tr & { // 目标选择器中的嵌套,&代表最近父元素

color: blue;

}

}

.some-class:extend(tr .bucket) {} // 识别嵌套规则

/*编译生成的CSS文件*/

tr .bucket , .some-class {

color: blue;

}

extend必须是精确匹配(包括通配符*、伪类顺序、nth表达式,唯一例外的是属性选择器中的引号,less会知道它们是相同的,然后匹配它)

.a.class,

.class.a,

.class > .a {

color: blue;

}

.test:extend(.class) {} // 不会匹配上面的任何选择器的值

*.class {

color: blue;

}

.noStar:extend(.class) {} //不会匹配*.class选择器

link:hover:visited {

color: blue;

}

.selector:extend(link:visited:hover) {} //不会匹配,伪类顺序不同

:nth-child(1n+3) {

color: blue;

}

.child:extend(n+3) {} //不会匹配,尽管逻辑上1n+3与n+3是相同的

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新 Div+Css教程学习
    热门 Div+Css教程学习
    网页设计子分类