css的缺点
CSS 是一门非程序式语言,没有变量、函数、SCOPE(作用域)等概念。
CSS 需要书写大量看似没有逻辑的代码,CSS 冗余度是比较高的。
不方便修改维护及扩展,不利于复用。
CSS 没有很好的计算能力
对于非前端工程师来讲,往往会因为缺少 CSS 编写经验而很难写出组织良好且易于维护的 CSS 代码项目。
Less 介绍
Less(Leaner Style Sheets 的缩写)是一门 CSS扩展语言,也成为CSS预处理器。
做为 CSS的一种形式的扩展,它并没有减少CSS的功能,而是在现有的CSS语法上,为CSS加入一些编程语言的特性。比如它引 入了变量,Mixin(混入),运算以及函数等功能,这就大大简化了 CSS 的编写,并且降低了 CSS的维护成本,就像它的名称所说的那样,Less可以让我们用更少的代码做更多的事情。Less中文网址:
当然除了Less,CSS常见的预处理器还有Sass、Stylus等。
Less安装(暂时选学)
安装nodejs,网址:http://nodejs.cn/download/
检查是否安装成功,使用
cmd
命令(windows系统是window+r
打开运行输入cmd
)或者power shell
,输入 “node –v
” 查看版本即可基于
nodejs
在线安装Less
,使用cmd
命令“npm install -g less
”即可检查是否安装成功,使用
cmd
命令“lessc -v
”查看版本即可
编写Less文件
新建一个文件,可以根据自己的需求随意命名,不过文件后缀名要是 .less
,比如:test.less
。
在VSCode上使用插件编译 Less文件
我们写好的 Less
文件,并不能直接被我们的 html
页面直接使用,需要编译生成 css
文件后才能使用,编译Less
文件的方法有很多,目前我们可以使用 VSCode 的 Easy Less
插件进行编译。
为VSCode 安装Easy Less
插件
Easy Less
插件安装完毕后(有的版本的VSCode需要重新重新启动),只要保存一下我们编写的 Less
文件,会在同一级目录中自动生成一个同名的CSS文件。
附:VSCode
中配置 Easy Less
插件生成的css路径
Less
很好用,VSCode中的 Easy Less
插件也很好用,它可以自动的帮我们在less文件同目录中生成一个同名的css
文件,十分方便,但是当我们的 Less
文件很多的时候,Less
文件和 css
文件混在一起,就会显得十分的混乱,如果能让 Less
文件和 css
文件分离开就好了,其实 Easy Less
插件提供了方法,只需要我们稍微配置一下就可以了。
在 VSCode
项目的根目录中,一般有一个.vscode
目录,找里面的 settings.json
文件,这是 VSCode
针对当前项目的一些配置文件。如果这些目录和文件没有的话,自行创建以下即可,在里面添加如下内容:
{
"less.compile": {
// 是否删除多余空白字符
"compress": true,
// 设置css文件的生成路径,为false为不生成css文件
"out": "${workspaceRoot}/css/",
// 可以采用相对路径
//"out": "../css/"
}
}
如果按照上面的配置,表示在项目的根目录下的 css
目录中生成 css
文件