美文网首页
less 一种css的新的样式编码规范

less 一种css的新的样式编码规范

作者: helinyu | 来源:发表于2017-03-22 09:49 被阅读126次

[less学习参考网址](http://www.hubwiz.com/course/5591fa39c086935f4a6fb80d/

里面涉及到一个平台; rhino 是一个3D的建模平台
rhino

最大的特点:====> 动态(书写-更加的灵活),主要思想是宏定义常量定义的思想;
预编译语言 ====》替换

&& 拓展


css的阴影设置

&&

1.客户端的使用方式

外链引入: <link rel="stylesheet/less" type="text/css" href="styles.less">

内链引入:

<style type="text/less">
    // less 代码
</style>

less 项目开发下载地址

引入less的编译脚本:

<script src="less.js" type="text/javascript"></script>
放在header里面,在vue.js 一定要放在</style>的后面;在vue中一定要放在</style>签之后;

less在pc上的安装,有助于在node环境下进行编译;

npm install less -g
npm install less@latest   最新的
编写一个less的代码

上面的代码可以编译,可能编译不成功,引入有问题,应该是没有引入less的库成功;
其他不需要de的例子是没有问题的;


这个例子就可以编写成功

1.1 监视模式【客户端上的一个功能】

改变less代码,客户端自动刷新? 也就是要及时查看属性的变化,就要使用这个了;
只要在URL后面加上'#!watch'
你也可以通过在终端运行less.watch()来启动监视模式。
【开发者的方式使用less.watch 这种方式还是不错的】

<script>less.watch();</script>  [还是在代码上写的

手动调用解析器和编译器:
var parser = new(less.Parser);
命令是lessc 这个命令看,
在终端上编译出现问题;如何在终端上精心配置????

注意终端上是使用lessc **
【less这个命令是linux上的命令,less和cat差不错,不过less一般用于查看长文件】

(这个是由于less语言本身的特质决定的,是编译原因嘛)
变量: 对某个常用值进行定义,多处使用; == 常量【只可以一次】
[这个变量和其他的语言上描述的有点不一样的地方就是:这个变量,使我们手写改变,不会因这为程序运行而改变,是设置好的改变,因为less是预编译,而不会编译程序,所以不会存在这种长时间运行的变化];
(1)体现在替换上面:【宏定义的功能】

下面是有关的内容【具体】less的动态体现在变量上面

2.1 基本的变量

less
编译之后的css代码

2.2 计算能力 (加减乘除等等基本操作)

less
css

2.3 混合 【class】基本回合,替换多个属性

1)2.3.1 不带有参数


less
css

2)2.3.2 带有参数


less
css

2.4 @arguments 变量

====> 主要是对传入的-多个参数,如果全部接受参数的情况


less

2.5 模式匹配 switch选择

定义好模式以及最后设置条件less
css

2.6 导引表达式

当我们想根据表达式进行匹配,而非根据值和参数匹配时,导引就显得非常有用。
为了尽可能地保留CSS的可声明性,LESS通过导引混合而非if/else语句来实现条件判断
【if/else的书写变种】


其实就是if/else的作用

2.7 导引比较运算

检测函式:iscolor、isnumber、isstring、iskeyword、isurl
ispixel、ispercentage、isem
使用关键词 not 否定条件:
> >= = =< < 比较大小

2.8 嵌套规则

注意 & 符号的使用—如果你想写串联选择器,而不是写后代选择器,就可以用到&了. 这点对伪类尤其有用如 :hover 和 :focus。
串联选择器和后代选择器区别

less
css

3 函数

3.1 函数用于计算

任何数字、颜色或者变量都可以参与运算

颜色有对应的函数处理:查阅官网

3.2 颜色函数

less
css

3.3 Math函数

有一些人进行处理,包括了对应pi呀,等等函数

3.4 字符串函数

escape
less
css

4 使用

格式化
命名空间【整体使用】
import引入
字符串差值
避免编译

javascript表达式,也就是less里面可以使用js表达式;

less
css
less

相关文章

  • less 一种css的新的样式编码规范

    [less学习参考网址](http://www.hubwiz.com/course/5591fa39c086935...

  • 浅析less语法

    浅析less语法 less是一种动态样式语言。作为CSS的一种扩展,Less不仅完全兼容CSS语法,而且less将...

  • 浅析less语法

    less是一种动态样式语言。作为CSS的一种扩展,Less不仅完全兼容CSS语法,而且less将CSS赋予了动态语...

  • Less

    Less是什么? Less css是动态样式库 类似css的语法 赋予css新的特性 如变量、继承、运算、函数等 ...

  • CSS预编译语言——less初级入门

    一、 什么是Less.css Less.css是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的...

  • 前端开发文档规范

    HTML 编码规范 请查看HTML编码规范 CSS 编码规范 请查看CSS编码规范 JavaScript 编码规范...

  • less入手

    Less 一,什么是less? Less是一种动态样式语言,可以说是css的升级,因为他属于css预处理语言的一种...

  • Less基础整理

    什么是Less? Less是一种动态样式语言,属于CSS预处理语言的一种,它使用类似CSS的语法,为CSS的赋予了...

  • less学习笔记

    一、什么是less less是一种动态样式语言,属于css预处理语言的一种,它使用类似css的语法,为css赋予了...

  • webstorm使用快捷键快速修正单个文件的style

    stylelint可以修正css、less的样式,按照stylelint的标准, 往往手动修改一些规范比较费时, ...

网友评论

      本文标题:less 一种css的新的样式编码规范

      本文链接:https://www.haomeiwen.com/subject/yxannttx.html