首页 > 课程库 > less从入门到精通
less从入门到精通

less从入门到精通

less从入门到精通

Web前端开发

24章节|50501次播放

查看课程视频学习交流群
486792092

6小时学习时长
更全面的职业课程大纲立即查看
  • css学习

    less学习路线

    学习任务1)了解less相关内容2)工欲善其事必先利其器适用对象网站开发人员、维护人员、管理人员学习目标学完之后能够使用less中的变量、函数、嵌套、混合、作用域、表达式、运算。 学习简介1. 初见less;(主要讲解什么是less,less的注释)2. 正确使用less;(介绍less开发工具的下... 查看原文

  • css学习

    初见less

    什么是less Less是一个Css预编译器,意思是指它可以扩展Css语言,添加功能如允许变量(variables),混合(mixins),函数(functions)和许多其他技术,让你的Css更具维护性、主题性、扩展性。例如PHP就不能直接和css定义变量,而通过学习less就可以进行编写。使用l... 查看原文

  • css学习

    正确使用less

    如何使用lessLess文件只有在被编译后才能被浏览器识别使用。 less编译工具1.Koala,国人开发的全平台的less编译工具,网址http://koala-app.com。(在本次课程中,主要使用本编译器,简单方便实用)2.WinLess,Windows下的less编译软件,网址 http:... 查看原文

  • css学习

    less变量

    普通的变量Css默认不支持变量,当我们使用less之后就可以使用。其定义方式是 @变量名:值 ,如下,我们定义一个变量green,设置一个颜色green,然后将网页背景设置为绿色:@green: #801f77;header {  background: @green;  }注意:由于变量只能定义一... 查看原文

  • css学习

    less混合简介

    普通混合什么是混合混合就是一种将一系列属性从一个规则集引入(“混合”)到另一个规则集的方式。实例.font_hn{  color: red;  font-family: microsoft yahei, "黑体", Arial, Simsun, "Arial Unicode MS", Mingliu... 查看原文

  • css学习

    less带多个参数的混合

    带多个参数的混合什么是多参数:1.一个组合可以带多个参数,参数之间可以用分号或者逗号分割。2.但是推荐使用分号分割,因为逗号符号有两个意思。它可以理解为mixins参数分隔符或者css列表分隔符。官方阐述:1. 两个参数,并且每个参数都是逗号分隔的列表:.name(1,2,3;something.e... 查看原文

  • css学习

    less嵌套规则

    嵌套规则他模仿了HTML的结构,让我们的css代码更加简洁明了清晰。下面是传统的css写法和less写法的对比:传统写法header{  width: 960px;}header h1 {  font-size: 18px;  color: green;} less写法header{  width:... 查看原文

  • css学习

    less运算

    运算说明:任何数值,颜色和变量都可以进行运算。数值运算Less会为你自动推断数值的单位,所以你不必每一个值都加上单位。注意:运算符与值之间必须以空格分开,涉及优先级时以()进行优先级运算实例.wp{  margin: 0 auto;  background: forestgreen;  width:... 查看原文

  • css学习

    less函数

    这里我们初步的了解一下函数,在最后进行详解。Less提供了许多用于转换颜色,处理字符和进行算术运算的函数,这些函数使用起来非常方便。最常见的rgb函数实例.bgcolor{ background:rgb(0,133,0); }Css结果:.bgcolor{ background:#008500; }... 查看原文

  • css学习

    less作用域

    Less中的作用域与编程语言中的作用域概念非常相似。首先会在局部查找变量和混合,如果没找到,编译器就会在父作用域中查找,依次类推使用实例@clolor:#ffffff;.bgcolor{  width: 50px;  a{    color: @clolor;  }}@clolor:#ff0000;... 查看原文

  • css学习

    less引入和关键字

    引入你可以引入一个或多个less文件,然后这个文件中的所有变量都可以在当前的less项目中使用!一些常用的引入 @import (reference) "main.less";  //引用LESS文件,但是不输出@import (inline) "main.less";  //引用LESS文件,但是... 查看原文

  • css学习

    less条件表达式

    条件表达式其实就是我们在less中使用比较运算符或者表达式的判断来输入我们的值,根据不同的条件来输出不同的值。比较运算符有以下几种>,>=,=,=<,<,true。使用实例.mixin (@a) when (lightness(@a) >= 50%) {   //255/2=127.5  backg... 查看原文

  • css学习

    less循环和合并属性

    循环在less中,混合可以调用它自身。这样,当一个混合递归调用自己,再结合Guard表达式和模式匹配这两个特性,就可以写出循环结构。以下是我们的使用实例:.loop(@counter) when (@counter > 0) {  .loop((@counter - 1));    // 递归调用自... 查看原文

  • css学习

    less其它函数

    函数库函数库包含了许多函数,我们要讲的是以下九种:① 其它函数;② 字符串函数;③ 长度相关函数;④ 数学函数;⑤ 类型函数;⑥ 颜色值定义函数;⑦ 颜色值通道提取函数;⑧ 颜色值运算函数;⑨ 颜色混合函数其它函数在这里面就包含了五个函数如下:Color()函数解析颜色,将代表颜色的字符串转换为颜色... 查看原文

  • css学习

    less字符串函数

    和字符串函数相关的有4个,如下:escape()函数将输入字符串的url特殊字符进行编码处理不转义的编码:, , / , ? , @ , & , + , ‘ , ~ . ! , $转义的编码:# , ^ ( , ) { , } , | , ; . , : , > , < , = , [ , ]实例如... 查看原文

  • css学习

    less长度函数和数学函数

    长度相关函数1)length()函数返回集合中的条数。例子:length(1px solid #0080ff);输出:32)extract()函数返回集合中指定索引的值。例子:@list:”banana”,”tomato”,”peach”;N:extract(@list,1);输出:N:banana... 查看原文

  • css学习

    less类型函数

    类型相关函数一共有9个1).如果一个值是一个数字,返回真(true),否者返回(false):isnumber()2).如果一个只是一个字符串,返回真(true),否者返回(false):isstring()3).如果一个值是一个颜色,返回真(true),否者返回(false):iscolor()4... 查看原文

  • css学习

    less颜色值定义函数

    颜色值定义函数共有7个1).通过十进制红色,绿色,蓝色三种值(RGB)创建不透明的颜色对象:rgb()2).通过十进制红色,绿色,蓝色,以及alpha四种植(RGBA)创建带alpha透明的颜色对象:rgba()3).创建格式为#AARRGGBB的十六进制(hex representation)颜色... 查看原文

  • css学习

    less颜色值通道提取函数

    颜色值通道提取函数一共有12个1).从HSL色彩空间中提取颜色对象的色相值:hue()2). 从HSL色彩空间中提取颜色对象的饱和度值:saturation()3). 从HSL色彩空间中提取颜色对象的亮度值:lightness()4). 从HSV色彩空间中提取颜色对象的色相值:hsvhue()5).... 查看原文

  • css学习

    less颜色值运算函数

    颜色值运算函数一共有11个1).增加一定数值的颜色饱和度:saturate()2).降低一定数值的颜色饱和度:desaturate()3).增加一定数值的颜色亮度:lighten()4).降低一定数值的颜色亮度:darken()5).降低颜色的透明度(或增加不透明度),令其更不透明:fadein()... 查看原文

  • 课程源文件所属章节:课程源文件
    下载
Web前端开发朱朝兵

朱朝兵

TA的课程

自由职业,DZ起点网创始人,一直专注前端技术与Discuz模板设计与制作! 2014年为“中国网”旗下子网站“聚焦中国梦”栏目进行创建。

更专业的职业课程

Web前端开发23380位同学正在学习

Web前端开发

有一位课程导师想与你聊聊

客服热线 400-862-8862

回到顶部