CSS预处理器LESS

最新推荐文章于 2024-09-27 11:22:35 发布
最新推荐文章于 2024-09-27 11:22:35 发布
阅读量382 收藏 1
点赞数
CSS预处理器
定义：CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码。
---文译参考：https://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html
列举：Less,Sass,Stylus,Scss等
http://lesscss.org/
http://sass-lang.com/
http://learnboost.github.com/stylus

LESS扩充了CSS语言，增加了诸如变量、混合（mixin）、函数等功能，让 CSS 更易维护、方便制作主题、扩充。
LESS 可以运行在 Node、浏览器和 Rhino 平台上。网上有很多第三方工具帮助你编译 Less 源码。

LESS安装分为两种：客户端和服务器端安装。
a) 直接在客户端使用“.less”（LESS源文件），只需要在官网载一个Javascript脚本文件主“less.js”，然后在我们需要引入LESS源文件的HTML的<head>中加入如下代码： 
<link rel="stylesheet/less" type="text/css" rel="external nofollow" href="文件路径/styles.less">
<script src="文件路径/less.js" type="text/javascript"></script>
需要注意的是：在引入“.less”文件中，“link”的“rel”属性要设置为“stylesheet/less”。
还有更重要的一点需要注意的是：LESS源文件一定要在“less.js”引入之前引入，这样才能保证LESS源文件正确编译解析。
b) 服务器端安装
LESS在服务器端的使用主要是借助于LESS的编译器，将LESS源文件编译生成最终的CSS文件，目前常用的方式是利用node的包管理器（npm）安装LESS，安装成功后就可以在Node环境中对LESS文件进行编译。如此一来，LESS在服务器的安装和Sass的安装有点相似，不同之处是他们需依赖的环境不一样，LESS需要的是Node JS环境，而Sass需要的是Ruby环境，为了让大家能更清晰的知道如何在服务器端安装LESS，此处简单的过一下安装过程（本文演示的是在Window7下的安装方法）。
 npm install less  // npm install less@latest

LESS文件的转译成CSS文件
在安装的Node JS环境下通过其自己的命令来进行转译 
$lessc style.less
上面的命令会将编译的CSS传递给stdout,可以将其保存到一个文件中： 
$lessc style.less>style.css

除了上面的命令转译LESS源文件之外，现在还有很多第三方开发的工具，比较常见的有：SimpleLess、Less.app、LESS编译辅助脚本-LESS2CSS、WinLess和CodeKit.app等，我个人现在常用的是WinLess工具，简单易用，不过在IOS系统下LESS.app和CodeKit.app很好用。

LESS语法
LESS是CSS的一种扩展形式，它并没有阉割CSS的功能，而是在现有的CSS语法上，添加了很多额外的功能。就语法规则而言，LESS和Sass一样，都是使用CSS的标准语法，只是LESS的源文件的扩展名是“.less”，其基本语法类似于： 
/*style.less*/
h1 {
  color: #963;
  background-color: #333;
}
LESS特性：变量、混入、嵌套、函数等。
CSS预处理器语言支持任何变量（例如：颜色、数值、文本）。然后你可以在任意地方引用变量。

*以@作为变量的起始标识，变量名由字母、数字、_和-组成
*没有先定义后使用的规定；
*以最后定义的值为最终值；
*可用于rule值、rule属性、rule属性部件、选择器、选择器部件、字符串拼接；
*定义时 "@变量名: 变量值;" 的形式；引用时采用 "@变量名" 或 "@{变量名}" 的形式；

*存在作用域，局部作用域优先级高于全局作用域。

 @color: color;
 @dialog: .dialog;
 @suffix: fix;
 // 空格将被忽略，若要保留空格则需要使用单引号或双引号
 @hi: 'hello ';
 @dear: there ;
  
 .dialog{
 　　// 用于 rule属性部件，必须使用"@{变量名}" 的形式
     background-@{color}: #888;
     // 用于 rule属性，必须使用"@{变量名}" 的形式
     @{color}: blue;
 }
 // 用于 选择器，必须使用"@{变量名}" 的形式
 @{dialog}{
     width: 200px;
 }
 @{dialog}::after{
     content: ': @{hi}@{dear}!'; // 用于 字符串拼接，必须使用"@{变量名}" 的形式
 }
 @h: 1000px;
 // 用于 选择器部件，必须使用"@{变量名}" 的形式
 .ie-@{suffix}{
 　　@h: 30px; // 存在作用域，局部作用域优先级高于全局作用域。
     height: @h; // 用于 属性值，两种形式均可使用
     line-height: 30px;
 }
  
 // 1. 以@作为变量的起始标识，变量名由字母、数字、_和-组成
 // 2. 没有先定义后使用的规定；
 @dialog-border-color: #666;
 @dialog-border-width: 10px;
 @dialog-border-width: 1px; // 3. 以最后定义的值为最终值；

转译出来的CSS样式：

.dialog {
     background-color: #888;
     color: blue;
}
.dialog {
     width: 200px;
}
.dialog::after {
     content: ': hello there!';
}
.ie-fix {
     height: 30px;
     line-height: 30px;
}

列表类型
less变量除了支持#FFF，12px，12，test等单值类型外，还支持列表类型，通过内置函数extract通过索引获取列表元素，通过内置函数length获取列表的元素个数

@colors: #FFF, #0F0, #F0F;
.skin{
 color: extract(@colors, 0);
 height: 12px * length(@colors);
}

最终输出：

.skin{
 color: #FFF;
 height: 36px;
}

作用域（Scope）

CSS预处理器语言中的变量和其他程序语言一样，可以实现值的复用，同样它也存在生命周期，也就是Scope（变量范围，开发人员习惯称之为作用域），简单点讲就是局部变量还是全局变量的概念，查找变量的顺序是先在局部定义中找，如果找不到，则查找上级定义，直至全局。
LESS中的作用域和其他程序语言中的作用域非常的相同，他首先会查找局部定义的变量，如果没有找到，会像冒泡一样，一级一级往下查找，直到根为止。 
/*LESS样式*/
@color: black;
.scoped {
  @bg: blue;
  @color: white;
  color: @color;
  background-color:@bg;
}
.unscoped {
  color:@color;
}
转译出来的CSS样式： 
.scoped {
  color:white;/*白色（调用了局部变量）*/
  background-color:blue;
}
.unscoped {
  color:black;/*黑色（调用了全局变量）*/
}
混合(Mixins)
Mixins是CSS预处理器中语言中最强大的特性，简单点来说，Mixins可以将一部分样式抽出，作为单独定义的模块，被很多选择器重复使用。平时你在写样式时肯定有碰到过，某段CSS样式经常要用到多个元素中，这样你就需要重复的写多次。在CSS预处理器语言中，你可以为这些公用的CSS样式定义一个Mixin，然后在你CSS需要使用这些样式的地方直接调用你定义好的Mixin。这是一个非常有用的特性，Mixins被当作一个公认的选择器，还可以在Mixins中定义变量或者默认参数。
在LESS可以将Mixins看成是一个类选择器，当然Mixins也可以设置参数，并给参数设置默认值。不过设置参数的变量名是使用“@”开头，同样参数和默认参数值之间需要使用冒号（：）分隔开。
在LESS样式中定义一个名叫“error”的Mixin，这个“error”设置了一个参数“@borderWidth”，在没有特别定义外，这个参数的默认值是“2px”： 
/*声明一个Mixin叫作“error”*/
.error(@borderWidth:2px){
  border:@borderWidth solid #f00;
  color: #f00;
}
/*调用error Mixins*/
.generic-error {
  .error();/*直接调用error mixins*/
}
.login-error {
  .error(5px);/*调用error mixins，并将参数@borderWidth的值重定义为5px*/
}
转换后的代码： 
.generic-error {
  border: 2px solid #f00;
  color:#f00;
}
.login-error {
  border:5px solid #f00;
  color: #f00;
}

父选择器引用(ParentSelector)

*采用&引用完整的父选择器
*可通过追加和预追加的方式加工&，从而生成新的选择器
*通过&::after等方式添加伪元素、伪类样式规则集合
*同一个选择器可使用多个&
*通过在选择器后添加 "空格&"的方式，可将当前选择器排列到最前面
*&指向组选择器时，会生成新的组选择器

/* 
 * 采用&引用完整的父选择器
 * 可通过追加和预追加的方式加工&，从而生成新的选择器
 * 通过&::after等方式添加伪元素样式规则集合
 * 同一个选择器可使用多个&
 * 通过在选择器后添加 "空格&"的方式，可将当前选择器排列到最前面
 */
@bg: #aaa;
#ps1 .btn{
　　background-color: @bg;
 border-radius: 5px;
 &:hover{
 　　background-color: lighten(@bg, 30%);
 cursor: pointer;
 }
 &-msg, &-eof{
 　　color: blue;
 }
 .no-borderradius &{
 　　background-image: url('img/btn-bg.png');
 }
}
/*
 * &指向组选择器时，会生成新的组选择器
 */
#dummy1, .dummy1{
　　&:hover{
 　　color: red;
 }
 & + &{
 　　font-size: 12px;
 }
}
转译出来的CSS代码： 
/* 
 * 采用&引用完整的父选择器
 * 可通过追加和预追加的方式加工&，从而生成新的选择器
 * 通过&::after等方式添加伪元素样式规则集合
 * 同一个选择器可使用多个&
 * 通过在选择器后添加 "空格&"的方式，可将当前选择器排列到最前面
 */
#ps1 .btn {
 background-color: #aaaaaa;
 border-radius: 5px;
}
#ps1 .btn:hover {
 background-color: #f6f6f6;
 cursor: pointer;
}
#ps1 .btn-msg,
#ps1 .btn-eof {
 color: blue;
}
.no-borderradius #ps1 .btn {
 background-image: url('img/btn-bg.png');
}
/*
 * &指向组选择器时，会生成新的组选择器
 */
#dummy1:hover,
.dummy1:hover {
 color: red;
}
#dummy1 + #dummy1,
#dummy1 + .dummy1,
.dummy1 + #dummy1,
.dummy1 + .dummy1 {
 font-size: 12px;
}

嵌套（Nesting）

CSS预处理器语言中的嵌套指的是在一个选择器中嵌套另一个选择器来实现继承，从而减少代码量，并且增加了代码的可读性。比如说，我们在CSS中多个元素有一个相同的父元素，那么写样式会变得很乏味，我们需要一遍一遍的在每个元素前写这个父元素，除非给特定的元素添加类名“class”或者ID。 
section {
  margin:10px;
}
section nav {
  height:25px;
}
section nav a {
  color: #0982c1;
}
section nav a:hover {
  text-decoration: underline;
}
相反，使用CSS预处理器语言的嵌套特性，我们可以在父元素的大括号（｛｝）里写这些元素。同时可以使用“&”符号来引用父选择器。 
section {
  margin:10px;
  nav {
    height:25px;
    a {
      color:#0982c1;
      &:hover {
        text-decoration:underline;
      }
    }
  }
}
继承（Inheritance）
对于熟悉CSS的同学来说，对于属性的继承并不陌生。平时在写CSS样式常碰到多个元素应用相同的样式时，我们在CSS中通常都是这样写：
p,ul,ol{/*样式写在这里*/}
LESS将Mixins中的样式嵌套到每个选择器里面。这种方法的缺点就是在每个选择器中会有重复的样式产生。 
.block {
  margin: 10px 5px;
  padding: 2px;
}
p {
  .block;/*继承.block选择器下所有样式*/
  border: 1px solid #eee;
}
ul,ol {
  .block; /*继承.block选择器下所有样式*/
  color: #333;
  text-transform: uppercase;
}

有两种语法形式， <selector>:extend(<parentSelector>){} 和 <selector>{ &:extend(<parentSelector>); }

.animal{
　　color: #fff;
}
/* 语法1：<selector>:extend(<parentSelector>){} */
.bear:extend(.animal){
　　width: 100px;
　　height: 100px;
}
/* 语法2：<selector>{ &:extend(<parentSelector>); } */
.deer{
　　&:extend(.animal);
　　width: 50px;
　　height: 50px;
}

转译出来的CSS代码：

.animal,
.bear,
.deer {
 color: #fff;
}
/* 语法1：<selector>:extend(<parentSelector>){} */
.bear {
 width: 100px;
 height: 100px;
}
/* 语法2：<selector>{ &:extend(<parentSelector>); } */
.deer {
 width: 50px;
 height: 50px;
}
注意事项：
 1. 父选择器必须严格匹配，除了属性选择器中属性值引号不必匹配外，或添加all关键字外。 
*.parent{
　　height: 100px;
 .hair{
 　　color: #f27;
 }
 [name=eyes]{
 　　color: #768;
 }
}
// 匹配失败
.son:extend(.parent){}
.son:extend(.hair){}
   
// 匹配成功
.son:extend(*.parent [name='eyes']){}
.son:extend(*.parent [name="eyes"]){}
// all关键字会匹配所有包含parentSelector内容的选择器，并以selector替换parentSelector来生成新的选择器
// 下面的内容会生成 *.son，*.son .hair，*.son [name=eyes]三个新的选择器
.son:extend(.parent all){}
转译后的CSS代码 
*.parent,
*.son {
 height: 100px;
}
*.parent .hair,
*.son .hair {
 color: #f27;
}
*.parent [name=eyes],
.son,
.son,
*.son [name=eyes] {
 color: #768;
}
2. 父选择器不支持变量形式 
@p1: .parent1;
@p2: .parent2;
.parent1{
　　height: 100px;
}
@{p2}{
　　height: 200px;
}
// 匹配失败
// 形式1，不支持以变量作入参
.son1:extend(@{p1}){}
// 形式2，不支持以变量作为选择器的规则集合
.son1:extend(.parent2){}
   
// 匹配成功
.son2:extend(.parent1){}
@s3: son3;
.@{s3}:extend(.parent1){}
转译后的CSS代码 
.parent1,
.son2,
.son3 {
 height: 100px;
}
.parent2 {
 height: 200px;
}
3. media query影响继承的作用域
3.1. media query内的extend操作，仅能继承当前块的其他选择器样式。
注意：不能extend当前media query块内部的子media query块中的选择器样式；但可以extend父media query块的选择器样式。 
.parent1{
　　height: 200px;
}
@media screen{
　　.parent1{
　　　　height: 100px;
　　} 
 // 无法继承子media query块的选择器样式
 .son1:extend(.parent2){}
 @media (min-width: 1023px){
 　　// 继承父media query块的选择器样式
 .son2:extend(.parent1){}
 .parent2{
 　　width: 200px;
 }
 }
}
转译后的CSS代码 
.parent1 {
 height: 200px;
}
@media screen {
 .parent1 {
 height: 100px;
 }
}
@media screen and (min-width: 1023px) {
 .parent2 {
 width: 200px;
 }
}
3.2. 非media query内的extend操作，将会继承所有media query中匹配的选择器样式。 
@media screen{
　　.parent{
 　　height: 100px;
 }
 @media (min-width: 1023px){
 　　.parent{
 　　width: 200px;
 }
 }
}
.son:extend(.parent){}
转译后的CSS代码 
@media screen {
 .parent,
 .son {
 height: 100px;
 }
}
@media screen and (min-width: 1023px) {
 .parent,
 .son {
 width: 200px;
 }
}
>> 增强的mixin定义mixin时仅能使用类选择器和ID选择器，而extend操作可对应所有的选择器，因此当没有动态入参而又需要类选择器和ID选择器以外的选择器时，可使用extend来实现mixin的功能。

运算符（Operations）

CSS预处理器语言还具有运算的特性，其简单的讲，就是对数值型的Value（如：数字、颜色、变量等）进行加减乘除四则运算。这样的特性在CSS样式中是想都不敢想的，但在CSS预处理器语言中对样式做一些运算一点问题都没有了 
@base_margin: 10px;
@double_margin: @base_margin * 2;
@full_page: 960px;
@half_page: @full_page / 2;
@quarter_page: (@full_page / 2) / 2;
声明一下，在取得“@quarter_page”变量时，我们可以直接除以4，但是在这里，我们只是想演示一下圆括号组成的“运算顺序”（这个运算顺序小学生也知道）。在复合型运算中，小括号也是很有必要的，例如： 
border: (@width / 2) solid #000;
LESS颜色函数是CSS预处理器语言中内置的颜色函数功能，这些功能可以对颜色进行处理，例如颜色的变亮、变暗、饱和度控制、色相控制，渐变颜色等处理十分的方便。 
lighten(@color, 10%); /* 返回的颜色在@color基础上变亮10% */
darken(@color, 10%);  /* 返回的颜色在@color基础上变暗10%*/
saturate(@color, 10%);   /* 返回的颜色在@color基础上饱和度增加10% */
desaturate(@color, 10%); /* 返回的颜色在@color基础上饱和度降低10%*/
spin(@color, 10);  /* 返回的颜色在@color基础上色调增加10 */
spin(@color, -10); /* 返回的颜色在@color基础上色调减少10 */
mix(@color1, @color2); /* 返回的颜色是@color1和@color2两者的混合色 */
下面是LESS中如何使用一个颜色函数的简单例子： 
@color: #0982C1;
h1 {
  background: @color;
  border: 3px solid darken(@color, 50%);
}
导入（Import）
CSS中，并不喜欢用@import来导入样式，因为这样的做法会增加http的请求。但是在CSS预处理器中的导入(@import)规则和CSS的有所不同，它只是在语义上导入不同的文件，但最终结果是生成一个CSS文件。
被导入文件的样式： 
/* file.{type} */
body {
  background: #EEE;
}
需要导入样式的文件： 
@import "reset.css";
@import "file.{type}";
p {
  background: #0982C1;
}
转译出来的CSS代码： 
@import "reset.css";
body {
  background: #EEE;
}
p {
  background: #0982C1;
}
@import还提供了6个可选配置项(分别为reference,inline,less,css,once,multiple)，用来改变引入文件的特性。语法为： @import (reference) '文件路径'; 。下面为各配置项的具体说明：
1. @import (reference) "文件路径"; 
　　将引入的文件作为样式库使用，因此文件中样式不会被直接编译为css样式规则。当前样式文件通过extend和mixins的方式引用样式库的内容。 
2. @import (inline) "文件路径"; 
　　用于引入与less不兼容的css文件，通过inline配置告知编译器不对引入的文件进行编译处理，直接输出到最终输出。注意：引入的文件和当前文件会被编译为一个样式样式 
3. @import (less) "文件路径"; 
　　默认使用该配置项，表示引入的文件为less文件。 
4. @import (css) "文件路径"; 
　　表示当前操作为CSS中的@import操作。当前文件会输出一个样式文件，而被引入的文件自身为一个独立的样式文件 
5. @import (once) "文件路径"; 
　　默认使用该配置项，表示对同一个资源仅引入一次。 
6. @import (multiple) "文件路径"; 

　　表示对同一资源可引入多次。

注释（Comment）

CSS预处理器语言中的注释是比较基础的一部分，这三款预处理器语言除了具有标准的CSS注释之外，还具有单行注释，只不过单行注释不会被转译出来。  

CSS预处理器的高级应用
LESS还拥有一些很有趣的特性有助于我们的开发，例如条件语句、循环语句等。
在编程语言中常见的条件语句： if/else if/else

LESS的条件语句使用有些另类，他不是我们常见的关键词if和else if之类，而其实现方式是利用关键词“when” 
.mixin (@a) when (@a >= 10) { 
  background-color: black; 
 } 
 .mixin (@a) when (@a < 10) { 
  background-color: white; 
 } 
 .class1 { .mixin(12) } 
 .class2 { .mixin(6) }
转译出来的CSS： 
.class1 { 
  background-color: black; 
 } 
.class2 { 
  background-color: white; 
 }
利用When以及<、>、=、<=、>=是十分简单和方便的。LESS并没有停留在这里，而且提供了很多类型检查函数来辅助条件表达式，例如：iscolor、isnumber、isstring、iskeyword、isurl等等。 
.mixin (@a) when (iscolor(@a)) { 
  background-color: black; 
 } 
 .mixin (@a) when (isnumber(@a)) { 
  background-color: white; 
 } 
 .class1 { .mixin(red) } 
 .class2 { .mixin(6) }
转译出来的CSS： 
.class1 { 
  background-color: black; 
 } 
 .class2 { 
  background-color: white; 
 }

另外，LESS的条件表达式同样支持AND和OR以及NOT来组合条件表达式，这样可以组织成更为强大的条件表达式。需要特别指出的一点是，OR在LESS中并不是or关键词，而是用来表示or的逻辑关系。

.smaller (@a, @b) when (@a > @b) { 
  background-color: black; 
} 
.math (@a) when (@a > 10) and (@a < 20) { 
  background-color: red; 
} 
.math (@a) when (@a < 10)，(@a > 20) { 
  background-color: blue; 
} 
.math (@a) when not (@a = 10)  { 
  background-color: yellow; 
} 
.math (@a) when (@a = 10)  { 
  background-color: green; 
} 

.testSmall {.smaller(30, 10) } 
.testMath1 {.math(15)} 
.testMath2 {.math(7)} 
.testMath3 {.math(10)}
转译出来的CSS： 
.testSmall { 
  background-color: black; 
} 
.testMath1 { 
  background-color: red; 
  background-color: yellow; 
} 
.testMath2 { 
  background-color: blue; 
  background-color: yellow; 
} 
.testMath3 { 
  background-color: green; 
}
b)循环语句
LESS并没支持for循环语句，但值得庆幸的是，在LESS中可以使用When来模拟出for循环的特性。 
.loopingClass (@index) when (@index > 0) {
  .myclass {
    z-index: @index;
  }
  // 递归
  .loopingClass(@index - 1);
}
// 停止循环
.loopingClass (0) {}
// 输出
.loopingClass (3);
转译出的CSS： 
.myclass {z-index: 3;}
.myclass {z-index: 2;}
.myclass {z-index: 1;}

参考引用：https://www.w3cplus.com/css/css-preprocessor-sass-vs-less-stylus-2.html
参考引用：http://www.jb51.net/article/107875.htm#a2

dolinyuan
关注
Sass 和 Less CSS预处理器1
08-08
【Sass 和 Less CSS预处理器】是前端开发中两种非常重要的工具，它们为CSS扩展了强大的功能，使得CSS编写更加高效、易于维护。Sass诞生于2007年，是最老牌的CSS预处理器，拥有两种语法：一种是基于缩进的Sass格式，...
Less的使用
空白的博客
06-22 323
@w:100px;@h:100px;div{ width: @w; height: @w=h; border:1px solid red}//混合模式.border(@w:2px){ border:@w solid red;}div{ width:10px; height:10px; .border(2px);}//模糊匹配:会模糊匹配.style(top...
预处理器Less
fangqi20170515的博客
09-25 987
less是一种动态样式语言；为提高css应用的灵活性和效率，less将css赋予了动态语言的特性，如变量、继承、运算、函数。less既可以在客户端上运行，也可以借助Node.js在服务端运行。//用变量去定义变量 @fond : @ var;@ {}}
css预处理器less
最新发布
qq_63447955的博客
09-27 486
CSS预处理器是一种扩展CSS功能的工具，它允许开发者使用变量、嵌套规则、混合（Mixins）、函数等高级特性，使CSS代码更加灵活、易于维护和扩展。Less是其中一种流行的CSS预处理器，它使用JavaScript编写，可以在服务器端或客户端运行，将Less代码编译成标准的CSS代码。本文将详细介绍Less的基本用法，并通过代码示例展示其强大功能。
预处理器less
li520_fei的博客
02-01 2301
预处理器less less官方网站 bootstrap中less教程 less是一种动态样式语言，属于css预处理器的范畴，它扩展了 CSS 语言， 增加了变量、Mixin、函数等特性，使 CSS 更易维护和扩展 LESS 既可以在 客户端 上运行 ，也可以借助Node.js在服务端运行。 less能干啥 举个例子 这是css写法，如果写的太多搞不清楚嵌套层级 * { margin: 0; padding: 0; } #wrap { position: relative; width: 30
CSS预处理器—less
weixin_52629158的博客
04-16 952
CSS预处理器的概念 首次成为前端web开发工作流程的主流 并改变了我们编写CSS的方式。CSS预处理器是一种工具，用于通过自己的脚本语言扩展默认普通CSS的基本功能。它可以帮助我们使用复杂的逻辑语法，比如变量、函数、混合、代码嵌套和继承等等，使普通的CSS更加强大。通过使用CSS预处理器，您可以无缝地自动化日常任务，构建可重用的代码段，避免代码重复和膨胀，并编写组织良好且易于阅读的嵌套代码块。目前世界各地开发人员使用的3种最流行的CSS预处理器，即LESS、Stylus和Sass。
Less预处理器教程
weixin_51591826的博客
02-21 1175
less官方文档less中文文档less是一种css预处理器，它扩展了css语言，提供了变量、嵌套、混合、运算等功能，使样式表的编写更加灵活和高效，用来书写css的工具。通俗的说，less是一种专门编写css代码的语言(工具)，通过less来编写css代码变得更灵活，更高效，更容易维护。
CSS预处理器Sass详解
09-24
Sass，全称Syntactically Awesome Style Sheets，是一种强大的CSS预处理器，它扩展了CSS的语法，为开发者提供了更高效、更有组织的方式来编写样式表。本文将详细介绍Sass的主要特点、与Less的对比，以及Sass的关键...
学习CSS预处理器:Sass和less进行对比
09-25
Sass和Less是目前最广泛使用的两种CSS预处理器，各有其特点和优势。 Sass和Less都是用来编写更高效、可维护的CSS代码的语言。它们允许开发者定义变量，存储常用颜色、字体或尺寸；使用嵌套规则简化复杂的CSS结构；...
recess:CSS 预处理器
06-23
常见的CSS预处理器有Sass、Less和Stylus，而"recess"则是JavaScript社区的一个独特尝试。 **2. recess的特性** - **变量**：recess允许定义变量，可以存储颜色、尺寸等值，避免在整个项目中重复输入相同的值。 -...
CSS 笔记（十二）：预处理器 —— Less
0lonely0
09-04 1541
CSS 笔记（十二）：预处理器 —— Less
推荐：Less - 简洁而强大的CSS预处理器
gitblog_00094的博客
03-18 715
推荐：Less - 简洁而强大的CSS预处理器 去发现同类优质开源项目:https://gitcode.com/ 是一个简洁而强大的CSS预处理器，它扩展了CSS的功能，并提供了许多实用的特性，使开发者能够更高效地编写样式表。本文将为您介绍Less的基本概念、功能及优势，帮助您更好地了解并使用此项目。 Less 是什么？ Less是一种CSS预处理器，它允许您在CSS中使用变量、嵌套规则、运算符等...
Less —— 一种CSS预处理器，可编程化书写CSS
前端小白, 稀土：雩风十六
02-27 511
CSS预处理器是一种专门的编程语言，为CSS增加了一些**编程特性**，使CSS的编写具备一些编程特性，可以更便于对CSS代码进行组织和维护、减少CSS冗余问题
CSS预处理器-Less
蓝朽的小世界
08-22 916
less语法
CSS预处理器篇学习-01 LESS
weixin_44552302的博客
05-08 766
CSS是一门非程序式的语言, 没有变量/函数/作用域等概念，需要书写大量看似没有逻辑的代码, 不方便维护及扩展, 也不利于复用。 所以，CSS预处理器就是升级版CSS CSS 预处理器就是用某一种语言用来为 CSS 增加一些动态语言的的特性(变量、函数、继承等)， CSS预处理器可以让你的 CSS 更见简洁，适应性更强，代码更直观等诸多好处 1、体验LESS LESS就是一种CSS预处理器 什么是...
less--css预处理器
sinat_34896766的博客
03-04 460
less是一个，后缀是.less，扩充了css语言，使css具备了一定的。。
css预处理器：sass和less
Westrate_WT的博客
01-17 1739
对css预处理器中的sass和less的理解
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值